Icon Pack list
This articles lists all SVG fragment identifiers.
How to use this fragments?
First of all, you should add the vtex.store-icons to your dependencies in manifest.json.
This an example that show you how to use it.
import React from 'react'
import Icon from 'vtex.store-icons'
const IconSearch = ({ ...props }) => {
return <Icon id="hpa-search" {...props} />
}
IconSearch.propTypes = {
/** Icon size, aspect ratio 1:1 */
size: PropTypes.number,
/** Icon viewBox. Default 0, 0, 16, 16 */
viewBox: PropTypes.string,
/** Define if will be used a active or muted className */
isActive: PropTypes.bool,
/** Active color class */
activeClassName: PropTypes.string,
/** Muted color class */
mutedClassName: PropTypes.string,
}
export default IconSearch
SVG Prefixes
We use a series of prefixes to help us understand what an specific icon means.
- bnd - Brand;
- hpa - High Priority Actions;
- mpa - Midle 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 |