Icons - Swish Docs

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.

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.

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.

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 for visual design tokens
Full defaults reference for a copy-paste block with all icon keys