Icon

<caos-icon>

one glyph from the platform’s single vocabulary, placed on a page at a step of the size scale

May be placed on a record page, an app’s home page and a page inside an app.

Inputs

Name	Attribute	Description	Type	Default	Required
`name`	`name`, markup only	Which glyph to draw, by its name in the platform vocabulary. A name the vocabulary does not have draws nothing, not an empty box.	text — one of user, book-open, pin, pin-off, info, success, warning, danger, close, chevron, more, search, lock, record, trend-up, trend-down, trend-flat, computed, overridden, inherited, synced, building, users, folder, file-text, clipboard, files, user-check, shield-check, layers, layout-grid, layout-template, boxes, inbox, settings, list, share, house, building-2, folder-kanban, clipboard-check, file-clock, user-round, sparkles, table-2, kanban, columns-2, plus, refresh-cw, sliders-horizontal, bold, italic, underline, strikethrough, list-ordered, link, remove-formatting, check, message-square, arrow-up-right, clock, eye-off, chevron-up, chevron-right, chevron-left, sun, moon, eye, mail, shield, log-out, square-pen, message-square-text, download, package, circle-help, workflow, file-cog, bot, plug, database, terminal, bug, scroll-text, paperclip, flag	none declared	Optional
`size`	`size`, markup only	The square box the glyph fills, from the platform size scale: xs, sm, md, lg or xl.	text — one of xs, sm, md, lg, xl	sm	Optional
`label`	`label`, markup only	What the icon means, for someone who cannot see it. Leave it empty when words beside the icon already say it; the icon is then hidden from assistive technology.	text	none declared	Optional

Events

This piece raises no events.

Slots

Nothing goes inside this piece.

Styling hooks

Design token	What it controls
`--caos-size-xs-height`	The length of the square box at size xs.
`--caos-size-sm-height`	The length of the square box at size sm.
`--caos-size-md-height`	The length of the square box at size md.
`--caos-size-lg-height`	The length of the square box at size lg.
`--caos-size-xl-height`	The length of the square box at size xl.

Methods

Nothing else drives this piece by calling it.

Readable state

Nothing on this piece can be read back.

Styling parts

Part	Which piece of it	When it is there
`::part(icon)`	The square box the glyph is drawn in.	Always

When to use it

A glyph stands for something on its own, such as a section, a kind of record or a state, and the page author decides it belongs on the page.

What to use instead

Icons — You want to see every glyph the vocabulary has, with its name. That is the reference sheet, not something to place.
Avatar — The picture stands for a particular person, with their photo or initials.
StatusDot — The mark is a state colour rather than a symbol.

Accessibility

With a label, the icon is an image with that name. Without one it is hidden from assistive technology entirely, which is right when words beside it already say what it means and wrong when the icon is the only thing saying it: then give it a label. A name the vocabulary does not have draws nothing, and the icon is then hidden even with a label, so a screen reader never announces an empty image. The icon is never focusable and never a control. An icon that does something belongs inside a button.

Examples

A glyph

One glyph at the default size, labelled for a screen reader.

{
  "id": "example",
  "section": "A glyph",
  "columns": 1,
  "items": [
    {
      "id": "icon_1",
      "type": "component",
      "key": "icon",
      "inputs": {
        "name": "building-2",
        "label": "Account"
      }
    }
  ]
}

<caos-icon name="building-2" label="Account"></caos-icon>

The size scale

The same glyph at every step of the platform size scale, from xs to xl.

{
  "id": "example",
  "section": "The size scale",
  "columns": 1,
  "items": [
    {
      "id": "icon_1",
      "type": "component",
      "key": "icon",
      "inputs": {
        "name": "folder-kanban",
        "size": "xs"
      }
    },
    {
      "id": "icon_2",
      "type": "component",
      "key": "icon",
      "inputs": {
        "name": "folder-kanban",
        "size": "sm"
      }
    },
    {
      "id": "icon_3",
      "type": "component",
      "key": "icon",
      "inputs": {
        "name": "folder-kanban",
        "size": "md"
      }
    },
    {
      "id": "icon_4",
      "type": "component",
      "key": "icon",
      "inputs": {
        "name": "folder-kanban",
        "size": "lg"
      }
    },
    {
      "id": "icon_5",
      "type": "component",
      "key": "icon",
      "inputs": {
        "name": "folder-kanban",
        "size": "xl"
      }
    }
  ]
}

<caos-icon name="folder-kanban" size="xs"></caos-icon>
<caos-icon name="folder-kanban" size="sm"></caos-icon>
<caos-icon name="folder-kanban" size="md"></caos-icon>
<caos-icon name="folder-kanban" size="lg"></caos-icon>
<caos-icon name="folder-kanban" size="xl"></caos-icon>