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:

iconpack-foldericonpack-folder

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:

imageimage

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

imageimage

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.


Did this page help you?