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><span slot="before"><!-- Icon or image markup --></span>Chip with icon</bolt-chip>

// Icon-only chip
<bolt-chip icon-only><span slot="before"><!-- Icon or image markup --></span>Chip with icon</bolt-chip>