# Tag Icons
**URL:** https://meta.discourse.org/t/tag-icons/109757
**Category:** Theme component
**Tags:** official, tag-icons
**Created:** [February 21, 2019, 1:56pm UTC](https://meta.discourse.org/t/tag-icons/109757 "2019-02-21T13:56:48Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [February 21, 2019, 1:56pm UTC](https://meta.discourse.org/t/tag-icons/109757/1 "2019-02-21T13:56:48Z")
| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Tag Icons** allows tags to have an icon next to the tag label. |
| š | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/tag-icons) |
| š | **Repository Link** | [https://github.com/discourse/discourse-tag-icons](https://github.com/discourse/discourse-tag-icons) |
| š | **New to Discourse Themes?** | [Beginnerās guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
> [@](#):
>
> :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started. š
>
> [ā **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=tag-icons "Ask for support on configuring and using Tag Icons") [š **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=tag-icons "A bug report means something is broken, preventing normal/typical use of the theme component") [š **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=tag-icons "Discussion about the user interface of Tag Icons, and how features are presented (including language and UI elements)") [š” **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=tag-icons "Discussion about how existing Tag Icons features can be improved or enhanced, and how proposed new features could work")
### Features
Here is an example of how this would look, with tag style set to the default (simple):
Here is how this looks with tag style set to `box`:
### Settings
| Name | Description |
| --- | --- |
| tag icon list | Enter comma-delimited configuration for tags, in the format ātag-slug,icon,iconColorā. Icon color is optional. |
| svg icons | List of [FontAwesome 6](https://fontawesome.com/search?o=r&m=free&new=yes) icons used in this theme component |
> :discourse2: **Hosted by us?** Theme components are available to use on our Standard, Business, and Enterprise plans.
> Last edited by @tobiaseigen 2025-08-27T06:57:11Z
>
> > **Check document**
> >
> > Perform check on document:
---
### Author:  [@TheBestPessimist](https://meta.discourse.org/u/TheBestPessimist)
#### Post date: [February 21, 2019, 1:58pm UTC](https://meta.discourse.org/t/tag-icons/109757/3 "2019-02-21T13:58:59Z")
Does this also work with custom svg?
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [February 21, 2019, 2:04pm UTC](https://meta.discourse.org/t/tag-icons/109757/4 "2019-02-21T14:04:11Z")
Yes, but you would need to register the custom SVG in a plugin (themes should soon also be able to add custom icons to the SVG sprite set). See [Introducing Font Awesome 5 and SVG icons - #61 by pmusaraj](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/61) for details.
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [March 19, 2019, 12:46am UTC](https://meta.discourse.org/t/tag-icons/109757/14 "2019-03-19T00:46:50Z")
Now that custom icons in themes has been merged is it possible to use FA Pro icons with this or does the component need to be updated?
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [March 19, 2019, 12:47am UTC](https://meta.discourse.org/t/tag-icons/109757/15 "2019-03-19T00:47:48Z")
Component doesnāt need to be updated, if you add custom icons via theme/plugin they will be available to the component.
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [March 31, 2019, 11:30pm UTC](https://meta.discourse.org/t/tag-icons/109757/21 "2019-03-31T23:30:40Z")
Could the icon be added to the dropdown menu as well?
---
### Author:  [@AntiMetaman](https://meta.discourse.org/u/AntiMetaman)
#### Post date: [July 21, 2020, 3:57pm UTC](https://meta.discourse.org/t/tag-icons/109757/47 "2020-07-21T15:57:17Z")
This allows one to add custom icons to tag, but what if I wanted to change the color of the box of the tag?
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [July 21, 2020, 4:06pm UTC](https://meta.discourse.org/t/tag-icons/109757/48 "2020-07-21T16:06:30Z")
You can do that with CSS, for example, the code below will set the ātheme-componentā text color to red:
```plaintext
.extra-info-wrapper .discourse-tag[data-tag-name="theme-component"] {
color: red !important;
}
```
(This is just for illustrative purposes only, youāll need to figure out your own CSS.)
---
### Author:  [@AntiMetaman](https://meta.discourse.org/u/AntiMetaman)
#### Post date: [July 21, 2020, 4:11pm UTC](https://meta.discourse.org/t/tag-icons/109757/49 "2020-07-21T16:11:13Z")
I see thanks. I just have to list every tag I have in the CSS by name and specify the color. Would be nice though if I could do this from the admin panel like with the theme components using a comma separated list and providing the hex code just like for the icons.
Is there a way I can set a color for all tags in a tag group via CSS?
---
### Author:  [@HeyRR](https://meta.discourse.org/u/HeyRR)
#### Post date: [August 29, 2020, 6:39pm UTC](https://meta.discourse.org/t/tag-icons/109757/50 "2020-08-29T18:39:53Z")
I ended up getting something like this:  (The default tag icon is still here)
Does anyone see this kind of result?
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [August 31, 2020, 12:15pm UTC](https://meta.discourse.org/t/tag-icons/109757/51 "2020-08-31T12:15:24Z")
Look for ātag styleā in your site settings, and change it to simple, that will remove the grey bullets.
---
### Author:  [@HeyRR](https://meta.discourse.org/u/HeyRR)
#### Post date: [August 31, 2020, 5:32pm UTC](https://meta.discourse.org/t/tag-icons/109757/52 "2020-08-31T17:32:54Z")
I see, thanks, but I will need the default grey bullets for all other tags. I achieved this by remove that bullets for specific tag:
```css
a[data-tag-name="test1"]::before {
display:none!important;
}
```
---
### Author:  [@sebastianh](https://meta.discourse.org/u/sebastianh)
#### Post date: [October 29, 2020, 5:51pm UTC](https://meta.discourse.org/t/tag-icons/109757/53 "2020-10-29T17:51:53Z")
Looks like a fantastic tweak. Question for advice to the author: I am thinking of pimping my bland tags, some of which I use to tag posts by language (so I have tags ācastellanoā, ādeutschā etc.), with little country flags. Would uploading a custom .svg as described above be the way or are there preconfigured iconsets or maybe discourse-built-in emoji-sets that could be used?
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [October 29, 2020, 6:08pm UTC](https://meta.discourse.org/t/tag-icons/109757/54 "2020-10-29T18:08:33Z")
An emoji would make sense for country flags, but this component does not use emojis, it uses icons from an icon set like Font Awesome.
You can try adding the emoji directly in the tag label. I tried this locally, and the tricky thing is that tags canāt have spaces. An example:
If you are ok with the dash, thatās the way to go.
---
### Author:  [@sebastianh](https://meta.discourse.org/u/sebastianh)
#### Post date: [October 29, 2020, 6:20pm UTC](https://meta.discourse.org/t/tag-icons/109757/55 "2020-10-29T18:20:25Z")
Oh wow that is actually rather neat. Minus the dash š but I could probably live with it. Might even be worth trying a tag that is just a flag emojiā¦
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [October 29, 2020, 6:22pm UTC](https://meta.discourse.org/t/tag-icons/109757/56 "2020-10-29T18:22:00Z")
Yes, just an emoji is coolā¦ but you wonāt be able to easily find that from a search in the tag dropdown (when posting).
---
### Author:  [@sebastianh](https://meta.discourse.org/u/sebastianh)
#### Post date: [October 29, 2020, 6:27pm UTC](https://meta.discourse.org/t/tag-icons/109757/57 "2020-10-29T18:27:47Z")
Ok just one more semi-stupid question: how do I get the emoji to work as you did above with the francais? I tried creating a tag "`:sweden:-svenska"` but it doesnāt translate to the swedish flag
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [October 29, 2020, 6:29pm UTC](https://meta.discourse.org/t/tag-icons/109757/58 "2020-10-29T18:29:20Z")
You need to use an emoji symbol (on mobile, for example, you would switch to the emoji keyboard).
---
### Author:  [@sebastianh](https://meta.discourse.org/u/sebastianh)
#### Post date: [October 29, 2020, 6:32pm UTC](https://meta.discourse.org/t/tag-icons/109757/59 "2020-10-29T18:32:17Z")
Ohhhh I thought the emojis in Discourse. Okay, need to switch to a mobile then. I thought I could somehow use these. It worked thanks!
---
### Author:  [@renato](https://meta.discourse.org/u/renato)
#### Post date: [November 29, 2020, 12:28am UTC](https://meta.discourse.org/t/tag-icons/109757/60 "2020-11-29T00:28:17Z")
> [@Tag Icons working with tag groups](https://meta.discourse.org/t/tag-icons-working-with-tag-groups/272374/6):
>
> The tag groups feature is a nice-to-have for sure, it is a bit tricky and currently I donāt have the time to work on it.
If I understood it right there isnāt an easy way of discovering the group a tag belongs to within the tag renderer?
> [@davidkingham](#):
>
> Could the icon be added to the dropdown menu as well?
This one would be great. I was using a custom CSS approach before and ditched it for this theme component with a [fallback icon](https://github.com/renato/discourse-tag-icons/commit/b1b00720686a535235fdb2c1d0283fa082f6b4f6) for all non-set tags (at least before the support for tag groups) and this is the one thing I miss.
Considering `discourse-category-icons` supports this, Iām guessing the renderer that `replaceCategoryLinkRenderer` replaces is used by the category dropdown while the renderer `replaceTagRenderer` replaces is NOT used by the tag dropdown, right? So maybe this would need a core change? The tag dropdown on the composer is using the replaced renderer, with icons.
[Next page](https://meta.discourse.org/t/tag-icons/109757.md?page=2)