Change icons globally - Discourse

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

Right click on the icon you want to change and select "Inspect element" or "Inspect" (depends on the browser)
Find the icon name
Search a new icon here https://fontawesome.com/icons?d=gallery, e.g. external-link-alt
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");
});

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: 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. 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 :heart: icon with :+1: icon:

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

but on the badge page the icon is still "heart": so to change it on that page we add:

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

Another example:

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

changes the watching icon: [details="See here other exceptions that cover the tracking status, expand/collapse, notifications and likes of course."]

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) [/details]

Feel free to create other themes component and share it in our #theme-component category!