Warning! The Icon component is deprecated. No new features will be added to this component. See each page under Components/Icon section in the navigation to reference old documentation. For any new instances of an icon please use the Icon element.

Custom SVG Icons

Can't find an existing SVG that suits your needs?

Before jumping ahead and adding a new custom SVG icon, please make sure you come and chat with the Bolt team first to see if there's already an existing icon that could get used instead OR if it makes sense to add a new icon to the design system itself!

Adding Custom SVG Icons to Bolt

Note: make sure your custom SVG icon starts with custom- as this is required to ensure names of built-in icons don't collide with custom SVG icons added.

Step 1. Import your custom SVG Icon in a .js file that's compiled by the Bolt build tools. Note: make sure your SVG icon has been already exported for the web (docs coming soon!).

import './assets/icons/custom-users.svg';

Step 2. After recompiling the site's JavaScript, your custom SVG can now be used in Twig, JS, or HTML!

{% include "@bolt-components-icon/icon.twig" with { name: "custom-users", size: "xlarge" } only %}
<bolt-icon name="custom-users" size="xlarge"></bolt-icon>

Adding a Custom SVG Icon - Retain Original Colors

This advanced use case is rarely recommended since it can limit the number of places an SVG icon can get used and prevents the icon's color palette from adjusting based on the location it's used.

Step 1. Import your SVG Icon in a .js file, making sure your icon ends in -colored.svg

import './assets/icons/custom-arrow-left-colored.svg';

Step 2. After recompiling the site's JavaScript, your custom colored SVG can now be used in Twig, JS, or HTML!

{% include "@bolt-components-icon/icon.twig" with { name: "custom-arrow-left-colored", size: "xlarge", } %}
<bolt-icon name="custom-arrow-left-colored" size="xlarge"></bolt-icon>