Icon Pack list by vtex

This page is about version 0.18.0 of the app, which is not the most recent version. The latest stable version is 0.19.4.

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.


_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

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
An error occurred while loading the image ./bnd-logo.svg	bnd-logo
An error occurred while loading the image ./mpa-expand.svg	mpa-expand
An error occurred while loading the image ./hpa-arrow-back.svg	hpa-arrow-back
An error occurred while loading the image ./hpa-arrow-from-bottom.svg	hpa-arrow-from-bottom
An error occurred while loading the image ./hpa-arrow-to-bottom.svg	hpa-arrow-to-bottom
An error occurred while loading the image ./hpa-calendar.svg	hpa-calendar
An error occurred while loading the image ./hpa-cart.svg	hpa-cart
An error occurred while loading the image ./hpa-delete.svg	hpa-delete
An error occurred while loading the image ./hpa-hamburguer-menu.svg	hpa-hamburguer-menu
An error occurred while loading the image ./hpa-location-marker.svg	hpa-location-marker
An error occurred while loading the image ./hpa-play.svg	hpa-play
An error occurred while loading the image ./hpa-profile.svg	hpa-profile
An error occurred while loading the image ./hpa-save.svg	hpa-save
An error occurred while loading the image ./hpa-search.svg	hpa-search
An error occurred while loading the image ./hpa-telemarketing.svg	hpa-telemarketing
An error occurred while loading the image ./inf-help--filled.svg	inf-help--filled
An error occurred while loading the image ./inf-help--outline.svg	inf-help--outline
An error occurred while loading the image ./inf-star.svg	inf-star
An error occurred while loading the image ./inf-tooltip--filled.svg	inf-tooltip--filled
An error occurred while loading the image ./inf-tooltip--outline.svg	inf-tooltip--outline
An error occurred while loading the image ./inf-warning--filled.svg	inf-warning--filled
An error occurred while loading the image ./inf-warning--outline.svg	inf-warning--outline
An error occurred while loading the image ./mpa-angle--down.svg	mpa-angle--down
An error occurred while loading the image ./mpa-angle--up.svg	mpa-angle--up
An error occurred while loading the image ./mpa-arrows.svg	mpa-arrows
An error occurred while loading the image ./mpa-bag.svg	mpa-bag
An error occurred while loading the image ./mpa-bars.svg	mpa-bars
An error occurred while loading the image ./mpa-bookmark--filled.svg	mpa-bookmark--filled
An error occurred while loading the image ./mpa-bookmark--outline.svg	mpa-bookmark--outline
An error occurred while loading the image ./mpa-clone--filled.svg	mpa-clone--filled
An error occurred while loading the image ./mpa-clone--outline.svg	mpa-clone--outline
An error occurred while loading the image ./mpa-cog.svg	mpa-cog
An error occurred while loading the image ./mpa-columns.svg	mpa-columns
An error occurred while loading the image ./mpa-credit-card.svg	mpa-credit-card
An error occurred while loading the image ./mpa-edit--filled.svg	mpa-edit--filled
An error occurred while loading the image ./mpa-edit--outline.svg	mpa-edit--outline
An error occurred while loading the image ./mpa-elypsis.svg	mpa-elypsis
An error occurred while loading the image ./mpa-exchange.svg	mpa-exchange
An error occurred while loading the image ./mpa-export.svg	mpa-export
An error occurred while loading the image ./mpa-external-link--line.svg	mpa-external-link--line
An error occurred while loading the image ./mpa-external-link--outline.svg	mpa-external-link--outline
An error occurred while loading the image ./mpa-eyesight--filled--off.svg	mpa-eyesight--filled--off
An error occurred while loading the image ./mpa-eyesight--filled--on.svg	mpa-eyesight--filled--on
An error occurred while loading the image ./mpa-eyesight--outline--off.svg	mpa-eyesight--outline--off
An error occurred while loading the image ./mpa-eyesight--outline--on.svg	mpa-eyesight--outline--on
An error occurred while loading the image ./mpa-filter--filled.svg	mpa-filter--filled
An error occurred while loading the image ./mpa-filter--outline.svg	mpa-filter--outline
An error occurred while loading the image ./mpa-filter-settings.svg	mpa-filter-settings
An error occurred while loading the image ./mpa-gallery.svg	mpa-gallery
An error occurred while loading the image ./mpa-globe.svg	mpa-globe
An error occurred while loading the image ./mpa-heart.svg	mpa-heart
An error occurred while loading the image ./mpa-link.svg	mpa-link
An error occurred while loading the image ./mpa-list-items.svg	mpa-list-items
An error occurred while loading the image ./mpa-location-input.svg	mpa-location-input
An error occurred while loading the image ./mpa-minus--filled.svg	mpa-minus--filled
An error occurred while loading the image ./mpa-minus--line.svg	mpa-minus--line
An error occurred while loading the image ./mpa-minus--outline.svg	mpa-minus--outline
An error occurred while loading the image ./mpa-plus--filled.svg	mpa-plus--filled
An error occurred while loading the image ./mpa-plus--line.svg	mpa-plus--line
An error occurred while loading the image ./mpa-plus--outline.svg	mpa-plus--outline
An error occurred while loading the image ./mpa-remove.svg	mpa-remove
An error occurred while loading the image ./mpa-settings.svg	mpa-settings
An error occurred while loading the image ./mpa-single-item.svg	mpa-single-item
An error occurred while loading the image ./mpa-store.svg	mpa-store
An error occurred while loading the image ./mpa-swap.svg	mpa-swap
An error occurred while loading the image ./nav-arrow--left.svg	nav-arrow--left
An error occurred while loading the image ./nav-arrow--right.svg	nav-arrow--right
An error occurred while loading the image ./nav-caret--down.svg	nav-caret--down
An error occurred while loading the image ./nav-caret--left.svg	nav-caret--left
An error occurred while loading the image ./nav-caret--right.svg	nav-caret--right
An error occurred while loading the image ./nav-caret--up.svg	nav-caret--up
An error occurred while loading the image ./nav-home.svg	nav-home
An error occurred while loading the image ./nav-minus.svg	nav-minus
An error occurred while loading the image ./nav-plus.svg	nav-plus
An error occurred while loading the image ./nav-thin-caret--left.svg	nav-thin-caret--left
An error occurred while loading the image ./nav-thin-caret--right.svg	nav-thin-caret--right
An error occurred while loading the image ./sti-check--filled.svg	sti-check--filled
An error occurred while loading the image ./sti-check--line.svg	sti-check--line
An error occurred while loading the image ./sti-check--outline.svg	sti-check--outline
An error occurred while loading the image ./sti-clock.svg	sti-clock
An error occurred while loading the image ./sti-close--filled.svg	sti-close--filled
An error occurred while loading the image ./sti-close--line.svg	sti-close--line
An error occurred while loading the image ./sti-close--outline.svg	sti-close--outline
An error occurred while loading the image ./sti-discount.svg	sti-discount
An error occurred while loading the image ./sti-equals.svg	sti-equals
An error occurred while loading the image ./sti-loading.svg	sti-loading