# Differentiate Admin and Moderator Shield Icons
**URL:** https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114
**Category:** UX
**Created:** [January 9, 2019, 9:21pm UTC](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114 "2019-01-09T21:21:33Z")
**Posts on this page:** 20
**Page:** 2
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [January 11, 2019, 3:43am UTC](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114/28 "2019-01-11T03:43:39Z")
Given the surprising level of difficulty, maybe we should just leave this be.. not like it is broken the way it is.
---
### Author:  [@cosdesign](https://meta.discourse.org/u/cosdesign)
#### Post date: [February 3, 2021, 10:52pm UTC](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114/29 "2021-02-03T22:52:47Z")
I know it’s late but I just want to share my solution to display that admin crown ( so far only on topic’s page ) by using CSS and JS. I could also use some help cause for some reason my js code is not working..I can see it in that inline theme js file but still not working ( works well on jsfiddle though )
CSS
```
.names span.admin a::after {
content: "";
width: 17px;
height: 14px;
margin-left: 5px;
background-image: url(https://www.dropbox.com/s/0oi0y3ex3rtfvk5/cd-crown.svg?raw=1);
background-repeat: none;
display: inline-block;
position: relative;
```
}
JS ( to display the title on hover - but as I said is not working when I include it inside )
Working [Jsfiddle demo](https://jsfiddle.net/pkx34ohv/)
```
var cdcrowntitle = document.querySelector(".names .admin a");
cdcrowntitle.setAttribute("title", "Community Admin");
```
---
### Author:  [@dandv](https://meta.discourse.org/u/dandv)
#### Post date: [June 2, 2023, 6:20pm UTC](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114/30 "2023-06-02T18:20:23Z")
Got the same feedback from one of our moderators. Any progress/ideas on differentiating the admin/moderator icons in the past 2 years?
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [June 2, 2023, 6:35pm UTC](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114/31 "2023-06-02T18:35:53Z")
didn’t see it anywhere in this topic but i use CSS on my forum to make different colored shields for mods and admins for posts (if admins are members of moderator groups). in my case, mods get gold shields and admins get grey. but one can use any color in those color properties of course.
common css
```scss
// * change shield color in posts differentiating admin and mod users* //
span.username {
&.moderator .d-icon.d-icon-shield-alt {
color: #d5b907;
}
&.admin .d-icon.d-icon-shield-alt {
color: #969696;
}
}
```
i haven’t bothered to do it for user cards or profiles but i suppose i could figure it out.
you can also change the color of the moderator and admin usernames in posts to distinguish them further:
```scss
// *change color of usernames differentiating admins and mods* //
span.username {
&.moderator a {
color: #d5b907;
}
&.admin a {
color: #969696;
}
}
```
---
### Author:  [@Turtle](https://meta.discourse.org/u/Turtle)
#### Post date: [January 13, 2025, 1:24am UTC](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114/32 "2025-01-13T01:24:54Z")
The shield color change didn’t work- it still looked the same grey for both. Has the selector changed since this was posted?
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [January 13, 2025, 7:00am UTC](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114/33 "2025-01-13T07:00:21Z")
Possibly. A quick inspect of the page can help you determine the class.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [January 13, 2025, 10:03am UTC](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114/34 "2025-01-13T10:03:15Z")
The icon is now named `d-icon-shield-halved`.
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [January 13, 2025, 12:22pm UTC](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114/35 "2025-01-13T12:22:35Z")
yea icon name changed so it should be like this
```css
span.username {
&.moderator .d-icon.d-icon-shield-halved {
color: #d5b907;
}
&.admin .d-icon.d-icon-shield-halved {
color: #969696;
}
}
```
result
---
### Author:  [@Turtle](https://meta.discourse.org/u/Turtle)
#### Post date: [January 13, 2025, 12:51pm UTC](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114/36 "2025-01-13T12:51:11Z")
Thanks Lilly! And… CocoQuark, however you spell that.
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [January 15, 2025, 5:20am UTC](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114/37 "2025-01-15T05:20:51Z")
> [@Lilly](#):
>
> yea icon name changed so it should be like this
>
> ```css
> span.username {
> &.moderator .d-icon.d-icon-shield-halved {
> color: #d5b907;
> }
> &.admin .d-icon.d-icon-shield-halved {
> color: #969696;
> }
> }
>
> ```
Just wondering if we wanted to swap say the admin icin with the Wizard hat would swap color with display none and then add a line with the .d-icon.d-icon-wizard? (Not sure of the wizard hat fa off hand)
---
### Author:  [@Turtle](https://meta.discourse.org/u/Turtle)
#### Post date: [January 15, 2025, 1:23pm UTC](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114/38 "2025-01-15T13:23:36Z")
The fa is:
fa-solid fa-hat-wizard
So what would the css be, then? If I wanted to change the admin icon to hat-wizard?
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [January 15, 2025, 1:45pm UTC](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114/39 "2025-01-15T13:45:43Z")
> [@Turtle](#):
>
> So what would the css be, then? If I wanted to change the admin icon to hat-wizard?
The same CSS.
The class will still be `d-icon-shield-halved` regardless of the icon you replaced with, if you use this replacement method:
> [@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 \ tag contents from the original SVG icon file into \ …
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [January 15, 2025, 2:44pm UTC](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114/40 "2025-01-15T14:44:04Z")
Easiest way to do this is like with the [same code as above](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114/35), but also icon replacement code in head-tag tab like this:
in
```js
```
result:
---
### Author:  [@Turtle](https://meta.discourse.org/u/Turtle)
#### Post date: [January 15, 2025, 2:48pm UTC](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114/41 "2025-01-15T14:48:28Z")
Will it work so admins can have the hat and moderators the shield? Or does it just replace all of them like in the picture, and if so, is there a way around it?
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [January 15, 2025, 2:51pm UTC](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114/42 "2025-01-15T14:51:31Z")
well you might be able to [hack a conditional css](https://meta.discourse.org/t/making-custom-css-changes-on-your-site/168101) or some code in the script there. but that is icon replacement for all.
---
### Author:  [@Turtle](https://meta.discourse.org/u/Turtle)
#### Post date: [January 15, 2025, 7:18pm UTC](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114/43 "2025-01-15T19:18:32Z")
Actually, not even the wizard icon is working right now. I used the exact code in the head you gave me.
I can try again, maybe it was a glitch or something.
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [January 15, 2025, 7:35pm UTC](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114/44 "2025-01-15T19:35:37Z")
Did you add the wizard hat icon in the `SVG icon subset` site setting?
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [January 15, 2025, 8:15pm UTC](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114/45 "2025-01-15T20:15:39Z")
This is an OT question, but I would like to keep halfshield for mods. But I would very much like to show the wizard hat with admins \[1\]
But I can’t replace half shield with the hat, because of moderators.
Oh god…
> [@Turtle](#):
>
> Will it work so admins can have the hat and moderators the shield? Or does it just replace all of them like in the picture, and if so, is there a way around it?
I really should start reading topics 🤦♂️ Sorry.
* * *
1. I have few middle aged women in my forum, and they are Potter fans; that would annoy them so much 😂
---
### Author:  [@Jagster](https://meta.discourse.org/u/Jagster)
#### Post date: [January 15, 2025, 8:34pm UTC](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114/46 "2025-01-15T20:34:40Z")
> [@Lilly](#):
>
> i haven’t bothered to do it for user cards or profiles
On my forum it shows only on user card and profiles, but not on topics.
Any idea what I’ve done again?
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [January 17, 2025, 10:23am UTC](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114/47 "2025-01-17T10:23:21Z")
Shield svgfor revised code.
> [@Lilly](#):
>
> yea icon name changed so it should be like this
>
> ```css
> span.username {
> &.moderator .d-icon.d-icon-shield-halved {
> color: #d5b907;
> }
> &.admin .d-icon.d-icon-shield-halved {
> color: #969696;
> }
> }
>
> ```
>
> result
>
> 
[Previous page](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114.md?page=1)
[Next page](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114.md?page=3)