# Custom icons

![](https://docs-assets.foxecom.app/motrix-theme/59a81968-f161-4465-a016-a5ef2de46f3f.png)

Some destinations are worth a permanent spot in the header but do not deserve a word of menu space — a store locator, a wishlist, a support line. An icon gives them that spot: recognisable at a glance, and narrow enough to sit next to the icons customers already use.

## Where they appear

The same icons show on both desktop and mobile, but in different places.

* Desktop: On the right, at the start of the icon group, before search, account, and cart.
* Mobile: On the left, next to the menu button, keeping the right side for search and cart.

This holds on every [header layout](https://docs.foxecom.com/motrix-theme/global-sections/header#layout), so switching between Logo left, Logo center, and Menu top does not move them.

## How is this different from Custom links?

<Cards columns="2">
  <Card title="Custom icons" subtitle="Use this" description="When the destination has an obvious symbol and customers need it on every device. Icons appear on desktop and mobile." fields="icon,subtitle,image,title,description" />

  <Card title="Custom links" subtitle="Use instead if" description="When the link needs naming in words, or you want one action styled as a button. Desktop only." href="https://docs.foxecom.com/motrix-theme/global-sections/header/custom-links" fields="icon,subtitle,image,title,description" />
</Cards>

## Add an icon

1. In the theme editor, open the **Header** section and select the **Custom icons** block.
2. Click **Add block** and choose **Custom link**.
3. Set its label, link, and icon.
4. Click **Save**.

Drag the items inside the block to reorder them. They appear in the header in the order they sit in the sidebar.

![](https://docs-assets.foxecom.app/motrix-theme/872c8ef3-d2c0-4097-9d3c-27e42c8dbd7b.png)

## Custom link settings

### Content

<Table widths="30%">
  | Setting        | What it does                                                                  |
  | -------------- | ----------------------------------------------------------------------------- |
  | **Label**      | Names the icon. Used as its accessible name whether or not the text is shown. |
  | **Link**       | Where the icon takes customers — a page, a collection, or any URL.            |
  | **Icon**       | Select the icon.                                                              |
  | **Image icon** | Upload your own image to use in place of a built-in icon.                     |
</Table>

<Hint type="info">
  Fill in Label even when you keep the icon unlabelled. It is what screen readers announce, and an icon with no name is a link nobody can identify.
</Hint>

### Apprearance

<Table widths="30%">
  | Setting                   | What it does                                                                |
  | ------------------------- | --------------------------------------------------------------------------- |
  | **Show label on desktop** | Displays the label text beside the icon on desktop. Mobile stays icon only. |
</Table>

<Tabs>
  <Tab title="Show label: On">
    ![](https://docs-assets.foxecom.app/motrix-theme/00a939e7-3c51-4411-831d-cf2a9aa083aa.png)
  </Tab>

  <Tab title="Show label: Off">
    ![](https://docs-assets.foxecom.app/motrix-theme/fb504316-18e4-4a64-9e28-c32abf533c8a.png)
  </Tab>
</Tabs>

<Hint type="success">
  Turn this on for a destination whose symbol is not self-explanatory, and leave it off for the familiar ones. Mixing labelled and unlabelled icons in the same row tends to look accidental, so pick one approach for all of them.
</Hint>

## Tips

* One or two is plenty. Search, account, and cart already occupy that corner, and a fourth or fifth icon makes the row hard to read at a glance.
* Upload an image icon only when nothing in the set fits. A built-in icon inherits your header colours and stays sharp on every screen; an uploaded one does neither unless you prepare it carefully.
* Check the mobile header after adding one. It sits next to the menu button, and two icons there start to crowd the logo on narrow phones.