Category Icons

:discourse2: Summary Category Icons allows category badge links to have icons next to the category name.
:hammer_and_wrench: Repository Link
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Here is an example of how this would look, with category style set to none:

Here is how this would look with category 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.

January 2020 update: thanks to @rogerco, you can now use the “partial” keyword to partially match category slugs (i.e. entering “book,icon,red,partial” would match all category slugs containing “book”).


  • 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, the UI would be unnecessarily busy.

See also the Tag Icons component, which does the same thing for tags.


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”.



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”.



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.


It’s been perfectly resolved. Thanks for the update :+1:


This is an awesome component! Works great on my site! ty for doing this :smiley:!awe


Can I use this icon as “js”?


Only bash has the icon, the others has an emty space.


What do I miss?

Have a look here to learn how to use new font awesome icons


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?

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.


Can this component be extended to support custom made svg icons?

1 Like

Custom SVG icons are already supported in plugins, see Introducing Font Awesome 5 and SVG icons for details. Custom SVG icon support in themes is in the works.


Thank you for quick response. I will look into it.

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 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 it looks the worst - gray on gray.

Elsewhere, white color is respected:

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?

In the URL you posted, 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.


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.


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?

1 Like

It’s slightly different, you need to upload an svg sprite. See this:


I have pushed a fix for the style issue in core:

Once this passes tests, you need to rebuild your app, icon colors should then respect the badge color.


Do you have any plans to extend this to the sub-category boxes Penar? Would be awesome to have them everywhere. My site looks great with all these icons now, appreciate this!