Icons | Strife Docs

Strife ships with a built-in icon library. Icons are referenced by their name as a string — for example "info", "chevron-right", or "help-circle". Names are case-sensitive and use kebab-case.

Where icons are used

The most common place to set an icon is on a template. Every template in Strife can declare an icon property that is used for display in Strife Studio.

JSON

{
  "name": "...",
  "icon": "home",
  "editors": [ ... ]
}

See Defining Templates with JSON for the full template structure.

Icons can also be set on individual field values in these places:

Combo Box header (editor.attributes.icon) and options (editor.options.items[].icon)
Multi Select options (editor.options.options[].icon)
Radio Group items (editor.options.items[].icon)
Hint field header (editor.attributes.icon)

In live preview, render an icon by passing its name to the str-icon component:

HTML

<str-icon name="info"></str-icon>

Complete list


`activity`	`ai`	`align-center`	`align-left`
`align-right`	`archive`	`arrow-left-to-line`	`arrow-right`
`arrow-right-to-line`	`arrow-up-down`	`at-sign`	`ban`
`bell`	`bell-off`	`between-horizontal-end`	`bin`
`bold`	`book`	`brain`	`case-sensitive`
`chart-no-axes-column`	`chart-pie`	`check`	`check-circle-2`
`chevron-down`	`chevron-left`	`chevron-right`	`chevron-up`
`chevrons-up-down`	`circle`	`circle-question-mark`	`circle-slash`
`clipboard-list`	`clock`	`code`	`column-delete`
`columns`	`copy`	`corner-left-up`	`corner-up-left`
`database-zap`	`download`	`draft`	`edit`
`eraser`	`external-link`	`file`	`file-text`
`filter`	`folder`	`folder-plus`	`folders`
`gallery-horizontal`	`github`	`globe`	`grip-vertical`
`hand`	`heading-1`	`heading-2`	`heading-3`
`help-circle`	`home`	`image`	`inbox`
`info`	`insert-column-after`	`insert-column-before`	`insert-row-above`
`insert-row-below`	`italic`	`languages`	`layers`
`layout`	`layout-dashboard`	`layout-grid`	`layout-list`
`layout-panel-left`	`layout-panel-top`	`layout-tabs`	`layout-template`
`link`	`list`	`list-checks`	`list-collapse`
`list-filter`	`list-ordered`	`list-todo`	`loader`
`lock`	`maximize`	`menu`	`message-circle-more`
`settings`	`shapes`	`sidebar`	`slack`
`sliders`	`sliders-horizontal`	`smile-plus`	`square-dashed-kanban`
`stretch-horizontal`	`stretch-vertical`	`strikethrough`	`table`
`table-header`	`tag`	`team`	`thumbs-down`
`thumbs-up`	`tool-case`	`trash-2`	`type`
`underline`	`upload`	`user`	`video`
`wrench`	`x`	`x-circle`	`zap`

If the name you use is not in this list, the icon slot will render empty. Icons are sourced from @nimble-initiatives/webcomponents and follow the Lucide icon style.