Bolt Design System

Chip Icons

Icons can be used within a chip.

Important Notes:

When using icon-only chips, make sure to still pass text. The text will act as a label for the icon.

Demo

Icon before

Icon after

Twig

// Regular chip with icon
{% include '@bolt-components-chip/chip.twig' with {
  text: 'Chip with icon',
  icon: {
    name: 'lock',
    position: 'after',
  },
} only %}

// Icon-only chip
{% include '@bolt-components-chip/chip.twig' with {
  text: 'Chip with icon',
  icon: {
    name: 'lock',
  },
  iconOnly: true,
} only %}

HTML

// Regular chip with icon
<bolt-chip><bolt-icon name="lock" slot="before"></bolt-icon>Chip with icon</bolt-chip>

// Icon-only chip
<bolt-chip icon-only><bolt-icon name="lock" slot="before"></bolt-icon>Chip with icon</bolt-chip>