# I can't change the notification icons

**URL:** https://meta.discourse.org/t/i-cant-change-the-notification-icons/200058
**Category:** Development
**Created:** [August 11, 2021, 12:48pm UTC](https://meta.discourse.org/t/i-cant-change-the-notification-icons/200058 "2021-08-11T12:48:18Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![Mikhail\_Tyuftyaev](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mikhail_tyuftyaev/32/237998_2.png) [@Mikhail\_Tyuftyaev](https://meta.discourse.org/u/Mikhail_Tyuftyaev)
#### Post date: [August 11, 2021, 12:48pm UTC](https://meta.discourse.org/t/i-cant-change-the-notification-icons/200058/1 "2021-08-11T12:48:18Z")

</div>

Hi, everybody  
I want to change these icons

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

I did it like this

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/7/e7b8dbd4132584e231ecb0a85ce5eab4ab92a6e0.png)

And I wrote it in the Header

 ![image](https://global.discourse-cdn.com/meta/original/3X/d/e/def0723f65ac468639bceeee7dc172d57f421012.png)

But the icon has not changed  
It works with other icons  
Please help me solve this problem

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [August 11, 2021, 1:36pm UTC](https://meta.discourse.org/t/i-cant-change-the-notification-icons/200058/2 "2021-08-11T13:36:38Z")

</div>

Hi Mikhail,

Please try this one 🙂

```plaintext
<script type="text/discourse-plugin" version="0.8">
  api.replaceIcon('notification.granted_badge', 'oo-medal-badges');
</script>

```

You can find these replacements here ⬇

> <https://github.com/discourse/discourse/blob/dc6b547ed89f652b5406489d76140b76cf8e0d1d/app/assets/javascripts/discourse-common/addon/lib/icon-library.js#L13>

---

<div class="post-metadata">

### Author: ![Mikhail\_Tyuftyaev](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mikhail_tyuftyaev/32/237998_2.png) [@Mikhail\_Tyuftyaev](https://meta.discourse.org/u/Mikhail_Tyuftyaev)
#### Post date: [August 11, 2021, 1:59pm UTC](https://meta.discourse.org/t/i-cant-change-the-notification-icons/200058/3 "2021-08-11T13:59:58Z")

</div>

Yes, it worked. Thank you very much

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

---

<div class="post-metadata">

### Author: ![Mikhail\_Tyuftyaev](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mikhail_tyuftyaev/32/237998_2.png) [@Mikhail\_Tyuftyaev](https://meta.discourse.org/u/Mikhail_Tyuftyaev)
#### Post date: [August 11, 2021, 2:20pm UTC](https://meta.discourse.org/t/i-cant-change-the-notification-icons/200058/4 "2021-08-11T14:20:14Z")

</div>

And where can I see what they look like?

> [@Don](#):
>
> ```plaintext
> const REPLACEMENTS = {
> "d-tracking": "bell",
> "d-muted": "discourse-bell-slash",
> "d-regular": "far-bell",
> "d-watching": "discourse-bell-exclamation",
> "d-watching-first": "discourse-bell-one",
> "d-drop-expanded": "caret-down",
> "d-drop-collapsed": "caret-right",
> "d-unliked": "far-heart",
> "d-liked": "heart",
> "notification.mentioned": "at",
> 
> ```

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [August 11, 2021, 2:35pm UTC](https://meta.discourse.org/t/i-cant-change-the-notification-icons/200058/5 "2021-08-11T14:35:07Z")

</div>

You can easily identify it by using inspect elements.

For example.: the **certificate** icon notification

1. Find the icon name with inspect elements

 ![Screenshot 2021-08-11 at 16.43.04](https://global.discourse-cdn.com/meta/original/3X/4/0/40dcf11cafbea0e0c0e64e546e630e7e19c0a5bd.jpeg)

* * *

1. Find the same icon in the icon-library js

> <https://github.com/discourse/discourse/blob/dc6b547ed89f652b5406489d76140b76cf8e0d1d/app/assets/javascripts/discourse-common/addon/lib/icon-library.js#L40>

Then you can replace the icon with any other icon you want. 🙂

---

<div class="post-metadata">

### Author: ![Mikhail\_Tyuftyaev](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mikhail_tyuftyaev/32/237998_2.png) [@Mikhail\_Tyuftyaev](https://meta.discourse.org/u/Mikhail_Tyuftyaev)
#### Post date: [August 11, 2021, 2:44pm UTC](https://meta.discourse.org/t/i-cant-change-the-notification-icons/200058/6 "2021-08-11T14:44:36Z")

</div>

Thanks for your reply  
I figured it out. I thought there was some sort of list with standard Discourse icons

---

<div class="post-metadata">

### Author: ![kjs-fgx](https://avatars.discourse-cdn.com/v4/letter/k/a9adbd/32.png) [@kjs-fgx](https://meta.discourse.org/u/kjs-fgx)
#### Post date: [January 30, 2023, 1:16pm UTC](https://meta.discourse.org/t/i-cant-change-the-notification-icons/200058/7 "2023-01-30T13:16:21Z")

</div>

May I add this for future reference. I followed the instructions on [Replace Discourse's default SVG icons with custom icons in a theme - #19](https://meta.discourse.org/t/replace-discourses-default-svg-icons-with-custom-icons-in-a-theme/115736/19) but but what I did not realise at first was that the same icon can be referred to in different ways. In the app itself, under ‘/styleguide/atoms/icons’ is a list of all the icons and how they are referred to, so in my header.html file I now have 5 references to the envelope icon:

```plaintext
    api.replaceIcon('envelope', 'fgx-air-mail');
    api.replaceIcon('far-envelope', 'fgx-air-mail');
    api.replaceIcon('notification.private_message', 'fgx-air-mail');
    api.replaceIcon('notification.read_private_message', 'fgx-air-mail');
    api.replaceIcon('notification.invited_to_private_message', 'fgx-air-mail');

```