# Brand Header

**URL:** https://meta.discourse.org/t/brand-header/77977
**Category:** Theme component
**Tags:** official, brand-header
**Created:** [January 14, 2018, 6:27am UTC](https://meta.discourse.org/t/brand-header/77977 "2018-01-14T06:27:03Z")
**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: [January 14, 2018, 6:27am UTC](https://meta.discourse.org/t/brand-header/77977/1 "2018-01-14T06:27:03Z")

</div>

| | | |
| --- | --- | --- |
| :discourse2: | **Summary** | **Brand Header** adds an extra top header for branding with your logo, navigation links, and social icons for both mobile and desktop views. Brand logo can be an image or text. |
| 👓 | **Preview** | [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/brand-header) |
| 🛠 | **Repository Link** | [https://github.com/discourse/discourse-brand-header](https://github.com/discourse/discourse-brand-header) |
| 📖 | **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=brand-header "Ask for support on configuring and using Brand Header") [🐛&nbsp; **Bug**](https://meta.discourse.org/new-topic?category_id=1&tags=brand-header "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=brand-header "Discussion about the user interface of Brand Header, and how features are presented (including language and UI elements)") [💡&nbsp; **Feature**](https://meta.discourse.org/new-topic?category_id=2&tags=brand-header "Discussion about how existing Brand Header features can be improved or enhanced, and how proposed new features could work")

### Features

Desktop preview:

 ![discourse-brand-header](https://global.discourse-cdn.com/meta/original/3X/5/c/5ca65e0fa9f9197e6f7a523c7e4c44bd097b9e80.PNG)

Mobile preview:

 ![discourse-brand-header-mobile](https://global.discourse-cdn.com/meta/original/3X/8/c/8c2b50992578c801144736b650ba4442b86f2563.PNG)

### Settings

| Name | Description |
| --- | --- |
| brand name | |
| website url | |
| mobile logo url | |
| links | Text links to be displayed in the header |
| icons | Icon links to be displayed in the header |
| custom font awesome icons | List of FontAwesome 6 icons used in this theme component |
| show bar on mobile | |
| plugin outlet | |

  

### Using Font Awesome 6 Icons

To allow the Font Awesome 6 Icons to correctly display in this theme component, you will need to add them to 3 places in Discourse:

1. The `svg icon subset` Site Setting
2. The `custom font awesome icons` setting in the component
3. The `icons` setting in the component

Additionally, for some Font Awesome 6 Icons, you will need to specify a `fa` or `fab` prefix with the icon name (Ex: “fab-bluesky”), due to some icons being part of a specific subset of icons. See [We’re upgrading our icons to Font Awesome 6!](https://meta.discourse.org/t/were-upgrading-our-icons-to-font-awesome-6/325349) for details about this usage.

Once you’ve added those icons in all three places, you should see them correctly displayed in the brand header theme component.

> :discourse2: **Hosted by us?** Theme components are available to use on our Standard, Business, and Enterprise plans.

> Last edited by @SaraDev 2025-01-02T20:46:25Z
> 
> > **Check document**
> >
> > Perform check on document:

---

_[View the full topic](https://meta.discourse.org/t/brand-header/77977)._