Icons

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`
`mic`	`minus`	`more-horizontal`	`more-vertical`
`mouse-pointer`	`move-down`	`move-left`	`move-right`
`move-up`	`paintbrush`	`panel-right`	`panel-top`
`pen-line`	`pen-tool`	`pencil`	`play`
`play-circle`	`plus`	`puzzle`	`quote`
`refresh-cw`	`rotate-ccw`	`row-delete`	`rows`
`search`	`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.

Template icons in the new interface

A coming version of Strife Studio has a new interface. It draws its icons from another library, Hugeicons, and shows a template's icon when it is one of these 44 names from the list above:

align-left, align-right, archive, arrow-up-down, brain, circle, code, column-delete, edit, eraser, external-link, file, filter, folders, github, globe, help-circle, home, image, inbox, layers, layout-dashboard, layout-grid, lock, more-horizontal, more-vertical, move-left, move-right, pencil, play, play-circle, puzzle, row-delete, settings, shapes, slack, sliders-horizontal, table, tag, thumbs-down, thumbs-up, trash-2, user, zap.

For any other name it shows a generic cube instead. When one of these names suits your template, use it, and the icon looks right in both interfaces. Which names the new interface recognises can still change before it is released.