# Custom Header Links (icons)

**URL:** https://meta.discourse.org/t/custom-header-links-icons/86307
**Category:** Theme component
**Tags:** official, custom-header-icons
**Created:** [4월 27, 2018, 2:00오후 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307 "2018-04-27T14:00:38Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [4월 27, 2018, 2:00오후 UTC](https://meta.discourse.org/t/custom-header-links-icons/86307/1 "2018-04-27T14:00:38Z")

</div>

| | | |
| --- | --- | --- |
| :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. 👍
> 
> [❓&nbsp; **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") [🐛&nbsp; **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") [👀&nbsp; **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)") [💡&nbsp; **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**

 ![Capture3](https://global.discourse-cdn.com/meta/original/3X/9/1/914bac903b1e05b669520d450b2f7f3106459609.PNG)

**Mobile**

 ![Capture](https://global.discourse-cdn.com/meta/original/3X/e/e/eedc0cb90e0b1e786730e85dc910c17c7e88187b.PNG)

### 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:

---

_[View the full topic](https://meta.discourse.org/t/custom-header-links-icons/86307)._