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.
- In your
store-themecode, create a new folder named
iconpacks/, create the file
- Copy the content from VTEX'S default iconpack.svg and paste it in the
️ The maximum size allowed for icons is
This is how your
styles/ folder structure should look like after you've accomplished that:
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
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 builderis not up-to-date with this functionality. Make sure your store has it installed at version 1.8.1 or higher.
Updated 13 days ago