Customizing your store's icons

Introduction

VTEX Styleguide has a default iconography that is used in all VTEX IO store's components. Their implementation is imported via the Store Icons app.

Although these can satisfy your store’s needs, you may want to override and customize default icons according to your store's identity. If so, simply follow the steps below.

Step by step

1. In your store-theme code, create a new folder named iconpacks/ within styles/.
2. Inside iconpacks/, create the file iconpack.svg.
3. Copy the content from VTEX'S default iconpack.svg and paste it in the iconpack.svg file.

⚠️

The maximum size allowed for icons is 20x20.

⚠️

A workspace can only have a single app installed that contains the iconpack customization.

This is how your styles/ folder structure should look like after you've accomplished that:

The iconpack.svg file will implement SVG frament identifiers, allowing you to simply change the part of the code that declares the icon's g tag instead of customize itself.

For instance, let's customize the cart icon (hpa-cart) changing only its g content:

After linking your app, you should see the changes in the browser:

Check out each icon's ID by accessing the Icon Pack list.

⚠️

If you've linked your code and haven't seen your changes, it may be because your Styles builder is not up-to-date with this functionality. Make sure your store has it installed at version 1.8.1 or higher.