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.

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.