I installed a component that only allows me to put icons in my forum tags through the fontawesome website, but I want to use my own icons, how do I upload them and use them? [image]

thanks for replying, i was wanting to use this [image] Custom Header Links (icons) Theme component discourse2 Summary Custom Header Links (icons) will allow you to easily add linked icons to the Discourse header. eyeglasses Preview Preview on Discourse Theme Creator hammer_and_wrench Repository Link https://github.com/discourse/discourse-icon-header-links open_book New to Discourse Themes? Beginner’s guide to using Discourse Themes Install this theme component Features Screenshots Desktop [Capture3] Mobile [Capture] Settings This component includes a … but for some reason the svg icons i upload on my website i can’t use in that

Oh. I suspect that you’ll need to do a bit of work to make that happen. I changed your title accordingly, so hopefully it’ll get attention from someone who knows more about that theme component. It says [image]Custom Header Links (icons) Icon can be any FontAwesome 5 (free) icon name without the fa- ‘fab-’ ‘fas-’ or ‘far-’ parts which I think means that it’s hard or impossible to use other icons.

Adding custom icons is now supported, as of this commit: https://github.com/discourse/discourse-icon-header-links/pull/8 When adding a header link in the theme setting, paste in a url to an icon and it should be present in the header.

Hi! thank you for answering me and for helping me! How do I install this?

Hi @danielabc You simply need to navigate to your components in /admin/customize/themes, find the Icon Header Links component. If it’s not on the latest update, you should see a button to update. [update button] After updating the theme component, in your theme settings where you configure each icon link, simply use a URL to an image source instead of a font awesome icon name. For example, here is how I have a link set up: Desktop mobile link, https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Pok%C3%A9_Ball_icon.svg/1200px-Pok%C3%A9_Ball_icon.svg.png, https://facebook.com, vdm, self Which renders like so: [sample render]

How to use my own SVG icons in Custom Header Links theme component?

Product Support

pfaffman (Jay Pfaffman) September 6, 2022, 4:55am 2

Replace Discourse’s default SVG icons with custom icons in a theme

Topic		Replies	Views
Custom Header Links (icons) Theme component official , custom-header-icons	117	34173	August 4, 2025
How to add a link icon to the header Development	3	668	February 2, 2024
Missing custom header link icon after update Product Support	3	1733	August 5, 2020
Adding icons rather than text UX custom-header-links	2	362	May 30, 2019
Introducing Font Awesome 5 and SVG icons Announcements new-feature	131	45205	December 1, 2023

How to use my own SVG icons in Custom Header Links theme component?

Related topics