# 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:** 1
**Showing post:** 39

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@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")

</div>

> [@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 \<svg\> tag contents from the original SVG icon file into \<symbol\> …

---

_[View the full topic](https://meta.discourse.org/t/differentiate-admin-and-moderator-shield-icons/106114)._