Check out the available icons to use in your store described in Store Icon guide.
Add the vtex.store-icons to your dependencies in manifest.json.
This is an example that shows 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 IconSearchThe following prefixes help to understand what a specific icon means.
| Prefix | Meaning |
|---|---|
| bnd | Brand |
| hpa | High Priority Actions |
| mpa | Midle Priority Actions |
| sti | Status Indicator |
| inf | Informative |
| nav | Navigation |
| 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 |