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:

iconpack-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:

image

Linkyour code and you should see your change through your browse:

image

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.
Edit this page on GitHub