So I posted this question in a thread about the component that changes the Like Icon to a thumbs up. Sorry to dredge up this topic again but I am totally confused. What I’d like to do is use a custom Like 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. I am guessing to have your own custom icon that you can’t us the component at the same time as it seems the thumbs up overrides everything. So I removed it and I added this code to the Header area in custom HTML of that theme- api.replaceIcon('d-liked', 'fa-pig'); api.replaceIcon('d-unliked', 'fal-pig'); api.replaceIcon('notification.liked', 'fa-pig'); api.replaceIcon('notification.liked_2', 'fa-pig'); api.replaceIcon('notification.liked_many', 'fa-pig'); api.replaceIcon('notification.liked_consolidated', 'fa-pig'); api.replaceIcon('d-unliked', 'fal-pig'); api.replaceIcon('notification.liked', 'fa-pig'); api.replaceIcon('notification.liked_2', 'fa-pig'); api.replaceIcon('notification.liked_many', 'fa-pig'); api.replaceIcon('notification.liked_consolidated', 'fa-pig'); api.replaceIcon('heart', 'fa-pig'); In the SVG icon subset I added fa-pig and fal-pig but when previewed the like icon is blank. I assume that’s because I don’t actually have the Pig icon installed. So I tried the piggy-bank icon which is supposed to be free and added that to Icon subset, again the Like icon is blank. Obviously, I’m doing something wrong. I tried uploading an Asset to this test theme with name icons-sprite as an svg and it let’s me upload one but I can’t name two different uploads with the same Var name of Icons-sprite. Either way still blank even with the one upload. I work in IT but I’m a super noob at programming any of this advanced backend Discourse stuff. Any help would be appreciated, thanks.

Ok, try using this: Dropbox I only added the replaceIcon call for d-liked, you’ll have to edit the component in your instance and add the other lines. Make sure you use the IDs in the svg file, now they are simply SVGpig and SVGpigout.

I’m not expert at that stuff… [image] Phlipups: Since it’s a Pro icon, Maybe see Discourse FontAwesome Pro

[image] Phlipups: In the SVG icon subset I added fa-pig and fal-pig but when previewed the like icon is blank. I assume that’s because I don’t actually have the Pig icon installed. So I tried the piggy-bank icon which is supposed to be free and added that to Icon subset, again the Like icon is blank. The piggy-bank icon should work, but you need to add it without any prefixes in the SVG icon subset site setting and in the JS override functions. The Pro icons are not included in core, so for the Pro-only pig icon, you can use the plugin suggested by Jay above, or you can create your own sprite. Make sure you look at the example SVG sprite file linked in the OP, the sprite needs a specific structure with symbols and IDs (and then the ID is what you use in the JS api calls).

So I tried again and added the ‘piggy-bank’ icon to the SVG Icon subset. I added the JS into the Header again and referenced ‘Piggy-Bank’ and it finally worked properly! Thx! Now the only problem with that particular icon is that both liked posts and unliked posts look exactly the same, there is no outline version for unliked posts. Upon loading up the Font Awesome site again I noticed that the outlined versions of the icon are PRO. So that kills that idea. I’m not about to spend a hundred a year for 1 icon, we are non-profit and don’t charge for membership. SO I guess I’m back to creating my own icon. I’ll check out those directions again.

[image] Phlipups: Now the only problem with that particular icon is that both liked posts and unliked posts look exactly the same, there is no outline version for unliked posts Did you add both of them? (I haven’t done what you’re doing, so this also may not help). There is a theme component that makes like a thumbs up, so you might check that to see that you’re adding all the stuff you need to change the like. (or maybe that icon just can’t work)

Ok, so I’ve tried some things to create my own. Unfortunately, the link to see an example of how the SVG Sprites file should be formatted inthe OP is just a blank page, it doesn’t load. So I winged it. I created both my SVGs in Illustrator, exported, then threw them into Chrome to ‘Inspect element’ to get the Path file info. I’m on a Mac, so I opened textEdit and copied the info in there that I think is supposed to be in the Sprite file. Then changed the extension to svg. Uploaded it to theme and added the js code into Header. Again not sure if any of this is right and pretty sure it isn’t since when I preview the theme for the site it completely crashes it. I get the Ooops Error-" The software powering this discussion forum encountered an unexpected problem." After I remove the icons-Sprite svg that was uploaded and wait a bit the site loads correctly again. Below is the svg info in file and the json code. Thanks! Here’s the Sprite file on Google drive if anyone cares to take a look - Drive And the code - [Screen Shot 2021-03-19 at 4.32.51 PM]

You shouldn’t add icons-sprite twice. Can you post the SVG paths in a code block? I think you’re running into issues putting the icons in a sprite, I can help with that.

Thanks! Is this what you’re looking for? <path xmlns="http://www.w3.org/2000/svg" fill="#060709" d="M184.131,400.155c2.827,0.205,3.614-5.244,7.953-7.232c4.652-7.228,0,0,7.627-10.233 c-0.112,0.04,6.764-6.983,6.651-6.942c6.519-17.718,21.288-36.328,29.468-53.35c53.678,30.022,119.689,40.696,178.843,21.456 c2.529-0.931,3.49,2.748,4.203,4.525c3.127,12.466,2.592,25.449,2.285,38.221c1.147,7.776-6.405,14.642-5.161,22.4 c4.807-0.332,19.038,0.231,23.851,0.298c2.355-7.332,1.213-5.049,4.524-12.042c0.322-0.68,4.927-10.54,5.377-10.93 c4.667-11.476,9.501-22.896,14.743-34.119c5.729,11.479,7.265,24.374,9.339,36.882c-0.092,0.01-0.183,0.021-0.275,0.03 c3.219,10.044-1.754,20.419-0.559,30.879c8.474,0.214,23.744-0.615,32.184-1.483c0.118-3-0.39-5.761-0.319-8.759 c3.064-13.446,9.544-26.351,14.214-39.303c1.83-5.448,6.072-11.021,3.807-16.972c-2.982-9.171-2.917-18.918-2.855-28.449 c-0.184-7.692,6.717-12.547,10.316-18.613c30.147-44.639,37.913-101.296,30.606-153.864c13.341-4.319,29.918-11.775,31.892-27.499 c-0.446-9.285,19.679-20.46,17.656-29.556c-5.111,2.487-19.541,7.725-22.192,10.497c-3.552-1.966-7.667-5.363-11.912-3.354 c-4.239,2.356-7.504,7.027-7.651,11.936c0.809,4.973,6.115,7.092,9.712,9.815c-5.499,6.366-14.325,6.291-22.056,6.453 c-4.471-0.021-9.786,0.26-12.861-3.666c-20.989-23.668-46.85-43.261-76.024-55.694c-32.579-14.011-68.688-18.704-103.914-15.92 c-38.915,2.733-76.397,14.716-112.439,29.032c6.805-24.491,8.647-50.02,8.446-75.34c-27.898,5.61-56.151,13.44-79.849,29.784 c-2.461,1.879-5.58,3.147-8.558,1.596c-18.286-7.325-38.642-11.424-58.18-7.058c-16.763,3.533-31.39,14.275-41.46,27.907 C62.018,74.314,54.998,90.515,40,97.979c-6.076,0.593-9.563-6.335-13.738-9.771c-6.909,8.871-14.208,17.696-18.813,28.033 c-2.424,4.944,0.913,10.092,3.587,14.148c6.601,9.78,24.814,13.061,35.339,17.317c-5.382,0.674-17.733,2.564-23.123,3.159 c12.034,17.167,26.912,32.841,45.512,42.914c16.032,9.485,31.733,19.516,47.847,28.86c5.072,3,11.006,5.358,14.172,10.658 c7.56,12.251,13.543,25.426,21.329,37.545c2.928,4.184,2.657,9.459,2.343,14.312c-2.448,33.767-8.148,67.191-12.444,100.755 c5.083-0.22,6.743,3.232,11.097,0.655c2.072,2.461,3.037,1.204,7.392,2.496c2.018-6.083,18.703-53.914,20.5-60.062 c0.033,6.355-15.454,62.01-17,68 M77.21,126.644c-5.751-4.765-8.054-13.37-4.71-20.168c1.688-3.971,8.684-5.219,10.362-0.624 C86.532,113.189,82.366,121.266,77.21,126.644z"/> <path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#060709" stroke-width="8" stroke-miterlimit="10.43" d="M167.5,399.499L194,405 c2.827,0.205,1.084-10.077,1.084-10.077s0,0,7.627-10.233c-0.112,0.04,6.651-6.942,6.651-6.942 c8.885-18.201,21.288-36.328,29.468-53.35c53.678,30.022,119.689,40.696,178.843,21.456c2.529-0.931,3.49,2.748,4.203,4.525 c3.127,12.466,2.592,25.449,2.285,38.221c1.147,7.776-5.405,17.642-4.161,25.4c4.807-0.332,17.453-2.001,22.266-1.935 c2.355-7.332,1.798-5.816,5.109-12.81c0.322-0.68,4.927-10.54,5.377-10.93c4.667-11.476,14.743-34.119,14.743-34.119l9.339,36.882 l-0.275,0.03c0,0,0.246,20.419,1.441,30.879c8.474,0.214,21.744-0.615,30.184-1.483c0.118-3-0.39-5.761-0.319-8.759 c3.064-13.446,9.544-26.351,14.214-39.303c1.83-5.448,6.072-11.021,3.807-16.972c-2.982-9.171-2.917-18.918-2.855-28.449 c-0.184-7.692,6.717-12.547,10.316-18.613c30.147-44.639,37.913-101.296,30.606-153.864c13.341-4.319,29.918-11.775,31.892-27.499 c-0.446-9.285,19.679-20.46,17.656-29.556c-5.111,2.487-19.541,7.725-22.192,10.497c-3.552-1.966-7.667-5.363-11.912-3.354 c-4.239,2.356-7.504,7.027-7.651,11.936c0.809,4.973,6.115,7.092,9.712,9.815c-5.499,6.366-14.325,6.291-22.056,6.453 c-4.471-0.021-9.786,0.26-12.861-3.666c-20.989-23.668-46.85-43.261-76.024-55.694c-32.579-14.011-68.688-18.704-103.914-15.92 c-38.915,2.733-76.397,14.716-112.439,29.032c6.805-24.491,8.647-50.02,8.446-75.34c-27.898,5.61-56.151,13.44-79.849,29.784 c-2.461,1.879-5.58,3.147-8.558,1.596c-18.286-7.325-38.642-11.424-58.18-7.058c-16.763,3.533-31.39,14.275-41.46,27.907 C65.018,76.314,57.998,92.515,43,99.979c-6.076,0.593-9.563-6.335-13.738-9.771c-6.909,8.871-14.208,17.696-18.813,28.033 c-2.424,4.944,0.913,10.092,3.587,14.148c6.601,9.78,24.814,13.061,35.339,17.317c-5.382,0.674-17.733,2.564-23.123,3.159 c12.034,17.167,26.912,32.841,45.512,42.914c16.032,9.485,31.733,19.516,47.847,28.86c5.072,3,11.006,5.358,14.172,10.658 c7.56,12.251,13.543,25.426,21.329,37.545c2.928,4.184,2.657,9.459,2.343,14.312c-2.448,33.767-8.148,67.191-12.444,100.755 c5.083-0.22,6.743,3.232,11.097,0.655c2.072,2.461,3.037,1.204,7.392,2.496c2.018-6.083,12.203-34.414,14-40.562 c0.033,6.355-14,46.666-7,49.999 M80.21,128.644c-5.751-4.765-8.054-13.37-4.71-20.168c1.688-3.971,8.684-5.219,10.362-0.624 C89.532,115.189,85.366,123.266,80.21,128.644z"/>

Discourse Gifs ships a custom GIF icon that you can use as an example: assets/gif.svg?short_path=61c0681 main <path d="M944 299H692c-4.4 0-8 3.6-8 8v406c0 4.4 3.6 8 8 8h59.2c4.4 0 8-3.6 8-8V549.9h168.2c4.4 0 8-3.6 8-8V495c0-4.4-3.6-8-8-8H759.2V364.2H944c4.4 0 8-3.6 8-8V307c0-4.4-3.6-8-8-8zm-356 1h-56c-4.4 0-8 3.6-8 8v406c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V308c0-4.4-3.6-8-8-8zM452 500.9H290.5c-4.4 0-8 3.6-8 8v43.7c0 4.4 3.6 8 8 8h94.9l-.3 8.9c-1.2 58.8-45.6 98.5-110.9 98.5c-76.2 0-123.9-59.7-123.9-156.7c0-95.8 46.8-155.2 121.5-155.2c54.8 0 93.1 26.9 108.5 75.4h76.2c-13.6-87.2-86-143.4-184.7-143.4C150 288 72 375.2 72 511.9C72 650.2 149.1 736 273 736c114.1 0 187-70.7 187-181.6v-45.5c0-4.4-3.6-8-8-8z"/>

How to replace an existing SVG icon with a custom one?

Development

Phlipups (Phlipups) March 25, 2021, 6:20pm 11

Awesome! Thank you, that worked I got it up and running. My community appreciates it. Thanks so much!!

Topic		Replies	Views
Replace Discourse's default SVG icons with custom icons in a theme Developer Guides how-to , theme-guides	10	9589	February 24, 2026
Introducing Font Awesome 5 and SVG icons Announcements new-feature	131	45208	December 1, 2023
How to use a custom SVG like icon in the Reactions plugin? Product Support reactions	3	978	June 2, 2023
Change icons globally Developer Guides how-to	26	10791	October 5, 2025
Change the Like Icon to :+1: Theme component official , change-like-icon	6	14532	February 27, 2024

How to replace an existing SVG icon with a custom one?

Related topics