Overriding native icons

Replace existing FastStore icons with custom SVG designs that match your brand identity.

This guide explains how to override the icons that ship with FastStore by replacing them with your own SVG design — for example, swapping the default outlined heart with a filled one that matches your brand.

If you need to add an icon that doesn't exist in the default set, see Adding custom 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 replacement icon available as an SVG file.
The id of the icon you want to override. You can find it in the Iconography reference.

How override works

To override an icon, you ship your own icons.svg from the store's /public folder containing a modified \<symbol> under the same id the FastStore components reference. During the build, FastStore copies your file on top of the default one, so your version becomes the active icon source.

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 .faststore/public/icons.svg into the 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 instead of copying the base file, your file completely replaces the default one, and FastStore components will stop rendering their icons.

Step 3 - Locate the icon to override

Open /public/icons.svg and find the <symbol> whose id matches the icon you want to replace. For example, to override the shopping cart icon, look for:


_10<symbol id="ShoppingCart" fill="currentColor" viewBox="0 0 256 256">
_10  <path d="M..." stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
_10  <!-- ... more paths ... -->
_10</symbol>

Step 4 - Replace the symbol contents

Replace the paths inside <symbol> with your custom design. Keep the same id (case-sensitive) and, ideally, the same viewBox to preserve consistent sizing:


_10<symbol id="ShoppingCart" viewBox="0 0 256 256">
_10  <!-- Your custom cart paths -->
_10  <path d="M..." stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path>
_10</symbol>

Any difference in the id, including capitalization, will break the override, and FastStore will keep rendering the default icon.

Step 5 - Rebuild your project

Run yarn dev (or yarn build) to see your changes. Every component that uses the icon, for example, <Icon name="ShoppingCart" />, now renders your custom design.