Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
140 lines (120 sloc) 5.66 KB

Icon Pack list

Here we describe all our SVG fragment identifiers.

📢 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

Icon ID
bnd-logo
hpa-arrow-from-bottom
hpa-arrow-to-bottom
hpa-arrow-back
hpa-calendar
hpa-cart
hpa-delete
hpa-play
hpa-profile
hpa-save
hpa-search
hpa-hamburguer-menu
hpa-location-marker
hpa-telemarketing
mpa-globe
mpa-filter-settings
mpa-single-item
mpa-gallery
mpa-list-items
mpa-heart
mpa-clone--outline
mpa-clone--filled
mpa-edit--outline
mpa-edit--filled
mpa-external-link--line
mpa-external-link--outline
mpa-eyesight--outline--off
mpa-eyesight--filled--off
mpa-eyesight--outline--on
mpa-eyesight--filled--on
mpa-filter--outline
mpa-filter--filled
mpa-minus--line
mpa-minus--outline
mpa-minus--filled
mpa-plus--line
mpa-plus--outline
mpa-plus--filled
mpa-remove
mpa-swap
mpa-arrows
mpa-bag
mpa-bars
mpa-cog
mpa-columns
mpa-credit-card
mpa-elypsis
mpa-exchange
mpa-export
mpa-link
mpa-settings
mpa-store
mpa-angle--down
mpa-angle--up
mpa-location-input
inf-star
inf-help--outline
inf-help--filled
inf-tooltip--outline
inf-tooltip--filled
inf-warning--outline
inf-warning--filled
nav-caret--down
nav-caret--left
nav-caret--right
nav-caret--up
nav-thin-caret--left
nav-thin-caret--right
nav-arrow--left
nav-arrow--right
nav-home
nav-plus
nav-minus
sti-loading
sti-check--line
sti-check--outline
sti-check--filled
sti-close--line
sti-close--outline
sti-close--filled
sti-clock
sti-equals
sti-discount
You can’t perform that action at this time.