Icon Pack list

Here we describe all our SVG fragment identifiers.

:loudspeaker: Disclaimer: The svg/ folder is just to render the icons in this MD.

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

IconID
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

Did this page help you?