Icon Pack list
Check out the available icons to use in your store described in Store Icon guide.
Usage
Add the vtex.store-icons to your dependencies in manifest.json.
This is an example on how to use it:
_21 import React from 'react'_21_21 import Icon from 'vtex.store-icons'_21_21 const IconSearch = ({ ...props }) => {_21 return <Icon id="hpa-search" {...props} />_21 }_21_21 IconSearch.propTypes = {_21 /** Icon size, aspect ratio 1:1 */_21 size: PropTypes.number,_21 /** Icon viewBox. Default 0, 0, 16, 16 */_21 viewBox: PropTypes.string,_21 /** Define if will be used a active or muted className */_21 isActive: PropTypes.bool,_21 /** Active color class */_21 activeClassName: PropTypes.string,_21 /** Muted color class */_21 mutedClassName: PropTypes.string,_21 }_21 export default IconSearch
SVG Prefixes
The following prefixes help in understanding the meaning of a specific icon.
| Prefix | Meaning |
|---|---|
| bnd | Brand |
| hpa | High Priority Actions |
| mpa | Middle Priority Actions |
| sti | Status Indicator |
| inf | Informative |
| nav | Navigation |
SVG Fragments
| Icon | ID |
|---|---|
 | bnd-logo |
 | mpa-expand |
 | hpa-arrow-back |
 | hpa-arrow-from-bottom |
 | hpa-arrow-to-bottom |
 | hpa-calendar |
 | hpa-cart |
 | hpa-delete |
 | hpa-hamburguer-menu |
 | hpa-location-marker |
 | hpa-play |
 | hpa-profile |
 | hpa-save |
 | hpa-search |
 | hpa-telemarketing |
 | inf-help--filled |
 | inf-help--outline |
 | inf-star |
 | inf-tooltip--filled |
 | inf-tooltip--outline |
 | inf-warning--filled |
 | inf-warning--outline |
 | mpa-angle--down |
 | mpa-angle--up |
 | mpa-arrows |
 | mpa-bag |
 | mpa-bars |
 | mpa-bookmark--filled |
 | mpa-bookmark--outline |
 | mpa-clone--filled |
 | mpa-clone--outline |
 | mpa-cog |
 | mpa-columns |
 | mpa-credit-card |
 | mpa-edit--filled |
 | mpa-edit--outline |
 | mpa-elypsis |
 | mpa-exchange |
 | mpa-export |
 | mpa-external-link--line |
 | mpa-external-link--outline |
 | mpa-eyesight--filled--off |
 | mpa-eyesight--filled--on |
 | mpa-eyesight--outline--off |
 | mpa-eyesight--outline--on |
 | mpa-filter--filled |
 | mpa-filter--outline |
 | mpa-filter-settings |
 | mpa-gallery |
 | mpa-globe |
 | mpa-heart |
 | mpa-link |
 | mpa-list-items |
 | mpa-location-input |
 | mpa-minus--filled |
 | mpa-minus--line |
 | mpa-minus--outline |
 | mpa-plus--filled |
 | mpa-plus--line |
 | mpa-plus--outline |
 | mpa-remove |
 | mpa-settings |
 | mpa-single-item |
 | mpa-store |
 | mpa-swap |
 | nav-arrow--left |
 | nav-arrow--right |
 | nav-caret--down |
 | nav-caret--left |
 | nav-caret--right |
 | nav-caret--up |
 | nav-home |
 | nav-minus |
 | nav-plus |
 | nav-thin-caret--left |
 | nav-thin-caret--right |
 | sti-check--filled |
 | sti-check--line |
 | sti-check--outline |
 | sti-clock |
 | sti-close--filled |
 | sti-close--line |
 | sti-close--outline |
 | sti-discount |
 | sti-equals |
 | sti-loading |