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
- 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
️ A workspace can only have a single app installed that contains the
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.