Adding custom icons

Add new SVG icons to your FastStore project when the icon you need isn't available in the default FastStore set.

This guide explains how to add new SVG icons to your FastStore project when the icon you need isn't part of the default FastStore icon set, such as a WhatsApp icon for customer support.

If you want to replace an existing FastStore icon with a different design, see Overriding native icons.

Before you begin

Make sure you have:

A FastStore project set up and running locally. If you don't, check the Setting up the development environment guide.
The custom icon you want to add available as an SVG file.

How the customization works

To add a custom icon, you ship your own icons.svg from your store's /public folder. During the build, FastStore copies it on top of the default file, so your version becomes the active icon source. Make sure it includes both the default symbols and your new ones.

Instructions

Step 1 - Create the `/public` folder

If your project doesn't already have a /public folder at the root level, create one:


_10📂 your-store
_10├── 📂 src
_10├── 📄 discovery.config.js
_10├── 📄 package.json
_10└── 📂 public         ← Create this folder

Step 2 - Copy the base `icons.svg` file

To preserve every default icon, copy the existing file as your starting point:

Run yarn dev once to generate the .faststore folder in your project.
Copy the file from .faststore/public/icons.svg.
Paste it into your store's /public folder.


_10📂 your-store
_10├── 📂 src
_10├── 📄 discovery.config.js
_10├── 📄 package.json
_10└── 📂 public
_10    └── 📄 icons.svg   ← Paste the base file here

If you create an empty icons.svg without copying the base file first, your file completely replaces the default one, and FastStore components will stop rendering their icons.

Step 3 - Prepare your custom icon

Open the SVG file with your icon and adjust the markup so it works as a symbol entry:

Change the outer <svg> tag to <symbol>.
Add a unique id attribute. This is the name you'll use to reference the icon in the Icon component.
Remove hardcoded fill, stroke-width, width, height, and color attributes so the icon can be styled through CSS.
Use fill="currentColor" or stroke="currentColor" on the paths so the icon inherits the surrounding text color.
Keep the viewBox attribute to preserve correct scaling.

Step 4 - Add the icon to `icons.svg`

Open your /public/icons.svg file and add the prepared <symbol> inside the root <svg> element, alongside the existing symbols.

Example: Adding a WhatsApp icon


_10<svg style="display:none">
_10  <!-- ... existing icons ... -->
_10
_10  <!-- Your custom icon -->
_10  <symbol id="WhatsApp" viewBox="0 0 256 256">
_10    <path d="M128,24A104,104,0,0,0,36.18,176.88L24.83,210.93a16,16,0,0,0,20.24,20.24l34.05-11.35A104,104,0,1,0,128,24Zm0,192a87.87,87.87,0,0,1-44.06-11.81,8,8,0,0,0-4-1.08,7.85,7.85,0,0,0-2.53.42L40,216,52.47,178.6a8,8,0,0,0-.66-6.54A88,88,0,1,1,128,216Z" fill="currentColor"/>
_10  </symbol>
_10</svg>

Step 5 - Use the icon in your components

Import the Icon component from @faststore/ui and reference your icon by the id you defined:


_10import { Icon } from '@faststore/ui'
_10
_10function CustomerSupport() {
_10  return (
_10    <a href="https://wa.me/<YOUR_PHONE_NUMBER>">
_10      <Icon name="WhatsApp" />
_10      <span>Contact us on WhatsApp</span>
_10    </a>
_10  )
_10}

Step 6 - Rebuild your project

Run yarn dev (or yarn build) to see your changes.

Before you begin

How the customization works

Instructions

Step 1 - Create the /public folder

Step 2 - Copy the base icons.svg file