Icon Use Case: Custom SVG Custom SVG can be used instead to render an icon that is not available in the design system. Important Notes: When creating a custom SVG, start with a 32px by 32px artboard in the design tool (Adobe Illustrator, Sketch, etc.). Make sure all layers have been converted to objects, meaning there is no stroke, only shapes with color fill. Combine all objects if they visually connect (i.e. create one big shape). Set the object’s fill color to #151619. Set the widest side to 32px and center the icon within the artboard. Save the SVG and then use imgoptim or another tool to minify it. Lastly: If you choose a Twig usage: Add the element relevant attributes {{ attributes.addClass(classes)|without('aria-hidden') }} aria-hidden="true" to the <svg> HTML element and save it as a Twig file. Then you can display the icon using include statement by passing the icon source path to the custom_icon_path prop. If you choose a HTML usage: Add the element class class="e-bolt-icon" and relevant modifier classes, and add the attribute aria-hidden="true" to the <svg> HTML element. Then you can display the icon using the modified <svg> markup. Demo
Twig
{% include '@bolt-elements-icon/icon.twig' with {
  custom_icon_path: 'full/path/to/custom-icon-file.twig',
} only %}
HTML
<svg class="e-bolt-icon e-bolt-icon--xlarge e-bolt-icon--orange" aria-hidden="true" viewBox="0 0 496 512">
  <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zM136 240c0-9.3 4.1-17.5 10.5-23.4l-31-9.3c-8.5-2.5-13.3-11.5-10.7-19.9 2.5-8.5 11.4-13.2 19.9-10.7l80 24c8.5 2.5 13.3 11.5 10.7 19.9-2.1 6.9-8.4 11.4-15.3 11.4-.5 0-1.1-.2-1.7-.2.7 2.7 1.7 5.3 1.7 8.2 0 17.7-14.3 32-32 32S136 257.7 136 240zm168 154.2c-27.8-33.4-84.2-33.4-112.1 0-13.5 16.3-38.2-4.2-24.6-20.5 20-24 49.4-37.8 80.6-37.8s60.6 13.8 80.6 37.8c13.8 16.5-11.1 36.6-24.5 20.5zm76.6-186.9l-31 9.3c6.3 5.8 10.5 14.1 10.5 23.4 0 17.7-14.3 32-32 32s-32-14.3-32-32c0-2.9.9-5.6 1.7-8.2-.6.1-1.1.2-1.7.2-6.9 0-13.2-4.5-15.3-11.4-2.5-8.5 2.3-17.4 10.7-19.9l80-24c8.4-2.5 17.4 2.3 19.9 10.7 2.5 8.5-2.3 17.4-10.8 19.9z" />
</svg>