# Formatting in Dash

**URL:** <https://community.plotly.com/t/formatting-in-dash/51197>\
**Category:** Dash Python\
**Created:** [March 19, 2021, 8:44am UTC](https://community.plotly.com/t/formatting-in-dash/51197 "2021-03-19T08:44:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![aarush](https://avatars.discourse-cdn.com/v4/letter/a/8491ac/32.png) [@aarush](https://community.plotly.com/u/aarush)\
**Post date:** [March 19, 2021, 8:44am UTC](https://community.plotly.com/t/formatting-in-dash/51197/1 "2021-03-19T08:44:36Z")

</div>

How to add a small circle icon buttons in dashboard python ?

![1](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/4/40269f93b698e06eaf8af3bd0d49c1799fe4ac9f.png)

---

<div class="post-metadata">

**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [March 19, 2021, 12:42pm UTC](https://community.plotly.com/t/formatting-in-dash/51197/2 "2021-03-19T12:42:28Z")

</div>

Hi @aarush

I’m not sure, but I think you can add images to button using boostrap component, that can be a solution. Perhaps @tcbegley know how to do that. 😀

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [March 19, 2021, 1:11pm UTC](https://community.plotly.com/t/formatting-in-dash/51197/3 "2021-03-19T13:11:20Z")

</div>

Yes, you can do this in Bootstrap, but here is one way to do it without. If you are using Bootstrap, you can use the Bootstrap classes in the ClassName.

Here is an example using either Font Awesome or Unicode symbols:

![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/b/bc8c5347fc5279ab4650a6a0ad8e201a38445331.png)

```auto

import dash
import dash_html_components as html

FONT_AWESOME = "https://use.fontawesome.com/releases/v5.10.2/css/all.css"
external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css", FONT_AWESOME]

app = dash.Dash( __name__ , external_stylesheets=external_stylesheets)

roundbutton = {
    "border": None,
    "border-radius": "50%",
    "padding": 0,
    "backgroundColor": "blue",
    "color": "white",
    "textAlign": "center",
    "display": "block",
    "fontSize": 20,
    "height": 40,
    "width": 40,
    "margin": 20,
}

app.layout = html.Div(
    [
        html.Button(className="far fa-question-circle", style=roundbutton),
        html.Button(className="fa fa-list", style=roundbutton),
        html.Button("✔", style=roundbutton),
        html.Button("☏", style=roundbutton),
    ]
)

if __name__ == " __main__":
    app.run_server(debug=True)

```

---

<div class="post-metadata">

**Author:** ![Eduardo](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/eduardo/32/13310_2.png) [@Eduardo](https://community.plotly.com/u/Eduardo)\
**Post date:** [March 19, 2021, 1:48pm UTC](https://community.plotly.com/t/formatting-in-dash/51197/4 "2021-03-19T13:48:26Z")

</div>

Very nice @AnnMarieW 😃