# Custom Header Links (icons)
**URL:** https://meta.discourse.org/t/custom-header-links-icons/86307
**Category:** Theme component
**Tags:** official, custom-header-icons
**Created:** [April 27, 2018, 2:00pm UTC](https://meta.discourse.org/t/custom-header-links-icons/86307 "2018-04-27T14:00:38Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [April 27, 2018, 2:00pm UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/1 "2018-04-27T14:00:38Z")
| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Custom Header Links (icons)** will allow you to easily add linked icons to the Discourse header. |
| š | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/custom-header-links-icons) |
| š | **Repository Link** | [https://github.com/discourse/discourse-icon-header-links](https://github.com/discourse/discourse-icon-header-links) |
| š | **New to Discourse Themes?** | [Beginnerās guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |
Install this theme component
> [@](#):
>
> :discourse2: As this is an #official theme component maintained by the Discourse team, #Support, #Contribute > Bug, #Contribute > UX, and #Contribute > Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started. š
>
> [ā **Support**](https://meta.discourse.org/new-topic?category_id=6&tags=custom-header-icons "Ask for support on configuring and using Custom Header Links (icons") [š **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=custom-header-icons "A bug report means something is broken, preventing normal/typical use of the theme component") [š **UX**](https://meta.discourse.org/new-topic?category_id=9&tags=custom-header-icons "Discussion about the user interface of Custom Header Links (icons), and how features are presented (including language and UI elements)") [š” **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=custom-header-icons "Discussion about how existing Custom Header Links (icons) features can be improved or enhanced, and how proposed new features could work")
### Features
### Screenshots
**Desktop**
**Mobile**
### Settings
This component includes a theme setting that allows you to add as many links as you want, determine their icons, and decide which devices they show up on!
| Name | Descriptions |
| --- | --- |
| header links | List of links with the following properties: title, icon, URL, view and target |
| add whitespace | If checked, this will add some whitespace between the default Discourse header icons and the custom icons added via this component |
| Svg icons | Include FontAwesome 6 icon classes for each icon used in the list. |
Notes:
- URL can be absolute ([https://www.example.com](https://www.example.com)) or relative (/c/staff)
- Icons can be any [FontAwesome 6 (free) icon](https://fontawesome.com/v6/search?ic=free) name without the `fa-` āfab-ā āfas-ā or āfar-ā parts or an URL to an image.
If the icon you want to use does not show up, then add it to the `svg_icons` setting in the component. If you add new icons, they need to be prefixed with FontAwesome 6 prefixes like fab, far and fas.
### Credits
This is based on @techAPJās awesome tutorial here: [(Superseded) Add new link on header beside search icon](https://meta.discourse.org/t/add-new-link-on-header-beside-search-icon/48621), and on @vinothkannansās Brand header theme which was a great reference for the structure of this component.
> :discourse2: **Hosted by us?** Theme components are available to use on our Standard, Business, and Enterprise plans.
> Last edited by @Moin 2025-07-19T08:10:47Z
>
> > **Check document**
> >
> > Perform check on document:
---
### Author:  [@MichelleBarnett](https://meta.discourse.org/u/MichelleBarnett)
#### Post date: [August 3, 2020, 6:57pm UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/88 "2020-08-03T18:57:45Z")
Iām having a similar issue as a few people mentioned above where the icon is not showing, but I can still click the button. I made the edit to the icon setting so that it says (for instance) āfab-facebook-fā rather than just āfacebook-fā. For Twitter and my other website, I have no issues, but for Facebook and LinkedIn, itās still not working.
---
### Author:  [@MichelleBarnett](https://meta.discourse.org/u/MichelleBarnett)
#### Post date: [August 3, 2020, 7:49pm UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/89 "2020-08-03T19:49:11Z")
I figured out Facebook, but still canāt get LinkedIn. Also, is there any way to make a custom icon? Could I upload my companyās logo and use it as an icon?
---
### Author:  [@dylanh724](https://meta.discourse.org/u/dylanh724)
#### Post date: [August 5, 2020, 1:52am UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/90 "2020-08-05T01:52:58Z")
> [@MichelleBarnett](#):
>
> Iām having a similar issue
[Me too](https://meta.discourse.org/t/missing-custom-header-link-ico-after-update/159800/3) ā with Discord icon.
How come I donāt have āsvg iconsā section in latest version?
I have this:
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [August 5, 2020, 2:24am UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/91 "2020-08-05T02:24:31Z")
That settings screenshot looks like the [Custom Header Links - #84](https://meta.discourse.org/t/custom-header-links/90588/84) component, which is for showing text links not icons.
I can see how the components are named in a confusing way:
- `https://github.com/discourse/discourse-header-links` - icon links (this topic)
- `https://github.com/discourse/discourse-custom-header-links` - text links ([Custom Header Links](https://meta.discourse.org/t/custom-header-links/90588/1))
Maybe you should add icon to this oneās name @Johani?
---
### Author:  [@dylanh724](https://meta.discourse.org/u/dylanh724)
#### Post date: [August 5, 2020, 5:46am UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/92 "2020-08-05T05:46:39Z")
Ah this resolved it, indeed. Yep - super confusing. Rename would rock!
**EDIT:** Recent update also seemed to ninja change discordās class name to include fab- in between it (eg, if youāre wanting to change the icons color; which @OP would make a great native feat - was a bit hard to catch).
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [August 5, 2020, 1:41pm UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/93 "2020-08-05T13:41:28Z")
> [@MichelleBarnett](#):
>
> but still canāt get LinkedIn
For Linkedin you can use `fab-linkedin` as the icon name in this setting
but since that icon is not included in the default set of icons that Discourse uses, you will also need to add it to the other setting in the component.
The result looks like this for me
> [@MichelleBarnett](#):
>
> Could I upload my companyās logo and use it as an icon?
Sure, thereās a section in this topic about adding custom icons.
> [@Introducing Font Awesome 5 and SVG icons](https://meta.discourse.org/t/introducing-font-awesome-5-and-svg-icons/101643):
>
> See also: [We're upgrading our icons to Font Awesome 6!](https://meta.discourse.org/t/were-upgrading-our-icons-to-font-awesome-6/325349) We will shortly merge into master a [branch](https://github.com/discourse/discourse/tree/fontawesome5) that upgrades Discourse to Font Awesome 5.5.0 (the free version) and switches to using SVG icons instead of an icon font. This is a substantial change, with lots of benefits, and one significant change for developers. Here is a quick rundown of the changes: using SVG icons will provide crisper icons, better for accessibility and easier to customize, see [this Github article](https://blog.github.com/2016-02-22-delivering-octicons-with-svg/) for more details sinceā¦
Once you have that setup, youāll be able to use any custom icons you add in this theme component. Please have a look there and let me know if you run into any issues.
> [@awesomerobot](#):
>
> Maybe you should add icon to this oneās name @Johani?
Iāve made that change along with a couple of other implementation improvements here
[https://github.com/discourse-com/discourse-icon-header-links/commit/f6fbef18af2e1a06fcd68c9199df6c337fca2ce9](https://github.com/discourse-com/discourse-icon-header-links/commit/f6fbef18af2e1a06fcd68c9199df6c337fca2ce9)
> [@dylanh724](#):
>
> if youāre wanting to change the icons color
The new update adds unique prefixed classes to each link based on the title you use. So, for example if you use
`facebook, fab-facebook, https://facebook.com, vdm, blank`
the link will have the class
`header-icon-facebook`
The template is `header-icon-ICON-TITLE`
Which you can then target with CSS like so
```scss
.d-header-icons {
.header-icon-facebook svg {
fill: #4267b2;
}
.header-icon-twitter svg {
fill: #1da1f2;
}
// add more icons here
}
```
which would result in something like this
---
### Author:  [@MichelleBarnett](https://meta.discourse.org/u/MichelleBarnett)
#### Post date: [August 5, 2020, 4:51pm UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/94 "2020-08-05T16:51:24Z")
Thank you for your help. I tried using āfab-linkedinā in both the āHeader Linksā and āSvg Iconsā categories. As seen in the picture, it is still not working for whatever reason.
The grey circle is where the LinkedIn logo would be. Any other ideas how to fix it?
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [August 6, 2020, 12:09pm UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/95 "2020-08-06T12:09:28Z")
Iām not entirely sure why thatās not working for. Here are what my settings look like
```plaintext
Facebook, fab-facebook, https://facebook.com, vdm, blank
Twitter, fab-twitter, https://twitter.com, vdm, blank
LinkedIn, fab-linkedin, https://www.linkedin.com, vdm, blank
```
and
```plaintext
fab-facebook
fab-linkedin
fab-twitter
```
and hereās what Iām seeing
Can you please try the same for the linkedin icon and let me know if your issue presists?
---
### Author:  [@MichelleBarnett](https://meta.discourse.org/u/MichelleBarnett)
#### Post date: [August 6, 2020, 5:15pm UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/96 "2020-08-06T17:15:14Z")
This is what I have been trying, and I have tried different icons as well. Here is how I have it currently.
Settings:
Website:
The only ones working are the ones that donāt use āfab-ā, which seems weird. Let me know your thoughts.
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [August 6, 2020, 5:36pm UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/97 "2020-08-06T17:36:02Z")
Hi Michelle,
Since you are a customer, I went in and had a look at your site and fixed the issue there for you. I updated the theme component and set the correct settings for the icons, they should all work now.
---
### Author:  [@MichelleBarnett](https://meta.discourse.org/u/MichelleBarnett)
#### Post date: [August 6, 2020, 5:52pm UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/98 "2020-08-06T17:52:55Z")
It looks great now, thank you!
---
### Author:  [@MichelleBarnett](https://meta.discourse.org/u/MichelleBarnett)
#### Post date: [August 6, 2020, 10:09pm UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/99 "2020-08-06T22:09:07Z")
One more question/ request; I initially had these links opening in a separate tab, but now they are opening in the same tab. The setting is already set to āblankā, how else can I change this?
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [August 7, 2020, 2:27am UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/100 "2020-08-07T02:27:20Z")
This looks like a regression, weāll look into it and have a fix soon.
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [August 7, 2020, 9:09am UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/101 "2020-08-07T09:09:39Z")
> [@pmusaraj](#):
>
> This looks like a regression
Indeed. I accidentally left out the target attribute in the recent changes.
> [@MichelleBarnett](#):
>
> The setting is already set to āblankā, how else can I change this?
No action needed on your side. I fixed the component and updated it on your site. So everything should be all set now. Thanks for reporting the issue š
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [September 25, 2020, 9:13pm UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/102 "2020-09-25T21:13:25Z")
Hi,
Custom icons are on the right of the login and sign up button, and I think they would fit better on the left, as they usually are.
---
### Author:  [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [October 10, 2020, 9:33am UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/103 "2020-10-10T09:33:17Z")
I can get some version 4.7.0 icons from [Font Awesome Icons](https://fontawesome.com/v4.7.0/icons/) to work just by typing a name (e.g. car) in the correct part of āHeader linksā. Some icons donāt show (e.g. fa-comments-o). Some donāt need me to use āSvg iconsā (e.g. home) and some do (e.g. car).
None of the version 5 icons which Iāve tried from [Find Icons with the Perfect Look & Feel | Font Awesome](https://fontawesome.com/icons?d=gallery) have worked. Iāve put the fa- name into āHeader linksā and āSvg iconsā to no effect. The fab-facebook (etc) icons which were there by default do work though.
What am I doing wrong?
_Edit: I edited the first paragraph for accuracy._
---
### Author:  [@rolando](https://meta.discourse.org/u/rolando)
#### Post date: [October 10, 2020, 12:31pm UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/104 "2020-10-10T12:31:42Z")
many thanks for this @Johani . works like a charm and gives me an āaestheticalā solution for linking āback to the siteā (in my case)
i did however, encounter an issue since i am also using the [Left side hamburger menu on mobile](https://meta.discourse.org/t/left-side-hamburger-menu-on-mobile/164513) component which ends up breaking everything on that part of the `.d-header`
any ideas on how can i make both work? would really appreciate it
---
### Author:  [@misterjtc](https://meta.discourse.org/u/misterjtc)
#### Post date: [October 11, 2020, 2:06pm UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/105 "2020-10-11T14:06:26Z")
I am also having an issue getting my icon to show up. Not sure what I am doing wrong. Here is what I have under settings:
This is what I end up with:
---
### Author:  [@rolando](https://meta.discourse.org/u/rolando)
#### Post date: [October 11, 2020, 5:14pm UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/106 "2020-10-11T17:14:52Z")
for the book icon, try without fas-
[Next page](https://meta.discourse.org/t/custom-header-links-icons/86307.md?page=2)