Change the Like Icon to πŸ‘

:discourse2: Summary Change the Like Icon to :+1: allows you to change the :heart: icon to the :+1: icon – or any other font awesome 5.5 glyph you prefer.
:hammer_and_wrench: Repository Link
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

:bulb: Since we switched to Font Awesome 5, we built an internal API that delivers a subset of all FA icons to clients – only those icons actively used by Discourse. Site owners can use the svg icon subset site setting to register additional icons for their Discourse instance.





If desired,

  • you can change the color of the like icon via /admin/customize/colors/ (look for the love color setting)
  • you can change the text from β€œlike” to a different term via /admin/customize/site_texts/

This is a theme component, so add the component to your main theme(s).


Sorry to dredge up this topic again but I am totally confused. I just came across this as I saw another discourse forum using a thumbs up so I did some googling.
What I’d like to do is instead of using the Thumbs up, is to use the Pig icon from here - Font Awesome with the outline version being the Unliked icon. Is that possible? Since it’s a Pro icon, would I have to download it or make my own and add it as a custom icon or emoji and then apply it to the Like Icon component.? Not sure how to do that either.
I have the Change Like Icon component installed and tested it out on an unused theme and it does work as intended. The problem is I see no area in settings under that component to mess with CSS, so there’s no place to add the scripting from earlier on in this thread.
Any help would be appreciated, thanks.


Like @Phlipups I’m trying to change the icon simply to the solid beer icon, but I get a blank.

<script type="text/discourse-plugin" version="0.8">
      api.replaceIcon('d-liked', 'beer');
      api.replaceIcon('d-unliked', 'fa-beer');
      api.replaceIcon('notification.liked', 'fa-beer');
      api.replaceIcon('notification.liked_2', 'fa-beer');
      api.replaceIcon('notification.liked_many', 'fa-beer');
      api.replaceIcon('notification.liked_consolidated', 'fa-beer');      
      api.replaceIcon('heart', 'beer');

Hi Tris,

Try add beer to admin/site_settings/category/all_results?filter=svg%20icon%20subset
svg icon subset site setting.
And I think use only beer instead fa-beer is enough. Beer icon has not an only bordered version in free so just the color will change after click.




Brilliant Don! Thanks for helping!

1 Like

Hi guys, I installed this component and, while it works great and it successfully replace the heart icon on the post list, the email notifications that my users are receiving are still showing the old heart icon.
Am I missing something? do I need to modify something on the email template as well?
Thank you for developing this nice component


I’ve just put in a PR to make the repo a bit clearer (after not being able to identify the TC in my instance):

I do wonder if the repo link should also be changed from new-like-icon to something clearer. Of course, that would cause chaos, so maybe not!