# 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:** 18
**Page:** 9

<div class="post-metadata">

### Author: ![volanar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/volanar/32/318163_2.png) [@volanar](https://meta.discourse.org/u/volanar)
#### Post date: [January 27, 2023, 6:08am UTC](https://meta.discourse.org/t/category-icons/104683/191 "2023-01-27T06:08:33Z")

</div>

Hi! Is there any update news? It’s very interesting what happened

---

<div class="post-metadata">

### Author: ![mattdm](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mattdm/32/216484_2.png) [@mattdm](https://meta.discourse.org/u/mattdm)
#### Post date: [August 2, 2023, 10:41pm UTC](https://meta.discourse.org/t/category-icons/104683/208 "2023-08-02T22:41:48Z")

</div>

> [@carson](#):
>
> This update has not yet been merged, it only exists as a separate branch in the repository at the moment. I will submit a PR soon by next week to merge it without breaking any existing configurations. Thank you for your kind feedback! 😃

What is the state of this? I’d love to move beyond fontawesome.

---

<div class="post-metadata">

### Author: ![carson](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/carson/32/280685_2.png) [@carson](https://meta.discourse.org/u/carson)
#### Post date: [August 2, 2023, 10:44pm UTC](https://meta.discourse.org/t/category-icons/104683/209 "2023-08-02T22:44:05Z")

</div>

It hasn’t been merged, but you’re free to install the repository and use my branch in the meanwhile. 😶

---

<div class="post-metadata">

### Author: ![mattdm](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mattdm/32/216484_2.png) [@mattdm](https://meta.discourse.org/u/mattdm)
#### Post date: [August 2, 2023, 10:55pm UTC](https://meta.discourse.org/t/category-icons/104683/210 "2023-08-02T22:55:09Z")

</div>

Thanks! I’ll wait until the new menu work for our site is done, and then try it in staging. 🙂

---

<div class="post-metadata">

### Author: ![volanar](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/volanar/32/318163_2.png) [@volanar](https://meta.discourse.org/u/volanar)
#### Post date: [November 5, 2023, 6:40am UTC](https://meta.discourse.org/t/category-icons/104683/220 "2023-11-05T06:40:52Z")

</div>

Does anyone know when this will happen so as not to use this component in a new project?

 ![image](https://global.discourse-cdn.com/meta/original/4X/4/e/d/4ed7b09fc71f4b923428a19afdab81dddb3dbf03.png)  
[https://github.com/discourse/discourse-category-icons/pull/21](https://github.com/discourse/discourse-category-icons/pull/21)

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [November 5, 2023, 7:14am UTC](https://meta.discourse.org/t/category-icons/104683/221 "2023-11-05T07:14:12Z")

</div>

I would just use the component. In [Moving to a Single Category Style Site Setting](https://meta.discourse.org/t/moving-to-a-single-category-style-site-setting/282441) there were questions about category icons and this does not sound like they will become part of core untill the release of Discourse 3.2.

> [@Moving to a Single Category Style Site Setting](https://meta.discourse.org/t/moving-to-a-single-category-style-site-setting/282441/12):
>
> The category icons component will need to be refactored, we can work on that before this update happens.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [November 13, 2023, 4:07pm UTC](https://meta.discourse.org/t/category-icons/104683/222 "2023-11-13T16:07:57Z")

</div>

Yes, to confirm I’ve just merged an update to this component to make it compatible with [Moving to a Single Category Style Site Setting](https://meta.discourse.org/t/moving-to-a-single-category-style-site-setting/282441/)

The update will be available for sites on version Discourse 3.2.0.beta4-dev or later, thanks to [Pinning plugin and theme versions for older Discourse installs (d-compat branches)](https://meta.discourse.org/t/pinning-plugin-and-theme-versions-for-older-discourse-installs-discourse-compatibility/272665)

Since this is pinned to a version rather than a specific commit… if you’re already on Discourse 3.2.0.beta4-dev and are experiencing issues with this component, you may need to update Discourse again today.

---

<div class="post-metadata">

### Author: ![mattdm](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mattdm/32/216484_2.png) [@mattdm](https://meta.discourse.org/u/mattdm)
#### Post date: [November 20, 2023, 6:42pm UTC](https://meta.discourse.org/t/category-icons/104683/223 "2023-11-20T18:42:56Z")

</div>

I never did get a chance to try your branch, but hope to come back to this. Any more news on whether this will become official?

---

<div class="post-metadata">

### Author: ![mattdm](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mattdm/32/216484_2.png) [@mattdm](https://meta.discourse.org/u/mattdm)
#### Post date: [November 27, 2023, 4:32pm UTC](https://meta.discourse.org/t/category-icons/104683/224 "2023-11-27T16:32:59Z")

</div>

@carson Got a chance to play with this a bit. Looks basically good, except:

1. Icons in category-select drop-down are not in color
2. Doesn’t work in the new menu
3. If you enable “Use the category’s uploaded logo as its icon”:  
a. it only affects the category-select drop-down  
b. not shown next to the category in any other places  
c. and also if this is on, the category-select drop-drop down _only_ shows these icons (even if other categories have different icons configured).
4. Icons seem larger than they were in the previous theme. Making them the same size would be least disruptive — but maybe it would be nice to have a setting for the size?

Also, some nice-to-haves:

- An option to hide the category lock icon, not just set it to some other thing\[1\]
- If category logo is used, give an option to hide the big category logo on the categories page. They’re redundant.
- Move emoji and fontawesome config to the category page, next to the category logo configuration

* * *

1. I find it adds a lot of visual noise and not a lot of value because it doesn’t tell you _how_ the category is restricted!

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [December 6, 2023, 11:28am UTC](https://meta.discourse.org/t/category-icons/104683/225 "2023-12-06T11:28:38Z")

</div>

A post was merged into an existing topic: [Install theme button not working on Meta](https://meta.discourse.org/t/install-theme-button-not-working-on-meta/287711/3)

---

<div class="post-metadata">

### Author: ![zhang\_zhiyuan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zhang_zhiyuan/32/430883_2.png) [@zhang\_zhiyuan](https://meta.discourse.org/u/zhang_zhiyuan)
#### Post date: [September 20, 2024, 9:54am UTC](https://meta.discourse.org/t/category-icons/104683/226 "2024-09-20T09:54:17Z")

</div>

Hey Coin,

We think we meet the same problem as ultrakiller.

Here is the file we add to upload  
 ![category](https://global.discourse-cdn.com/meta/original/4X/1/d/7/1d719053d9d46edaafc03b0a382d4a46c3ef4956.svg)

When we use the codes to instead the star icon to this category icon, it does not work

```plaintext
<script type="text/discourse-plugin" version="0.8">
    api.replaceIcon('d-liked', 'beer');
    api.replaceIcon('d-unliked', 'fa-beer');
    api.replaceIcon('star', 'category');
</script>

```

We really confused which step we are missing. Can you please figure it out? Thank you so much!

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [September 21, 2024, 1:44pm UTC](https://meta.discourse.org/t/category-icons/104683/227 "2024-09-21T13:44:54Z")

</div>

Hey, you must follow this guide to create an SVG file with the proper format:

> [@Replace Discourse's default SVG icons with custom icons in a theme](https://meta.discourse.org/t/replace-discourses-default-svg-icons-with-custom-icons-in-a-theme/115736):
>
> You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them [within a theme or theme component.](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966#create-new-themes-and-theme-components-7)Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the \<svg\> tag contents from the original SVG icon file into \<symbol\> …

In your case, that would be something like:

```svg
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="my-icon-id" viewBox="0 0 1024 1024" fill="none">
        <path fill="currentColor" d="M768.487 554.422H553.554v214.926c0 106.838 86.61 193.437 193.442 193.437h21.491c106.832 0 193.432-86.603 193.432-193.437v-21.492c.002-106.83-86.606-193.434-193.432-193.434m-515.842 0c-106.83 0-193.435 86.61-193.435 193.434v21.492c0 106.838 86.606 193.437 193.435 193.437h21.494c106.83 0 193.432-86.603 193.432-193.437V554.422zm21.498-494.346H252.65c-106.835 0-193.44 86.606-193.44 193.442v21.492c0 106.825 86.607 193.431 193.44 193.431h214.926V253.518c.002-106.836-86.604-193.442-193.432-193.442m494.344 0h-21.491c-106.836 0-193.442 86.606-193.442 193.442V468.44h214.933c106.832 0 193.432-86.606 193.432-193.431v-21.492c.002-106.836-86.606-193.442-193.432-193.442m0 0"/>
    </symbol>
</svg> 

```

Make sure:

- You insert `fill="currentColor"`
- Upload the SVG with a SCSS var name `icons-sprite`.

Result:  
 ![image](https://global.discourse-cdn.com/meta/original/4X/7/8/d/78df1132a74a58e648e5040b1e35ff578e92a968.png)

---

<div class="post-metadata">

### Author: ![zhang\_zhiyuan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zhang_zhiyuan/32/430883_2.png) [@zhang\_zhiyuan](https://meta.discourse.org/u/zhang_zhiyuan)
#### Post date: [September 23, 2024, 3:23am UTC](https://meta.discourse.org/t/category-icons/104683/228 "2024-09-23T03:23:41Z")

</div>

Thank you Arkshine. Please let me try.

---

<div class="post-metadata">

### Author: ![jordan-violet](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan-violet/32/281428_2.png) [@jordan-violet](https://meta.discourse.org/u/jordan-violet)
#### Post date: [January 16, 2025, 7:59pm UTC](https://meta.discourse.org/t/category-icons/104683/229 "2025-01-16T19:59:36Z")

</div>

Does this theme component handle subcategories with the same name?

- parent (slug: parent)
  - sub (slug: sub)

- parent2 (slug: paren2)
  - sub (slug: sub)

It doesn’t seem to apply if I use the slug `parent-slub` or `parent1-sub` to try to apply settings to them.

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [January 17, 2025, 6:01am UTC](https://meta.discourse.org/t/category-icons/104683/230 "2025-01-17T06:01:16Z")

</div>

Are your slug names different from parent to Sub? I believe as long as the slug names are different it should work

---

<div class="post-metadata">

### Author: ![jordan-violet](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jordan-violet/32/281428_2.png) [@jordan-violet](https://meta.discourse.org/u/jordan-violet)
#### Post date: [January 17, 2025, 6:15am UTC](https://meta.discourse.org/t/category-icons/104683/231 "2025-01-17T06:15:34Z")

</div>

I shared the slug name examples in the post above.

---

<div class="post-metadata">

### Author: ![Heliosurge](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/heliosurge/32/571810_2.png) [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [January 17, 2025, 6:47am UTC](https://meta.discourse.org/t/category-icons/104683/232 "2025-01-17T06:47:47Z")

</div>

Oh and it wasn’t working? Haven’t used similar named categories on this TC but do recall at one time using subcategories as one of the instances was running using the parent cat as just a container for Subcats.

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [April 10, 2025, 4:29am UTC](https://meta.discourse.org/t/category-icons/104683/233 "2025-04-10T04:29:25Z")

</div>

@lindsey / @tobiaseigen I added a warning to the top post now that

> [@Bringing popular features to Discourse: Header search, welcome banner, and category icons / emoji](https://meta.discourse.org/t/bringing-popular-features-to-discourse-header-search-welcome-banner-and-category-icons-emoji/359169):
>
> We have added several new features to Discourse based on popular [theme components](https://meta.discourse.org/t/customizing-your-site-with-existing-theme-components/312297) to make it easier to customize the design of your community. In this topic, we’ll share more about these new core features, how to use them, and provide information about they compare to the theme components that inspired them. Header search The header search feature moves search from the magnifying glass in the top right corner to a more prominent input field in the site header. When more heade…

However we now do have quite a few search landmines in meta, we probably want to clean some of this up.

[Previous page](https://meta.discourse.org/t/category-icons/104683.md?page=8)
