📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Store Icons

Store Icons are sets of icons tailored for store UI. The Store Icons are implemented using SVG fragment identifiers, which reference specific portions or elements within an SVG document. Leveraging SVG fragment identifiers makes it easier to link directly to and highlight particular sections or areas within the SVG document, facilitating navigation and interaction.

Render SDK serves all store icons, and with the HTML tag <use>, you can render a fragment from the icon pack. For more information on the complete list of fragment SVG's, access the Icon Pack List.

Store Icons

Usage

Add into the dependencies of your manifest.json and use it as an npm module:

"dependencies": {
  "vtex.store-icons": "0.x"
}

There are two ways for using the available icons:

Developing a store's theme: Use the icon block to render the desired icon. This block functions similarly to other blocks and anticipates the receipt of props as specified by its associated API.
Creating custom components: if you are creating custom components and wish to utilize the icons provided here, please follow the instructions below.

Dedicated Icon

Import the desired icon and use it into your code, for example:

import { IconMenu } from 'vtex.store-icons'

const YourComponent = (props) => <IconMenu />

You can see here a list of every available icon.

Generic Icon

The API provides a generic icon, The Icon component. You can choose from any other icon passing only the id from the respective one you want to add.

For example:

import { Icon } from 'vtex.store-icons'

const YourComponent = (props) => <Icon id="hpa-cart" />

⚠️ This component is meant to be used on icons there aren't common throughout the store. Choose dedicated components whenever possible.

Icons

Props

Any icon can receive the following props:

Property	Description	Type	Default value
id	The ID for the desired icon	`String`	''
size	Desired size	`Number`	16
isActive	desc	`Boolean`	true
activeClassName	The className it should have if active	`String`	🚫
mutedClassName	The className it should have if not active	`String`	🚫

Obs: ...props: It is important to notice that any other <svg> prop passed will work with an icon as well.

Enhanced Props

Some components support modifiers. These are props that define the icon type, orientation, state or shape.

Modifier	Possible values
type	`filled` `line` `outline`
orientation	`up` `down` `left` `right`
state	`on` `off`
shape	`square` `rounded` `circle`

Icon List

Brand

Component	id	Type	Orientation	State	Shape
IconSocial	`social`	🚫	🚫	🚫	square \| rounded \| circle

High Priority Actions

Component	id	Type	Orientation	State	Shape
IconArrowBack	`arrow-back`	🚫	🚫	🚫	🚫
IconAssistantSales	`assistant-sales`	🚫	🚫	🚫	🚫
IconProfile	`profile`	🚫	🚫	🚫	🚫
IconCart	`cart`	🚫	🚫	🚫	🚫
IconSearch	`search`	🚫	🚫	🚫	🚫
IconDelete	`delete`	🚫	🚫	🚫	🚫
IconMenu	`menu`	🚫	🚫	🚫	🚫
IconLocationMarker	`location-marker`	🚫	🚫	🚫	🚫

Medium Priority Actions

Component	id	Type	Orientation	State	Shape
IconEyesight	`eyesight`	filled \| outline	🚫	on \| off	🚫
IconMinus	`minus`	filled \| outline \| line	🚫	🚫 brands
IconPlus	`plus`	filled \| outline \| line	🚫	🚫	🚫
IconSingleItem	`single-item`	🚫	🚫	🚫	🚫
IconList	`list`	🚫	🚫	🚫	🚫
IconGallery	`gallery`	🚫	🚫	🚫	🚫
IconRemove	`remove`	🚫	🚫	🚫	🚫
IconSwap	`swap`	🚫	🚫	🚫	🚫
IconHeart	`heart`	🚫	🚫	🚫	🚫
IconGlobe	`globe`	🚫	🚫	🚫	🚫
IconBookmark	`bookmark`	filled \| outline	🚫	🚫	🚫
IconPlay	`play`	filled \| outline	🚫	🚫	🚫
IconPause	`pause`	filled \| outline	🚫	🚫	🚫

Navigation

Component	id	Type	Orientation	State	Shape
IconCaret	`caret`	🚫	up \| down \| left \| right	🚫	🚫

Status Indicators

Component	id	Type	Orientation	State	Shape
IconClose	`close`	filled \| outline	🚫	🚫	🚫
IconCheck	`check`	filled \| outline \| line	🚫	🚫	🚫
IconVolumeOn	`volume-on`	filled \| outline \| line	🚫	🚫	🚫
IconVolumeOff	`volume-off`	filled \| outline \| line	🚫	🚫	🚫

Customize

In the usage section, we discuss two ways of using icons. These ways extend to customization, so, prefer to change an existing Icon so that you can use the dedicated version. You can check how to override and name icons below.

Overwriting the default IconPack

As mentioned before, all icon IDs are stored at the iconpack.svg file. You can overwrite the default one by:

On your store-theme create a new folder called iconpacks
Create a file called iconpack.svg
Declare your icon IDs (use the default iconpack as an example in how to do that properly).

Nomenclature

The naming convention is: intention-id--?modifiers

Where the modifiers follows the rule: ?type--?orientation--?state--?shape

🤓 ? stands for optional inputs

Icon Intention

bnd Brand - Display logos, brands or advertisements.

hpa High priority actions - Actions that are important to the global context.

mpa Mild priority actions - Actions that are important only to the current component context.

inf Informational - Represents information display or actions that, when triggered, reveal further details about the current context.

nav Navigation - Actions that triggers navigation.

sti Status indicators - Indicates the current item/component semantic status.

CSS Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
'arrowBackIcon'
'assistantSalesIcon'
'caretIcon'
'cartIcon'
'checkIcon'
'closeIcon'
'deleteIcon'
'equalsIcon'
'eyeSightIcon'
'filterIcon'
'globeIcon'
'gridIcon'
'heartIcon'
'homeIcon'
'inlineGridIcon'
'locationInputIcon'
'locationMarkerIcon'
'menuIcon'
'minusIcon'
'plusIcon'
'profileIcon'
'removeIcon'
'searchIcon'
'singleGridIcon'
'socialIcon'
'starIcon'
'swapIcon'
'playIcon'
'pauseIcon'
'fullscreenIcon'
'volumeOnIcon'
'volumeOffIcon'

Contributors ✨

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind are welcome!

vtex-apps/store-icons