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

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]

1 Like

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

2 Likes

thanks for replying, i was wanting to use this

but for some reason the svg icons i upload on my website i can’t use in that

2 Likes

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

which I think means that it’s hard or impossible to use other icons.

2 Likes

Adding custom icons is now supported, as of this commit:

When adding a header link in the theme setting, paste in a url to an icon and it should be present in the header.

1 Like

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

1 Like

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

1 Like