The VTEX Styleguide provides a default iconography used across all Store Framework components, which is implemented via the Store Icons app.

While these icons are suitable for most stores, you can customize them to better align with your store's branding. Follow the steps below to override the default icons.

Ensure that your Store Theme is using the styles builder at version 1.8.1 or higher.

1. In your Store Theme, create a new folder named iconpacks within the styles folder.
2. Inside the iconpacks folder, create a file named iconpack.svg.
3. Copy the content of the iconpack.svg file and paste it into your iconpack.svg file.

The iconpack.svg file contains all the store's icons, with each icon having a unique id and grouped inside a <g> tag. These ids allow you to reference and modify individual icons.

Each icon is identified by an id within its <g> tag (e.g., hpa-cart for the cart icon). You can reference and modify a specific icon in the store’s code using its fragment identifierl, like #hpa-cart.

To customize an icon, find its corresponding <g> tag by id in the iconpack.svg file and adjust its content (shapes, paths, etc.). You don't need to recreate the entire icon — just modify the parts you want to change.

For example, to customize the cart icon (hpa-cart), you only need to modify the elements within its <g> tag:

To find each icon’s unique id, refer to the Icon Pack list This allows you to customize individual icons without affecting the entire icon set.

Once you've made the desired changes, link your app to see the updated icons reflected in the store.

If the changes don't appear after linking, ensure the styles builder version is 1.8.1 or higher.

• Icons should not exceed 20x20 pixels.
• Each workspace can only have one app installed that includes iconpack customizations.