> ## Documentation Index
> Fetch the complete documentation index at: https://swish.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Icons

> Replace built-in icons with custom SVG strings.

Every icon in the Swish UI can be replaced with a custom SVG. Pass a map of icon keys to SVG strings under `ui.icons`.

```js theme={null}
window.SwishOptions = {
  ui: {
    icons: {
      heart: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>',
    },
  },
};
```

Omitted keys use the built-in SVG. The custom value must be a valid SVG string that the browser can render inline. Each SVG is sanitised before it renders: scripts, event handlers, `javascript:` links and elements that are not SVG are removed. If nothing drawable is left, the built-in icon shows instead.

> [!TIP]
>
> Use `stroke="currentColor"` in your SVGs so icons inherit the surrounding text color and respond to design token color changes.

## Available icons

### Standard icons

These icons appear throughout the UI in buttons, headers, menus, and cards.

| Key | Description |
| - | - |
| `arrow-left` | Left arrow. |
| `arrow-right` | Right arrow. |
| `back` | Back navigation. |
| `bookmark` | Bookmark indicator. |
| `cart` | Shopping cart. |
| `check` | Checkmark. |
| `check-circle` | Circled checkmark. |
| `chevron-down` | Downward chevron. |
| `chevron-left` | Left chevron. |
| `chevron-right` | Right chevron. |
| `chevron-up` | Upward chevron. |
| `clipboard` | Clipboard (copy action). |
| `delete` | Delete/trash. |
| `edit` | Edit/pencil. |
| `external` | External link. |
| `heart` | Heart (save button). |
| `alert-circle` | Alert/warning circle. |
| `menu-horizontal` | Horizontal dots menu. |
| `minus` | Minus/decrease. |
| `notification` | Notification bell. |
| `person` | Person/account. |
| `plus` | Plus/increase. |
| `plus-circle` | Circled plus. |
| `private` | Lock (private list). |
| `public` | Globe (public list). |
| `select` | Selection indicator. |
| `share` | Share action. |
| `x` | Close/dismiss. |

### Navigation icons

These larger icons appear in the drawer footer navigation bar. They are used when `showIcons` is enabled on the `drawer-footer` section.

| Key | Description |
| - | - |
| `large-chat` | Chat tab. |
| `large-heart` | Saves tab. |
| `large-home` | Home tab. |
| `large-list` | Lists tab. |
| `large-notification` | Notifications tab. |
| `large-order` | Orders tab. |
| `large-profile` | Profile tab. |

## Further reading

* [Design](https://swish.app/docs/guides/customize/appearance/design.md) for visual design tokens
* [Full defaults reference](https://swish.app/docs/guides/customize/defaults.md) for a copy-paste block with all icon keys


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.