# Custom icons

**URL:** https://community.glideapps.com/t/custom-icons/27797
**Category:** Ask for Help
**Created:** [June 8, 2021, 7:20pm UTC](https://community.glideapps.com/t/custom-icons/27797 "2021-06-08T19:20:24Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)
#### Post date: [June 8, 2021, 7:20pm UTC](https://community.glideapps.com/t/custom-icons/27797/1 "2021-06-08T19:20:24Z")

</div>

Greetings to the community.  
A question for experienced users or framework developers: is there a possibility to insert a custom icon instead of the ones in the tabs?  
Thanks in advance to those who will answer me.

Riccardo

---

<div class="post-metadata">

### Author: ![Roldy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roldy/32/36068_2.png) [@Roldy](https://community.glideapps.com/u/Roldy)
#### Post date: [June 8, 2021, 7:34pm UTC](https://community.glideapps.com/t/custom-icons/27797/2 "2021-06-08T19:34:44Z")

</div>

There is no such possibility currently. I doubt it’s impossible even with CSS as we don’t have “dockable” components to the tab icon, as opposed to what can happen in a detail screen with the rich text component.  
I don’t know if @Lucas_Pires has any magic of his own to do this.

---

<div class="post-metadata">

### Author: ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)
#### Post date: [June 8, 2021, 7:37pm UTC](https://community.glideapps.com/t/custom-icons/27797/3 "2021-06-08T19:37:50Z")

</div>

Let’s hope for magic 😉

---

<div class="post-metadata">

### Author: ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)
#### Post date: [June 8, 2021, 7:41pm UTC](https://community.glideapps.com/t/custom-icons/27797/4 "2021-06-08T19:41:11Z")

</div>

Hey @profxeni, as @Roldy said, the tab needs to be in a Detail style screen. Try this

```auto
<pre><span><style>
  button[aria-label="Tab's name"] svg {
    display: none;
  }
  button[aria-label="Tab's name"] div div[size] {
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(URL);
  }
</style>

```

> 💡 Replace `aria-label` with the **Tab’s name** , and **URL** to the image.

---

<div class="post-metadata">

### Author: ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)
#### Post date: [June 8, 2021, 7:46pm UTC](https://community.glideapps.com/t/custom-icons/27797/5 "2021-06-08T19:46:17Z")

</div>

Sorry, forgot to say this requirement ☝🏼

---

<div class="post-metadata">

### Author: ![ehdubya](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ehdubya/32/24087_2.png) [@ehdubya](https://community.glideapps.com/u/ehdubya)
#### Post date: [June 8, 2021, 8:19pm UTC](https://community.glideapps.com/t/custom-icons/27797/6 "2021-06-08T20:19:54Z")

</div>

This is awesome Lucas! Does the URL need to be inside double-quotes INSIDE the brackets?

Like this:

```auto
<pre><span><style>
  button[aria-label="Tab's name"] svg {
    display: none;
  }
  button[aria-label="Tab's name"] div div[size] {
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("wvw.yourimageurlgoeshere.com");
  }
</style>

```

Thanks!

---

<div class="post-metadata">

### Author: ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)
#### Post date: [June 8, 2021, 8:25pm UTC](https://community.glideapps.com/t/custom-icons/27797/7 "2021-06-08T20:25:01Z")

</div>

I just tested, and actually, there’s no difference 😄

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [June 8, 2021, 11:36pm UTC](https://community.glideapps.com/t/custom-icons/27797/8 "2021-06-08T23:36:14Z")

</div>

Here’s one of my recent apps applying @Lucas_Pires’ technique.

> [@Beautiful Design App](https://community.glideapps.com/t/beautiful-design-app/16191/607):
>
> Releasing this beast thanks to @Lucas_Pires’ code for having custom tab icons. The tab icon here has 4 states: Not chosen (not the notifications tab), no unread notifications: Grey bell Chosen (viewing notifications tab), no unread notifications: Violet bell Not chosen, at least 1 unread: Grey bell with red dot Chosen, at least 1 unread: Violet bell with red dot Pros: Look cool, can use this idea as a base to notify people of something that needs their attention. Cons: Have to p…

---

<div class="post-metadata">

### Author: ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)
#### Post date: [June 9, 2021, 12:41pm UTC](https://community.glideapps.com/t/custom-icons/27797/9 "2021-06-09T12:41:26Z")

</div>

Thank you all for the responses. Great group with really knowledgeable people! I will let you know how it went 😊

---

<div class="post-metadata">

### Author: ![profxeni](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/profxeni/32/24656_2.png) [@profxeni](https://community.glideapps.com/u/profxeni)
#### Post date: [June 10, 2021, 4:42pm UTC](https://community.glideapps.com/t/custom-icons/27797/10 "2021-06-10T16:42:06Z")

</div>

![screenshot-go.glideapps.com-2021.06.10-18-37-07](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/9/d9018445d008c962f7f3f3c2334bc6155ecd3236.png)

Thanks to everyone for the advice, but especially Lucas Pires. The adjustment succeeded perfectly!

---

<div class="post-metadata">

### Author: ![Shiv](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/shiv/32/25831_2.png) [@Shiv](https://community.glideapps.com/u/Shiv)
#### Post date: [June 10, 2021, 5:43pm UTC](https://community.glideapps.com/t/custom-icons/27797/11 "2021-06-10T17:43:13Z")

</div>

@Lucas_Pires Is there a way to dynamically parse the URL ( profile picture ) of the user to the CSS so that the URL is not hardcoded in the richtext ?

-Thanks

Shiv

---

<div class="post-metadata">

### Author: ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [June 10, 2021, 5:47pm UTC](https://community.glideapps.com/t/custom-icons/27797/12 "2021-06-10T17:47:19Z")

</div>

You can place the CSS in a template column with replacement values that are dynamically filled. Then use that template column as the source of the rich text component.

---

<div class="post-metadata">

### Author: ![ehdubya](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ehdubya/32/24087_2.png) [@ehdubya](https://community.glideapps.com/u/ehdubya)
#### Post date: [June 10, 2021, 6:01pm UTC](https://community.glideapps.com/t/custom-icons/27797/13 "2021-06-10T18:01:28Z")

</div>

Literally just blew my mind 🤯…so simple…welp…gonna go clean up some gray matter…and my apps! 🤓 Thanks Jeff!

---

<div class="post-metadata">

### Author: ![Amal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/amal/32/15421_2.png) [@Amal](https://community.glideapps.com/u/Amal)
#### Post date: [June 10, 2021, 8:23pm UTC](https://community.glideapps.com/t/custom-icons/27797/14 "2021-06-10T20:23:27Z")

</div>

Hi Lucas,

Does the image have to be a certain format? my image does not show up

---

<div class="post-metadata">

### Author: ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)
#### Post date: [June 10, 2021, 8:26pm UTC](https://community.glideapps.com/t/custom-icons/27797/15 "2021-06-10T20:26:01Z")

</div>

I guess .jpg or .png could help

---

<div class="post-metadata">

### Author: ![Amal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/amal/32/15421_2.png) [@Amal](https://community.glideapps.com/u/Amal)
#### Post date: [June 10, 2021, 8:27pm UTC](https://community.glideapps.com/t/custom-icons/27797/16 "2021-06-10T20:27:37Z")

</div>

What am i doing wrong ☹

```
button[aria-label="Origami"] svg { display: none; } button[aria-label="Origami"] div div[size] { border-radius: 50%; background-size: cover; background-repeat: no-repeat; background-position: center; background-image: url(https://drive.google.com/file/d/1LLr0x6IR7cG4VFVr34THbe6dY35Mg79A/view?usp=sharing); }

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/6/161a35ae4f381f59e3da235fb3484db9d22bc956.png)
```

---

<div class="post-metadata">

### Author: ![Lucas\_Pires](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/lucas_pires/32/64863_2.png) [@Lucas\_Pires](https://community.glideapps.com/u/Lucas_Pires)
#### Post date: [June 10, 2021, 8:34pm UTC](https://community.glideapps.com/t/custom-icons/27797/17 "2021-06-10T20:34:19Z")

</div>

> [@Amal](#):
>
> `https://drive.google.com/file/d/1LLr0x6IR7cG4VFVr34THbe6dY3`

This url doesnt have any .jpg or .png because it’s a GDrive file…  
Try uploading the image directly in glide and copy and paste the link

---

<div class="post-metadata">

### Author: ![Amal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/amal/32/15421_2.png) [@Amal](https://community.glideapps.com/u/Amal)
#### Post date: [June 10, 2021, 8:38pm UTC](https://community.glideapps.com/t/custom-icons/27797/18 "2021-06-10T20:38:32Z")

</div>

thank you, that worked

---

<div class="post-metadata">

### Author: ![Amal](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/amal/32/15421_2.png) [@Amal](https://community.glideapps.com/u/Amal)
#### Post date: [June 11, 2021, 8:04am UTC](https://community.glideapps.com/t/custom-icons/27797/19 "2021-06-11T08:04:52Z")

</div>

![chrome-capture (1)](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/b/2bff96ae02272b131a071159244611cad3b272b9.gif)

Works great now. Since its only once per detailed screen, is there another way to duplicate it to other? or i have to copy to screen?

---

<div class="post-metadata">

### Author: ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [June 11, 2021, 9:23am UTC](https://community.glideapps.com/t/custom-icons/27797/20 "2021-06-11T09:23:15Z")

</div>

You have to put it on every details screen.

[Next page](https://community.glideapps.com/t/custom-icons/27797.md?page=2)