# Category Icons
**URL:** https://meta.discourse.org/t/category-icons/104683
**Category:** Theme component
**Tags:** official, deprecated, category-icons
**Created:** [December 19, 2018, 4:22pm UTC](https://meta.discourse.org/t/category-icons/104683 "2018-12-19T16:22:44Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [December 19, 2018, 4:22pm UTC](https://meta.discourse.org/t/category-icons/104683/1 "2018-12-19T16:22:44Z")
> ⚠
> This theme component is deprecated and should no longer be used. Its features are now in Discourse Core (see: [Bringing popular features to Discourse](https://meta.discourse.org/t/bringing-popular-features-to-discourse-header-search-welcome-banner-and-category-icons-emoji/359169)).
> For private category icon customization, refer to [this topic](https://meta.discourse.org/t/new-aliases-for-replacing-lock-icons-on-closed-topics-and-restricted-categories/373778).
| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Category Icons** allows category badge links to have icons next to the category name. |
| 👓 | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/category-icons) |
| 🛠 | **Repository Link** | [https://github.com/discourse/discourse-category-icons](https://github.com/discourse/discourse-category-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=category-icons "Ask for support on configuring and using Category Icons") [🐛 **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=category-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=category-icons "Discussion about the user interface of Category Icons, and how features are presented (including language and UI elements)") [💡 **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=category-icons "Discussion about how existing Category Icons features can be improved or enhanced, and how proposed new features could work")
### Features
> ℹ This theme component is used alongside the [Category Badge Styles](https://meta.discourse.org/t/category-badge-styles/285320) theme component
Here is an example of how this would look, with `category badge style` set to `none`:
Here is how this would look with `category badge style` set to `box`:
Configuration is pretty straightforward:
Note that this component also lets you override the `category lock icon` used to denote private categories.
> ℹ See also the [Tag Icons](https://meta.discourse.org/t/tag-icons-component/109757) component (which does the same thing for tags).
### Settings
| Name | Description |
| --- | --- |
| category icon list | The list of categories and their respective icons |
| svg icons | Add extra icons not included by default |
| category lock icon | The icon to replace the ‘category lock icon’ |
- To add an icon to a category, enter the details separated by commas like so “slug,icon,color,match”
- Colour is in the format #123456, or “categoryColor” to use the default color for the category (same as the Badge color)
- If match is “partial” then the slug need only partially match the category-slug, otherwise an exact match is required.
### Issues
- Does not correctly respect the icon color when using with the `bullet` category style. In general, though, this shouldn’t be used with the bullet or bar category styles as the UI would be unnecessarily busy.
### Development history
Thanks to @rogerco, for adding the “partial” keyword to partially match category slugs (i.e. entering “book,icon,red,partial” would match all category slugs containing “book”). 🏆 👏
> :discourse2: **Hosted by us?** Theme components are available to use on our Standard, Business, and Enterprise plans.
> Last edited by @dax 2025-07-14T17:39:05Z
>
> > **Check document**
> >
> > Perform check on document:
---
### Author:  [@kontratak](https://meta.discourse.org/u/kontratak)
#### Post date: [January 17, 2019, 12:35am UTC](https://meta.discourse.org/t/category-icons/104683/3 "2019-01-17T00:35:32Z")
This component has had an impact on our forum in an artistic way. I like it.
However there is a problem with category names. I created a category with the name of “Doğa Bilimleri”, but later changed its name to “Bilim” and created a sub-category with the name of “Doğa Bilimleri”.
Before:
After:
I only assigned an icon for the category of “Doğa Bilimleri”, not for “Bilim”.
But the flask icon has been assigned for both “Bilim” and its sub-category “Doğa Bilimleri”.
I cannot also assign an icon to a category whose name I change if I use the new name of it, yet the old name always works. (I solved this one: This is all about “category slug”. If you leave the category slug with the old name, you will experience same pseudo-problem.)
**Edit:** I figured out why the flask icon is assigned for the main category. It is because both the main category and the sub-category include same word “Bilim”. Even if I give a random name like “abcdefbilimghjk” in the category icon list, it will still assign the icon I choose to the category “Bilim”, since the random name includes the word “bilim”.
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [January 17, 2019, 4:01pm UTC](https://meta.discourse.org/t/category-icons/104683/4 "2019-01-17T16:01:11Z")
Hi Emre, thanks for the report, I’ve now fixed the issue with loose matching of slugs. If you update the theme, it should be resolved, “abcdefbilimghjk” will no longer apply the icon to the “bilim” slug.
---
### Author:  [@kontratak](https://meta.discourse.org/u/kontratak)
#### Post date: [January 17, 2019, 4:19pm UTC](https://meta.discourse.org/t/category-icons/104683/5 "2019-01-17T16:19:19Z")
It’s been perfectly resolved. Thanks for the update 👍
---
### Author:  [@ScammerRevolts](https://meta.discourse.org/u/ScammerRevolts)
#### Post date: [February 5, 2019, 8:13pm UTC](https://meta.discourse.org/t/category-icons/104683/6 "2019-02-05T20:13:18Z")
This is an awesome component! Works great on my site! ty for doing this 😃! 
---
### Author:  [@pihentagy](https://meta.discourse.org/u/pihentagy)
#### Post date: [March 13, 2019, 3:13pm UTC](https://meta.discourse.org/t/category-icons/104683/7 "2019-03-13T15:13:09Z")
Can I use [this icon](https://fontawesome.com/icons/js?style=brands) as “js”?
Only bash has the icon, the others has an emty space.
What do I miss?
---
### Author:  [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [March 13, 2019, 3:16pm UTC](https://meta.discourse.org/t/category-icons/104683/8 "2019-03-13T15:16:36Z")
Have a look here to learn how to use new font awesome icons
> [@Introducing Font Awesome 5 and SVG icons](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643):
>
> See also: [We're upgrading our icons to Font Awesome 6!](https://meta.discourse.org/t/were-upgrading-our-icons-to-font-awesome-6/325349) We will shortly merge into master a [branch](https://github.com/discourse/discourse/tree/fontawesome5) that upgrades Discourse to Font Awesome 5.5.0 (the free version) and switches to using SVG icons instead of an icon font. This is a substantial change, with lots of benefits, and one significant change for developers. Here is a quick rundown of the changes: using SVG icons will provide crisper icons, better for accessibility and easier to customize, see [this Github article](https://blog.github.com/2016-02-22-delivering-octicons-with-svg/) for more details since…
---
### Author:  [@pihentagy](https://meta.discourse.org/u/pihentagy)
#### Post date: [March 13, 2019, 3:47pm UTC](https://meta.discourse.org/t/category-icons/104683/9 "2019-03-13T15:47:30Z")
Thanks, but how that breaks down to using this component as a plugin user?
Should I wait for something to merge to master before I can use the plugin?
Or did I misunderstand the method to define how can I specify my font awesome icons?
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [March 13, 2019, 4:28pm UTC](https://meta.discourse.org/t/category-icons/104683/10 "2019-03-13T16:28:21Z")
Use `fab-js` instead of `js` in both fields since it’s a brand icon and FA groups brand icons separately.
Same for the Java icon, though you should be on `tests-passed` for that to work, because the Java icon was added to FontAwesome recently.
---
### Author:  [@cursed\_mask](https://meta.discourse.org/u/cursed_mask)
#### Post date: [March 13, 2019, 6:11pm UTC](https://meta.discourse.org/t/category-icons/104683/11 "2019-03-13T18:11:42Z")
Can this component be extended to support custom made svg icons?
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [March 13, 2019, 6:13pm UTC](https://meta.discourse.org/t/category-icons/104683/12 "2019-03-13T18:13:56Z")
Custom SVG icons are already supported in plugins, see [Introducing Font Awesome 5 and SVG icons](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643) for details. Custom SVG icon support in themes is [in the works](https://github.com/discourse/discourse/pull/7155).
---
### Author:  [@cursed\_mask](https://meta.discourse.org/u/cursed_mask)
#### Post date: [March 13, 2019, 6:15pm UTC](https://meta.discourse.org/t/category-icons/104683/13 "2019-03-13T18:15:54Z")
Thank you for quick response. I will look into it.
---
### Author:  [@Lure](https://meta.discourse.org/u/Lure)
#### Post date: [March 24, 2019, 1:43pm UTC](https://meta.discourse.org/t/category-icons/104683/14 "2019-03-24T13:43:13Z")
First, a big thank you to @pmusaraj for making this great theme-component.
I have configured it on my site, but have two issues:
**There seems to be no way I can “attach” any icon to [Jadran](https://pojalabanda.com/c/potovanja/jadran) category**
I have tried with various icons, even the ones that are working on other categories with no success.
Configuration is the same as for other categories:
**It seems that pull-downs in category view, does not respect the icon color (white).**
[Here](https://pojalabanda.com/c/razno/oglasi) it looks the worst - gray on gray.
Elsewhere, white color is respected:
---
### Author:  [@Lure](https://meta.discourse.org/u/Lure)
#### Post date: [March 24, 2019, 1:56pm UTC](https://meta.discourse.org/t/category-icons/104683/15 "2019-03-24T13:56:42Z")
I have an idea, why “Jadran” does not work: I have another category “Jadranje”, which includes first name. I would expect that slug would be checked with exact match (everything between /), right?
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [March 24, 2019, 2:29pm UTC](https://meta.discourse.org/t/category-icons/104683/16 "2019-03-24T14:29:21Z")
In the URL you posted `https://pojalabanda.com/c/potovanja/jadran`, I see the icon next to Jadran.
I do see the style issue, it’s something that’s been recently introduced, I’ll look for a solution.
---
### Author:  [@Lure](https://meta.discourse.org/u/Lure)
#### Post date: [March 24, 2019, 2:34pm UTC](https://meta.discourse.org/t/category-icons/104683/17 "2019-03-24T14:34:05Z")
> [@pmusaraj](#):
>
> In the URL you posted `https://pojalabanda.com/c/potovanja/jadran` , I see the icon next to Jadran.
Yes, I got idea for workaround: have replaced the order of “rules” in the config, so that longer name is after shorter:
It works now!
Thanks for checking the problem and for confirming style issue.
---
### Author:  [@Lure](https://meta.discourse.org/u/Lure)
#### Post date: [March 24, 2019, 6:14pm UTC](https://meta.discourse.org/t/category-icons/104683/18 "2019-03-24T18:14:23Z")
Is there a possibility to upload own svg icon and then use it as category icon? I tried to upload it on Category icons upload, but not sure how should I reference it?
Or am I completely on wrong track here?
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [March 24, 2019, 6:35pm UTC](https://meta.discourse.org/t/category-icons/104683/19 "2019-03-24T18:35:56Z")
It’s slightly different, you need to upload an svg sprite. See this:
> [@Introducing Font Awesome 5 and SVG icons](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643/1):
>
> **Adding custom icons**
>
> If you would like to have more icons than what’s available in FontAwesome, you can add your own SVG icons in a plugin or a theme.
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [March 25, 2019, 1:31pm UTC](https://meta.discourse.org/t/category-icons/104683/20 "2019-03-25T13:31:35Z")
I have pushed a fix for the style issue in core: [UX: Inherit badge icon color · discourse/discourse@8d098df · GitHub](https://github.com/discourse/discourse/commit/8d098df289cc75270ae6ff08be55bb033f44b3e5)
Once this passes tests, you need to rebuild your app, icon colors should then respect the badge color.
---
### Author:  [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [March 30, 2019, 8:16pm UTC](https://meta.discourse.org/t/category-icons/104683/21 "2019-03-30T20:16:45Z")
Do you have any plans to extend this to the sub-category boxes Penar? Would be awesome to have them everywhere. [My site](https://community.naturephotographers.network/) looks great with all these icons now, appreciate this!
[Next page](https://meta.discourse.org/t/category-icons/104683.md?page=2)