# Tag Style Tool
**URL:** https://meta.discourse.org/t/tag-style-tool/397885
**Category:** Theme component
**Tags:** tags
**Created:** [March 7, 2026, 7:30pm UTC](https://meta.discourse.org/t/tag-style-tool/397885 "2026-03-07T19:30:43Z")
**Posts on this page:** 19
**Page:** 1
### Author:  [@jdc20181](https://meta.discourse.org/u/jdc20181)
#### Post date: [March 7, 2026, 7:30pm UTC](https://meta.discourse.org/t/tag-style-tool/397885/1 "2026-03-07T19:30:43Z")
| | | |
| --- | --- | --- |
| ℹ | **Summary** | **Tag Style Tool** allows you to customize the appearance of tags. |
| 👓 | **Preview** | To be filled in |
| 🛠 | **Repository** | [TagStyleTool on Github](https://github.com/jdc20181/TagStyleTool) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **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
# About
**TagStyleTool** is an inspired version of (3) existing components to allow customizing the appearance of tags on Discourse!
> **v0.2**
> Added Visual Style Builder - Allows for icon searching, color picking, and category importing!
**Features:**
- Solved compatibility issues (Specifically between the remove dashes, and tag icons)
- Assign a Font Awesome icon to specific tags.
- Added the option to apply a default tag icon to any tag not defined.
- Inverted inheritance e.g. label or text color
- Solves a contrast color issue with text color when using the label coloring setting.
- Allowed the ability to choose between the existing tag styles.
- Versatility of settings allowing disabling of default tag, or dashes feature.
- Settings format is the same (with the addition of new settings) as [Tag Icons](https://meta.discourse.org/t/tag-icons/109757/163) allowing for portability/adoptability easily.
**As of v0.2**
- Implement an option to apply to an entire category. (This has its drawbacks, I think it can be done, but requires extra maintenance)
- Search the FontAwesome Database for the perfect icon!
- Pick your favorite color from a visual color picker.
**More to do:**
- Default Tag Color 😅 a what if scenario if you just want the color and not icon.
- User Friendly fixes for settings
**Other:**
This is the first time I have published something to the public in a while. If you have issues let me know!
Inspiration (and in some cases formatting/settings etc) was directly adopted from these existing projects:
[Remove Dashes from Tag Names](https://meta.discourse.org/t/remove-dashes-from-tag-names/285684)
[Tag Icons](https://meta.discourse.org/t/tag-icons/109757/163)
[Color Tag Style](https://meta.discourse.org/t/colored-tag-styles/214871)
**Helpful Resources**
_These are both integrated into the component now_
[Font Awesome](https://fontawesome.com/v6/search)
[HTML Color Picker](https://www.w3schools.com/colors/colors_picker.asp)
---
### Author:  [@stephtara](https://meta.discourse.org/u/stephtara)
#### Post date: [March 7, 2026, 8:36pm UTC](https://meta.discourse.org/t/tag-style-tool/397885/2 "2026-03-07T20:36:28Z")
I’m going to be trying this! Thanks!! Had looked at a bunch of tag styling components and seemed fiddly to have to install multiple ones, so I’ll take yours for a spin next time I get around to working on my setup!
---
### Author:  [@stephtara](https://meta.discourse.org/u/stephtara)
#### Post date: [March 7, 2026, 8:51pm UTC](https://meta.discourse.org/t/tag-style-tool/397885/3 "2026-03-07T20:51:01Z")
Just tried quickly. Two “newbie” comments:
- I get a bit lost in the FontAwesome stuff. Is it just the free ones? Which version? Is there a list of all the icons somewhere (or it is too long for that)?
- color: how complicated would it be to provide a color picker, for people who aren’t fluent in RGB? 😇
But thanks already, this seems good!
---
### Author:  [@jdc20181](https://meta.discourse.org/u/jdc20181)
#### Post date: [March 7, 2026, 9:05pm UTC](https://meta.discourse.org/t/tag-style-tool/397885/4 "2026-03-07T21:05:36Z")
Don’t worry about getting lost, happy to help any way I am able to, that is what _Discourse_ is for after all right?
**Font Awesome**
The component _should_ automatically support any Font Awesome icon from the current version that is in the current version of Discourse. I believe they currently support v6. Which you can locate all of here [Font Awesome](https://fontawesome.com/v6/search).
For the second part of the question, yes its free, there is a premium verison, but I am not sure how that works with Discourse since Font Awesome is already included with the core.
**Color Picker**
I can take a look and see if I can implement one, but since its a theme component, I am not sure how much I can do before it becomes necessary to be a plugin. You can use this helpful tool though, you click on the “Use HTML 5” area where the color is, and for this component, you want to use the hex color. [HTML Color Picker](https://www.w3schools.com/colors/colors_picker.asp)
---
### Author:  [@stephtara](https://meta.discourse.org/u/stephtara)
#### Post date: [March 7, 2026, 9:15pm UTC](https://meta.discourse.org/t/tag-style-tool/397885/5 "2026-03-07T21:15:29Z")
Thanks! Actually, a link to those two ressources in the settings interface would already be super helpful!
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [March 7, 2026, 10:06pm UTC](https://meta.discourse.org/t/tag-style-tool/397885/6 "2026-03-07T22:06:11Z")
> [@jdc20181](#):
>
> **Color Picker**
>
> I can take a look and see if I can implement one, but since its a theme component, I am not sure how much I can do before it becomes necessary to be a plugin.
There is a native HTML component for picking colors nowadays
> **[HTML attribute value - HTML | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/color)**
>
> elements of type color provide a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in a CSS color value format.
We also wrap it in a component for even easier use.
---
### Author:  [@eisammy](https://meta.discourse.org/u/eisammy)
#### Post date: [March 8, 2026, 12:34am UTC](https://meta.discourse.org/t/tag-style-tool/397885/7 "2026-03-08T00:34:39Z")
Thank you so much!
---
### Author:  [@jdc20181](https://meta.discourse.org/u/jdc20181)
#### Post date: [March 8, 2026, 2:48am UTC](https://meta.discourse.org/t/tag-style-tool/397885/8 "2026-03-08T02:48:39Z")
Well, I made some progress. I still need to do a few things to tidy it up before pushed, such as The insert logic doesn’t work (copy does), and the button is visible on the whole site, and most notably as you can see is on the bottom corner.
I also 👀 figured out how to apply to all tags of a tag group.
---
### Author:  [@jordanjay29](https://meta.discourse.org/u/jordanjay29)
#### Post date: [March 8, 2026, 3:41pm UTC](https://meta.discourse.org/t/tag-style-tool/397885/9 "2026-03-08T15:41:51Z")
That style builder would be a killer feature!
---
### Author:  [@jdc20181](https://meta.discourse.org/u/jdc20181)
#### Post date: [March 9, 2026, 10:03am UTC](https://meta.discourse.org/t/tag-style-tool/397885/10 "2026-03-09T10:03:30Z")
😃 I pushed it out, let me know if you have issues.
---
### Author:  [@jordanjay29](https://meta.discourse.org/u/jordanjay29)
#### Post date: [March 9, 2026, 3:28pm UTC](https://meta.discourse.org/t/tag-style-tool/397885/11 "2026-03-09T15:28:08Z")
The builder is pretty great! I managed to use it for a couple tags to start, and then when I hit the green check to save my settings, the Tag Style Builder disappeared.
If I refresh, the button appears for just a moment before disappearing again.
I’m also not able to get one of the icons (lock-keyhole, for example) to appear on the tag despite being suggested by the builder. I added it to the SVG icons list as well, saved, and still no joy.
This is so close to being a joy to use, thanks for the efforts. I’d love to see this permanently replace several other theme components for me.
---
### Author:  [@jdc20181](https://meta.discourse.org/u/jdc20181)
#### Post date: [March 9, 2026, 4:24pm UTC](https://meta.discourse.org/t/tag-style-tool/397885/12 "2026-03-09T16:24:30Z")
😅 I did this all at 1-2AM, and published at 6am, so forgive me on the few hiccups.
- I can reproduce the button disappearing, darn thing is stubborn. I managed to fix it, I think.
- I suppose I forgot something about the Font Awesome Icons. You need to go to your sites settings, and go to the SVG Subset, and manually add it. If Discourse doesn’t already have it in use, it won’t render by default. Though, even doing this I still had an issue with it not rendering. I will look into this further.
This has been pushed out.
---
### Author:  [@jordanjay29](https://meta.discourse.org/u/jordanjay29)
#### Post date: [March 9, 2026, 5:18pm UTC](https://meta.discourse.org/t/tag-style-tool/397885/13 "2026-03-09T17:18:48Z")
> [@jdc20181](#):
>
> I can reproduce the button disappearing, darn thing is stubborn. I managed to fix it, I think.
I wish it was.
So I had to delete the component and reinstall (both times) to get the builder button to show up to begin with.
With the latest version, I can get the button to persist through the initial setup of my tags. And I can get it to persist through a refresh. But going back into the component edit screen from Themes & Components, the button is missing again. Sneaky bugger.
I’ll play around with the icons part. Since there’s a way to turn off default icons, would there be a way to discard the tag icon for colored tags? Like if it matches the default icon set or something? The colored tags component was nice in not needing to set an icon, I enjoyed the clean look of it, and replicating that would be a useful feature to me.
---
### Author:  [@jdc20181](https://meta.discourse.org/u/jdc20181)
#### Post date: [March 9, 2026, 5:55pm UTC](https://meta.discourse.org/t/tag-style-tool/397885/14 "2026-03-09T17:55:32Z")
😅 It is def a pesky little thing.
I am trying a few things, I sent you my latest beta bundle, feel free to let me know if you have any issues with it, as that is the codebase I am working off.
It should fix some of these things. I added a todo list to fall back on overrides e.g. Tag1,Pencil,NoColor would just render Tag1,Pencil, \.
This is great learning process for me! 😂
---
### Author:  [@stephtara](https://meta.discourse.org/u/stephtara)
#### Post date: [July 2, 2026, 9:29pm UTC](https://meta.discourse.org/t/tag-style-tool/397885/15 "2026-07-02T21:29:01Z")
Hi! I’m back in the game and can’t for the life of me see where the Tag Style Builder is supposed to be?
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [July 3, 2026, 2:15pm UTC](https://meta.discourse.org/t/tag-style-tool/397885/16 "2026-07-03T14:15:48Z")
It’s supposed to appear in the theme components settings, above `Tag icon list`.
It doesn’t work because the TC is looking for admin URL like `/customize/components/`, and discourse is now redirecting to `/customize/themes/`.
For now, until this is fixed, the old path still works and you can replace `themes` by `components` directly in the URL:
From:
To:
Then, the button appears:
---
### Author:  [@jdc20181](https://meta.discourse.org/u/jdc20181)
#### Post date: [July 3, 2026, 2:36pm UTC](https://meta.discourse.org/t/tag-style-tool/397885/17 "2026-07-03T14:36:54Z")
Feel free to submit a PR if you want to, I can get it fixed this weekend otherwise I got quite busy the last month or so. Thanks for letting me know!! This helps me fix it faster if you don’t want to do the PR!
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [July 3, 2026, 3:09pm UTC](https://meta.discourse.org/t/tag-style-tool/397885/18 "2026-07-03T15:09:53Z")
Here’s a quick PR: [Add support for /admin/customize/themes/ route - Pull Request #1 - jdc20181/TagStyleTool - GitHub](https://github.com/jdc20181/TagStyleTool/pull/1)
---
### Author:  [@jdc20181](https://meta.discourse.org/u/jdc20181)
#### Post date: [July 13, 2026, 2:29am UTC](https://meta.discourse.org/t/tag-style-tool/397885/19 "2026-07-13T02:29:47Z")
I merged this so you can update it @stephtara and it will show on the correct page now.