# dcc.Tab: How to insert a svg icon or img inside a dcc.Tab? CSS?

**URL:** <https://community.plotly.com/t/dcc-tab-how-to-insert-a-svg-icon-or-img-inside-a-dcc-tab-css/27514>\
**Category:** Dash Python\
**Created:** [August 20, 2019, 9:31pm UTC](https://community.plotly.com/t/dcc-tab-how-to-insert-a-svg-icon-or-img-inside-a-dcc-tab-css/27514 "2019-08-20T21:31:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![David22](https://avatars.discourse-cdn.com/v4/letter/d/439d5e/32.png) [@David22](https://community.plotly.com/u/David22)\
**Post date:** [August 20, 2019, 9:31pm UTC](https://community.plotly.com/t/dcc-tab-how-to-insert-a-svg-icon-or-img-inside-a-dcc-tab-css/27514/1 "2019-08-20T21:31:15Z")

</div>

Hello,  
Question is in the title, I’ve 15 tabs representing countries and I would like to add the flag of each country inside the tab label.

Is there any easy way to do it or do i have to define some CSS class and some workaround?

---

<div class="post-metadata">

**Author:** ![David22](https://avatars.discourse-cdn.com/v4/letter/d/439d5e/32.png) [@David22](https://community.plotly.com/u/David22)\
**Post date:** [August 23, 2019, 10:28pm UTC](https://community.plotly.com/t/dcc-tab-how-to-insert-a-svg-icon-or-img-inside-a-dcc-tab-css/27514/2 "2019-08-23T22:28:11Z")

</div>

CSS is the way to go. Adding a class for each tab, it’s possible to add one (or more) background image(s) (.png, .svg,…), with the right size, at the right position.

---

<div class="post-metadata">

**Author:** ![harshgawai](https://avatars.discourse-cdn.com/v4/letter/h/7993a0/32.png) [@harshgawai](https://community.plotly.com/u/harshgawai)\
**Post date:** [June 14, 2021, 4:18pm UTC](https://community.plotly.com/t/dcc-tab-how-to-insert-a-svg-icon-or-img-inside-a-dcc-tab-css/27514/3 "2021-06-14T16:18:21Z")

</div>

@David22 Hey David, Can you explain how to do it using an example?

---

<div class="post-metadata">

**Author:** ![dilfin07](https://avatars.discourse-cdn.com/v4/letter/d/cab0a1/32.png) [@dilfin07](https://community.plotly.com/u/dilfin07)\
**Post date:** [June 17, 2021, 12:31pm UTC](https://community.plotly.com/t/dcc-tab-how-to-insert-a-svg-icon-or-img-inside-a-dcc-tab-css/27514/4 "2021-06-17T12:31:24Z")

</div>

Hello,  
Let me show you an example:

```auto
 dcc.Tabs(

        id="tabs_with_hlr",
        value='ss7_routing',
        parent_className='custom-tabs',
        className='custom-tabs-container',
        children=[
            dcc.Tab(
                label='Feed',
                value='Feed',
                className='custom-tab',
                selected_className='custom-tab--selected'
            ),
            dcc.Tab(
                label='Feed',
                value='Feed',
                className='custom-tab',
                selected_className='custom-tab--selected'
            ),
        ]),

```

```auto
.custom-tabs-container {
    width: 85%;
}
.custom-tabs {
    border-top-left-radius: 3px;
    /*background-color: #f9f9f9;*/
    padding: 0px 24px;
    border-bottom: 1px solid #d6d6d6;
}

.custom-tab {
    background: url("/dash/assets/icons/feed1.svg") no-repeat;
    background-position: 10%;
    color:#586069;
    width: 100px !important;
    height: 25px !important;
    font-size: 12px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top: 3px solid transparent !important;
    border-left: 0px !important;
    border-right: 0px !important;
    border-bottom: 0px !important;
    background-color: #fafbfc;
    padding: 12px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.custom-tab--selected {
    background: url("/dash/assets/icons/feed1.svg") no-repeat;
    background-position: 10%;
    color: black;
    box-shadow: 1px 1px 0px white;
    border-left: 1px solid lightgrey !important;
    border-right: 1px solid lightgrey !important;
    border-top: 1px solid lightgrey !important;
}

```

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

---

<div class="post-metadata">

**Author:** ![harshgawai](https://avatars.discourse-cdn.com/v4/letter/h/7993a0/32.png) [@harshgawai](https://community.plotly.com/u/harshgawai)\
**Post date:** [June 20, 2021, 4:09pm UTC](https://community.plotly.com/t/dcc-tab-how-to-insert-a-svg-icon-or-img-inside-a-dcc-tab-css/27514/5 "2021-06-20T16:09:25Z")

</div>

Thank you so much @dilfin07