Icon

Preview Code

375 768 Full

Open

html

<!-- Each tile is <aparte-icon name="…">. -->
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: var(--aparte-space-3)">
  <span class="aparte-tag"><aparte-icon name="copy"></aparte-icon><span class="aparte-tag__label">copy</span></span>
  <span class="aparte-tag"><aparte-icon name="check"></aparte-icon><span class="aparte-tag__label">check</span></span>
  <span class="aparte-tag"><aparte-icon name="send"></aparte-icon><span class="aparte-tag__label">send</span></span>
  <span class="aparte-tag"><aparte-icon name="loading"></aparte-icon><span class="aparte-tag__label">loading</span></span>
  <span class="aparte-tag"><aparte-icon name="error"></aparte-icon><span class="aparte-tag__label">error</span></span>
  <span class="aparte-tag"><aparte-icon name="expand"></aparte-icon><span class="aparte-tag__label">expand</span></span>
  <span class="aparte-tag"><aparte-icon name="collapse"></aparte-icon><span class="aparte-tag__label">collapse</span></span>
  <span class="aparte-tag"><aparte-icon name="terminal"></aparte-icon><span class="aparte-tag__label">terminal</span></span>
  <span class="aparte-tag"><aparte-icon name="paperclip"></aparte-icon><span class="aparte-tag__label">paperclip</span></span>
  <span class="aparte-tag"><aparte-icon name="image"></aparte-icon><span class="aparte-tag__label">image</span></span>
  <span class="aparte-tag"><aparte-icon name="file"></aparte-icon><span class="aparte-tag__label">file</span></span>
  <span class="aparte-tag"><aparte-icon name="scrollDown"></aparte-icon><span class="aparte-tag__label">scrollDown</span></span>
  <span class="aparte-tag"><aparte-icon name="retry"></aparte-icon><span class="aparte-tag__label">retry</span></span>
  <span class="aparte-tag"><aparte-icon name="edit"></aparte-icon><span class="aparte-tag__label">edit</span></span>
  <span class="aparte-tag"><aparte-icon name="thumbUp"></aparte-icon><span class="aparte-tag__label">thumbUp</span></span>
  <span class="aparte-tag"><aparte-icon name="thumbDown"></aparte-icon><span class="aparte-tag__label">thumbDown</span></span>
  <span class="aparte-tag"><aparte-icon name="prevBranch"></aparte-icon><span class="aparte-tag__label">prevBranch</span></span>
  <span class="aparte-tag"><aparte-icon name="nextBranch"></aparte-icon><span class="aparte-tag__label">nextBranch</span></span>
  <span class="aparte-tag"><aparte-icon name="tool"></aparte-icon><span class="aparte-tag__label">tool</span></span>
  <span class="aparte-tag"><aparte-icon name="close"></aparte-icon><span class="aparte-tag__label">close</span></span>
  <span class="aparte-tag"><aparte-icon name="stop"></aparte-icon><span class="aparte-tag__label">stop</span></span>
  <span class="aparte-tag"><aparte-icon name="pause"></aparte-icon><span class="aparte-tag__label">pause</span></span>
  <span class="aparte-tag"><aparte-icon name="info"></aparte-icon><span class="aparte-tag__label">info</span></span>
  <span class="aparte-tag"><aparte-icon name="archive"></aparte-icon><span class="aparte-tag__label">archive</span></span>
  <span class="aparte-tag"><aparte-icon name="unarchive"></aparte-icon><span class="aparte-tag__label">unarchive</span></span>
  <span class="aparte-tag"><aparte-icon name="download"></aparte-icon><span class="aparte-tag__label">download</span></span>
  <span class="aparte-tag"><aparte-icon name="more"></aparte-icon><span class="aparte-tag__label">more</span></span>
  <span class="aparte-tag"><aparte-icon name="pin"></aparte-icon><span class="aparte-tag__label">pin</span></span>
  <span class="aparte-tag"><aparte-icon name="trash"></aparte-icon><span class="aparte-tag__label">trash</span></span>
  <span class="aparte-tag"><aparte-icon name="menu"></aparte-icon><span class="aparte-tag__label">menu</span></span>
  <span class="aparte-tag"><aparte-icon name="alertTriangle"></aparte-icon><span class="aparte-tag__label">alertTriangle</span></span>
</div>

<aparte-icon name="copy"> draws one of the glyphs the chat itself uses, from markup, with no script of your own. A glyph carries no size: it takes --aparte-icon-size from its container, so the same drawing serves a small remove button and a large toolbar. --sm, --lg and --xl change it on one icon.

An icon provider (aparteGlobalConfig.setIconProvider()) replaces the set, for the chat and for every <aparte-icon> at once. The full reference, with the extended set behind @aparte/core/icons, is on the icons page.

Usage

Vanilla

html

<aparte-icon name="…"></aparte-icon>

React

tsx

<aparte-icon name="…"></aparte-icon>

The aparte-* tags are typed JSX intrinsics as soon as you import from @aparte/react.

Vue

vue

<template>
  <aparte-icon name="…"></aparte-icon>
</template>

Declared through Vue’s GlobalComponents, so vue-tsc checks the tag in any template.

Svelte

svelte

<aparte-icon name="…"></aparte-icon>

Declared through SvelteHTMLElements, so svelte-check covers the attributes and the on: handlers.

Angular

ts

import { AparteIconDirective } from '@aparte/angular';

html

<aparte-icon name="…"></aparte-icon>

A standalone directive whose selector IS the tag, so the real element sits in the template — @if, @for and content projection all reach it — and no CUSTOM_ELEMENTS_SCHEMA is needed.

Installation and the framework-specific traps: React · Vue · Svelte · Angular.

Customize

Variable	Default
--aparte-icon-size	calc(1rem * var(--aparte-font-scale))
--aparte-icon-size-sm	calc(0.75rem * var(--aparte-font-scale))
--aparte-icon-size-lg	calc(1.125rem * var(--aparte-font-scale))
--aparte-icon-size-xl	calc(1.25rem * var(--aparte-font-scale))

API

<aparte-icon> · class AparteIcon

Attributes

Attribute	Description
name	Which glyph to draw. One of the names setIconProvider accepts; an unknown name draws nothing rather than a broken-image box.

CSS variables

Variable	Default	Description
--aparte-icon-size	calc(1rem * var(--aparte-font-scale))	Width and height. --sm/--lg/--xl set it.

Classes

.aparte-icon · .aparte-icon--lg · .aparte-icon--sm · .aparte-icon--xl · .aparte-icon-spin

Accessibility

• The drawing is hidden from screen readers: an icon beside a label is decoration. When the icon is the only content of a button, name the button with aria-label.

Related

• Button — where most icons sit.
• Icons reference — every name, and how to replace the set.