# Change icons globally

**URL:** https://meta.discourse.org/t/change-icons-globally/87751
**Category:** Developer Guides
**Tags:** how-to
**Created:** [May 17, 2018, 3:45pm UTC](https://meta.discourse.org/t/change-icons-globally/87751 "2018-05-17T15:45:00Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [May 17, 2018, 3:45pm UTC](https://meta.discourse.org/t/change-icons-globally/87751/1 "2018-05-17T15:45:00Z")

</div>

This is an easy way to change a Discourse icon globally.

1. Right click on the icon you want to change and select “Inspect element” or “Inspect” (depends on the browser)

2. Find the icon name  

3. Search a new icon here [Find Icons with the Perfect Look & Feel | Font Awesome](https://fontawesome.com/icons?d=gallery), e.g. [external-link-alt](https://fontawesome.com/icons/external-link-alt?style=solid)

4. Customize and add the code in your `admin > customize > themes > edit code -> JS` tab

```gjs
// {theme}/javascripts/discourse/api-initializers/init-theme.gjs

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.replaceIcon("link", "external-link-tab");
});

```

1. Icons that are not used by default from Discourse must be added in the site setting `svg icon subset` then force refresh your browser to see the changes applied.  
**Result:**  
 ![image](https://global.discourse-cdn.com/meta/original/4X/c/8/5/c8531f6df84a8c81cff3433c27b5e24c9e2b2580.png)  
All the “link” icons will be replaced by “external-link-tab”.  
If an icon is used for multiple elements in other pages, such as badges, the icon will also be replaced there.

* * *

## Exceptions

_Note that there is already a theme component that allow you to [change the Like icon](https://meta.discourse.org/t/change-the-like-icon/87748/1). I’m using this case as example_

The “heart” icon, used to give Like, is hardcoded with other names (`'d-liked'` and `'d-unliked'`) and should be treated differently than other icons, so to change the ❤ icon with 👍 icon:

```js
api.replaceIcon("d-liked", "thumbs-up");
api.replaceIcon("d-unliked", "thumbs-o-up");

```

![like](https://global.discourse-cdn.com/meta/original/4X/5/2/0/520c013bf27287ab540eaac51ee277a538aa5e16.png)  
 ![firefox_2018-04-24_18-37-02](https://global.discourse-cdn.com/meta/original/4X/8/8/7/887bc3d441fbf1d5dbf8f7b881972433a822ffa8.png)  
but on the badge page the icon is still “heart”:

 ![firefox_2018-04-24_18-38-15](https://global.discourse-cdn.com/meta/original/4X/c/0/9/c09be93aad477146c3b4b5e984778954e6c88fa2.png)  
so to change it on that page we add:

```js
api.replaceIcon("heart", "thumbs-up");

```

 ![firefox_2018-04-24_18-47-50](https://global.discourse-cdn.com/meta/original/4X/e/d/e/edeb02505da2b318ebcbdffaf1a3bf58a9f6be3f.png)

Another example:

```js
api.replaceIcon("d-watching", "eye");

```

changes the watching icon:

 ![watching-original](https://global.discourse-cdn.com/meta/original/4X/8/1/9/819e3400d2e2de90ed6bb3769f4e43b792b4e67e.png) ![watching](https://global.discourse-cdn.com/meta/original/4X/1/3/f/13f43088d33cc827659a0a5c6f14c4ff4e31d1a7.png)

> **See here other exceptions that cover the tracking status, expand/collapse, notifications and likes of course.**
>
> ```js
> 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",
> "d-post-share": "link",
> "d-topic-share": "link",
> "notification.mentioned": "at",
> "notification.group_mentioned": "users",
> "notification.quoted": "quote-right",
> "notification.replied": "reply",
> "notification.posted": "reply",
> "notification.edited": "pencil-alt",
> "notification.bookmark_reminder": "discourse-bookmark-clock",
> "notification.liked": "heart",
> "notification.liked_2": "heart",
> "notification.liked_many": "heart",
> "notification.liked_consolidated": "heart",
> "notification.private_message": "far-envelope",
> "notification.invited_to_private_message": "far-envelope",
> "notification.invited_to_topic": "hand-point-right",
> "notification.invitee_accepted": "user",
> "notification.moved_post": "sign-out-alt",
> "notification.linked": "link",
> "notification.granted_badge": "certificate",
> "notification.topic_reminder": "far-clock",
> "notification.watching_first_post": "discourse-bell-one",
> "notification.group_message_summary": "users",
> "notification.post_approved": "check",
> "notification.membership_request_accepted": "user-plus",
> "notification.membership_request_consolidated": "users",
> "notification.reaction": "bell",
> "notification.votes_released": "plus",
> "notification.chat_quoted": "quote-right",
> };
> 
> ```
> 
> Ref: [discourse/icon-library.js at main · discourse/discourse (github.com)](https://github.com/discourse/discourse/blob/main/frontend/discourse/app/lib/icon-library.js)

* * *

Feel free to create other themes component and share it in our #Customization > Theme component category!

* * *

This document is version controlled - suggest changes [on github](https://github.com/discourse/discourse/blob/main/docs/developer-guides/docs/05-themes-components/28-global-icon-changes.md).

---

_[View the full topic](https://meta.discourse.org/t/change-icons-globally/87751)._