# How to change moderator icon

**URL:** https://meta.discourse.org/t/how-to-change-moderator-icon/356417
**Category:** Development
**Created:** [March 8, 2025, 7:13pm UTC](https://meta.discourse.org/t/how-to-change-moderator-icon/356417 "2025-03-08T19:13:32Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![KeepBotting](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/keepbotting/32/492515_2.png) [@KeepBotting](https://meta.discourse.org/u/KeepBotting)
#### Post date: [March 8, 2025, 7:13pm UTC](https://meta.discourse.org/t/how-to-change-moderator-icon/356417/1 "2025-03-08T19:13:33Z")

</div>

Hey, I read through this: [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)

Created a spritesheet (I think I have done this correctly):

```plaintext
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="mod-crown" width="13" height="11" viewBox="0 0 13 11">
        <metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
            <x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39 ">
                <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
                    <rdf:Description rdf:about=""/>
                </rdf:RDF>
            </x:xmpmeta>
            <?xpacket end="w"?></metadata>
        <defs>
            <style>
                .cls-1 {
                fill: #04b214;
                }

                .cls-1, .cls-2, .cls-3, .cls-4 {
                fill-rule: evenodd;
                }

                .cls-3 {
                fill: #29ec3a;
                }

                .cls-4 {
                fill: #1f8111;
                }
            </style>
        </defs>
        <path class="cls-1" d="M11,5V3h1V5H11ZM10,7v3H9V7H7V8H6V7H4v3H3V7H2V5H5V3H6V1H7V3H8V5h3V7H10ZM8,10H7V8H8v2ZM5,10V8H6v2H5ZM1,3H2V5H1V3Z"/>
        <path class="cls-2" d="M8,10V8H7V7H9v3H8ZM6,10V8H7v2H6ZM5,10H4V7H6V8H5v2Z"/>
        <path class="cls-3" d="M11,3V1h1V3H11ZM10,5V3h1V5H10ZM4,5V3H5V5H4ZM5,1H6V3H5V1ZM2,7H3v3H2V7ZM1,5H2V7H1V5ZM0,1H1V5H0V1Z"/>
        <path class="cls-4" d="M12,5V0h1V5H12ZM11,7V5h1V7H11Zm0,4H2V10h8V7h1v4ZM8,3H9V5H8V3ZM7,1H8V3H7V1ZM6,0H7V1H6V0ZM2,3H3V5H2V3ZM1,1H2V3H1V1ZM0,0H1V1H0V0Z"/>
    </symbol>
</svg>

```

Added the asset to `about.json`:

```plaintext
    "assets": {
        "mod-crown": "assets/mod-crown.svg"
    }

```

And added this to `header.html`:

```plaintext
<script type="text/discourse-plugin" version="0.8">
    api.replaceIcon('d-icon-shield-halved', 'mod-crown');
</script>

```

But the icon is not changed, the shield icon remains. What am I doing wrong?

---

<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: [March 8, 2025, 7:19pm UTC](https://meta.discourse.org/t/how-to-change-moderator-icon/356417/2 "2025-03-08T19:19:15Z")

</div>

Hi, welcome!

> [@KeepBotting](#):
>
> `"mod-crown": "assets/mod-crown.svg"`

The `mod-crown` variable name should be replaced by `icons-sprite`.

I had the same issue before, I think the documentation could be improved in this bit.

* * *

Also,

> [@KeepBotting](#):
>
> ```plaintext
> <script type="text/discourse-plugin" version="0.8">
> api.replaceIcon('d-icon-shield-halved', 'mod-crown');
> </script>
> 
> ```

It should be: `api.replaceIcon('shield-halved', 'mod-crown');`

---

<div class="post-metadata">

### Author: ![KeepBotting](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/keepbotting/32/492515_2.png) [@KeepBotting](https://meta.discourse.org/u/KeepBotting)
#### Post date: [March 8, 2025, 7:25pm UTC](https://meta.discourse.org/t/how-to-change-moderator-icon/356417/3 "2025-03-08T19:25:30Z")

</div>

> [@Arkshine](#):
>
> The `mod-crown` variable name should be replaced by `icons-sprite`.

I’ve adjusted this but there has been no change.

```plaintext
    "assets": {
        "icons-sprite": "assets/mod-crown.svg"
    }

```

Is my spritesheet valid? I notice it looks different than other spritesheets e.g. [assets/spritesheet.svg · main · Manuel Kostka / Discourse / Themes / Heroes · GitLab](https://gitlab.com/manuelkostka/discourse/themes/heroes/-/blob/main/assets/spritesheet.svg?ref_type=heads&plain=1)

I tried removing ` style="display: none;"` from the svg tag in my spritesheet but that did not help either.

---

<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: [March 8, 2025, 7:30pm UTC](https://meta.discourse.org/t/how-to-change-moderator-icon/356417/4 "2025-03-08T19:30:16Z")

</div>

Did you try to remove the metadata, just in case?

Let me give it a try on my side.

---

<div class="post-metadata">

### Author: ![KeepBotting](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/keepbotting/32/492515_2.png) [@KeepBotting](https://meta.discourse.org/u/KeepBotting)
#### Post date: [March 8, 2025, 7:35pm UTC](https://meta.discourse.org/t/how-to-change-moderator-icon/356417/5 "2025-03-08T19:35:03Z")

</div>

No change when removing metadata.

However:

```plaintext
<script type="text/discourse-plugin" version="0.8">
    api.replaceIcon('shield-alt', 'mod-crown');
</script>

```

This gets it to show up but I also get a scary warning about compatibility:

 ![image](https://global.discourse-cdn.com/meta/original/4X/3/4/a/34a349b7b05a598ad565ab769914c1994068b533.png)

In the inspector I get this warning: `Deprecation notice: The icon name "shield-alt" has been updated to "shield-halved".`

And using `shield-halved` instead of `d-icon-shield-halved` works properly!

Thanks for your help 😁

---

<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: [March 8, 2025, 7:36pm UTC](https://meta.discourse.org/t/how-to-change-moderator-icon/356417/6 "2025-03-08T19:36:25Z")

</div>

What I was about to say, just noticed it as well!

I’m glad it works. 😄

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [April 7, 2025, 7:36pm UTC](https://meta.discourse.org/t/how-to-change-moderator-icon/356417/7 "2025-04-07T19:36:40Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.