Skip to main content
⌘K
Last modified: 12/Jan/2026

Adding new icons

All the icon-related sources are in the

./src/icons
folder. Within that there is an
svg
folder with the SVG source files.

An SVG source should look like this:

<svg viewBox="0 0 24 24" fill="none">
  <path d="M12 9.14286H8.14286V13H..."/>
</svg>
  1. Put the SVG file into the ./src/icons/svg
  2. Run $ npm run tidy-up-svg-icons to remove unnecessary group tags and attributes
  3. Run $ npm run generate-icons to create React components from the SVG files
  4. Release the changes

#Background

We use SVGO library to tidy up SVG sources and SVGR to create React components from SVG files.

There is an additional step in the process: we regenerate the typescript types at React component generation, so we have proper IntelliSense suggestions when using the

Icon
component.

#See also