<div class="icons">
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>User's account in circle</title>
<use href="/images/icons-sprite.svg#account-mini"></use>
</svg>
<span class="icons__name">
account-mini
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>User's account</title>
<use href="/images/icons-sprite.svg#account"></use>
</svg>
<span class="icons__name">
account
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>American Express</title>
<use href="/images/icons-sprite.svg#american-express"></use>
</svg>
<span class="icons__name">
american-express
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Arrow down</title>
<use href="/images/icons-sprite.svg#angle-down"></use>
</svg>
<span class="icons__name">
angle-down
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Arrow up</title>
<use href="/images/icons-sprite.svg#angle-up"></use>
</svg>
<span class="icons__name">
angle-up
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Arrow right</title>
<use href="/images/icons-sprite.svg#angle-right"></use>
</svg>
<span class="icons__name">
angle-right
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Arrow left</title>
<use href="/images/icons-sprite.svg#angle-left"></use>
</svg>
<span class="icons__name">
angle-left
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Arrow down</title>
<use href="/images/icons-sprite.svg#arrow-down"></use>
</svg>
<span class="icons__name">
arrow-down
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Arrow left</title>
<use href="/images/icons-sprite.svg#arrow-left"></use>
</svg>
<span class="icons__name">
arrow-left
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Arrow right</title>
<use href="/images/icons-sprite.svg#arrow-right"></use>
</svg>
<span class="icons__name">
arrow-right
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Arrow up</title>
<use href="/images/icons-sprite.svg#arrow-up"></use>
</svg>
<span class="icons__name">
arrow-up
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Big Star</title>
<use href="/images/icons-sprite.svg#bigstar"></use>
</svg>
<span class="icons__name">
bigstar
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Checked</title>
<use href="/images/icons-sprite.svg#check"></use>
</svg>
<span class="icons__name">
check
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Checked</title>
<use href="/images/icons-sprite.svg#checked"></use>
</svg>
<span class="icons__name">
checked
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Close</title>
<use href="/images/icons-sprite.svg#close"></use>
</svg>
<span class="icons__name">
close
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Compare</title>
<use href="/images/icons-sprite.svg#compare"></use>
</svg>
<span class="icons__name">
compare
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Curved 2 arrows in form of circle</title>
<use href="/images/icons-sprite.svg#curved-arrows"></use>
</svg>
<span class="icons__name">
curved-arrows
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Delivery truck</title>
<use href="/images/icons-sprite.svg#delivery-truck"></use>
</svg>
<span class="icons__name">
delivery-truck
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Discover</title>
<use href="/images/icons-sprite.svg#discover"></use>
</svg>
<span class="icons__name">
discover
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Edit pencil</title>
<use href="/images/icons-sprite.svg#edit"></use>
</svg>
<span class="icons__name">
edit
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Envelope</title>
<use href="/images/icons-sprite.svg#envelope"></use>
</svg>
<span class="icons__name">
envelope
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Error exclamation mark</title>
<use href="/images/icons-sprite.svg#error"></use>
</svg>
<span class="icons__name">
error
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Facebook logo</title>
<use href="/images/icons-sprite.svg#facebook"></use>
</svg>
<span class="icons__name">
facebook
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Google plus logo</title>
<use href="/images/icons-sprite.svg#google-plus"></use>
</svg>
<span class="icons__name">
google-plus
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Grid</title>
<use href="/images/icons-sprite.svg#grid"></use>
</svg>
<span class="icons__name">
grid
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Heart</title>
<use href="/images/icons-sprite.svg#heart"></use>
</svg>
<span class="icons__name">
heart
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Info</title>
<use href="/images/icons-sprite.svg#info"></use>
</svg>
<span class="icons__name">
info
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Instagram logo</title>
<use href="/images/icons-sprite.svg#instagram"></use>
</svg>
<span class="icons__name">
instagram
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Linked logo</title>
<use href="/images/icons-sprite.svg#linkedin"></use>
</svg>
<span class="icons__name">
linkedin
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>List</title>
<use href="/images/icons-sprite.svg#list"></use>
</svg>
<span class="icons__name">
list
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Loader</title>
<use href="/images/icons-sprite.svg#loader"></use>
</svg>
<span class="icons__name">
loader
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Master Card</title>
<use href="/images/icons-sprite.svg#master-card"></use>
</svg>
<span class="icons__name">
master-card
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Minus mark</title>
<use href="/images/icons-sprite.svg#minus"></use>
</svg>
<span class="icons__name">
minus
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Mobile menu</title>
<use href="/images/icons-sprite.svg#mobile-menu"></use>
</svg>
<span class="icons__name">
mobile-menu
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>more</title>
<use href="/images/icons-sprite.svg#more"></use>
</svg>
<span class="icons__name">
more
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>No results</title>
<use href="/images/icons-sprite.svg#no-results"></use>
</svg>
<span class="icons__name">
no-results
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Paypal</title>
<use href="/images/icons-sprite.svg#paypal"></use>
</svg>
<span class="icons__name">
paypal
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Phone</title>
<use href="/images/icons-sprite.svg#phone"></use>
</svg>
<span class="icons__name">
phone
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Pinterest</title>
<use href="/images/icons-sprite.svg#pinterest"></use>
</svg>
<span class="icons__name">
pinterest
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Pin</title>
<use href="/images/icons-sprite.svg#pin"></use>
</svg>
<span class="icons__name">
pin
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Plus mark</title>
<use href="/images/icons-sprite.svg#plus"></use>
</svg>
<span class="icons__name">
plus
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Trash bin</title>
<use href="/images/icons-sprite.svg#remove"></use>
</svg>
<span class="icons__name">
remove
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Return 30 days</title>
<use href="/images/icons-sprite.svg#return"></use>
</svg>
<span class="icons__name">
return
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Reviews</title>
<use href="/images/icons-sprite.svg#reviews"></use>
</svg>
<span class="icons__name">
reviews
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Search</title>
<use href="/images/icons-sprite.svg#search"></use>
</svg>
<span class="icons__name">
search
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Settings</title>
<use href="/images/icons-sprite.svg#settings"></use>
</svg>
<span class="icons__name">
settings
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Shield</title>
<use href="/images/icons-sprite.svg#shield"></use>
</svg>
<span class="icons__name">
shield
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Delivery truck with clock</title>
<use href="/images/icons-sprite.svg#shipping-time-truck"></use>
</svg>
<span class="icons__name">
shipping-time-truck
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Shopping cart</title>
<use href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
<span class="icons__name">
shopping-cart
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Signin</title>
<use href="/images/icons-sprite.svg#signin"></use>
</svg>
<span class="icons__name">
signin
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Star</title>
<use href="/images/icons-sprite.svg#star"></use>
</svg>
<span class="icons__name">
star
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Star border</title>
<use href="/images/icons-sprite.svg#star-border"></use>
</svg>
<span class="icons__name">
star-border
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Twitter logo</title>
<use href="/images/icons-sprite.svg#twitter"></use>
</svg>
<span class="icons__name">
twitter
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Unchecked</title>
<use href="/images/icons-sprite.svg#unchecked"></use>
</svg>
<span class="icons__name">
unchecked
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>User</title>
<use href="/images/icons-sprite.svg#user"></use>
</svg>
<span class="icons__name">
user
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Visa</title>
<use href="/images/icons-sprite.svg#visa"></use>
</svg>
<span class="icons__name">
visa
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Visibility</title>
<use href="/images/icons-sprite.svg#visibility"></use>
</svg>
<span class="icons__name">
visibility
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Visibility off</title>
<use href="/images/icons-sprite.svg#visibility-off"></use>
</svg>
<span class="icons__name">
visibility-off
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Warning exclamation mark</title>
<use href="/images/icons-sprite.svg#warning"></use>
</svg>
<span class="icons__name">
warning
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Youtube logo</title>
<use href="/images/icons-sprite.svg#youtube"></use>
</svg>
<span class="icons__name">
youtube
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Share</title>
<use href="/images/icons-sprite.svg#share"></use>
</svg>
<span class="icons__name">
share
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Thumb up</title>
<use href="/images/icons-sprite.svg#thumb-up"></use>
</svg>
<span class="icons__name">
thumb-up
</span>
</div>
<div class="icons__item">
<svg class="icon icons__single-icon" role="img">
<title>Thumb down</title>
<use href="/images/icons-sprite.svg#thumb-down"></use>
</svg>
<span class="icons__name">
thumb-down
</span>
</div>
</div>
<div class="icons">
{{#each icons}}
<div class="icons__item">
{{ render '@icon' this }}
<span class="icons__name">
{{ this.id }}
</span>
</div>
{{/each}}
</div>
{
"icons": [
{
"id": "account-mini",
"title": "User's account in circle",
"class": "icons__single-icon"
},
{
"id": "account",
"title": "User's account",
"class": "icons__single-icon"
},
{
"id": "american-express",
"title": "American Express",
"class": "icons__single-icon"
},
{
"id": "angle-down",
"title": "Arrow down",
"class": "icons__single-icon"
},
{
"id": "angle-up",
"title": "Arrow up",
"class": "icons__single-icon"
},
{
"id": "angle-right",
"title": "Arrow right",
"class": "icons__single-icon"
},
{
"id": "angle-left",
"title": "Arrow left",
"class": "icons__single-icon"
},
{
"id": "arrow-down",
"title": "Arrow down",
"class": "icons__single-icon"
},
{
"id": "arrow-left",
"title": "Arrow left",
"class": "icons__single-icon"
},
{
"id": "arrow-right",
"title": "Arrow right",
"class": "icons__single-icon"
},
{
"id": "arrow-up",
"title": "Arrow up",
"class": "icons__single-icon"
},
{
"id": "bigstar",
"title": "Big Star",
"class": "icons__single-icon"
},
{
"id": "check",
"title": "Checked",
"class": "icons__single-icon"
},
{
"id": "checked",
"title": "Checked",
"class": "icons__single-icon"
},
{
"id": "close",
"title": "Close",
"class": "icons__single-icon"
},
{
"id": "compare",
"title": "Compare",
"class": "icons__single-icon"
},
{
"id": "curved-arrows",
"title": "Curved 2 arrows in form of circle",
"class": "icons__single-icon"
},
{
"id": "delivery-truck",
"title": "Delivery truck",
"class": "icons__single-icon"
},
{
"id": "discover",
"title": "Discover",
"class": "icons__single-icon"
},
{
"id": "edit",
"title": "Edit pencil",
"class": "icons__single-icon"
},
{
"id": "envelope",
"title": "Envelope",
"class": "icons__single-icon"
},
{
"id": "error",
"title": "Error exclamation mark",
"class": "icons__single-icon"
},
{
"id": "facebook",
"title": "Facebook logo",
"class": "icons__single-icon"
},
{
"id": "google-plus",
"title": "Google plus logo",
"class": "icons__single-icon"
},
{
"id": "grid",
"title": "Grid",
"class": "icons__single-icon"
},
{
"id": "heart",
"title": "Heart",
"class": "icons__single-icon"
},
{
"id": "info",
"title": "Info",
"class": "icons__single-icon"
},
{
"id": "instagram",
"title": "Instagram logo",
"class": "icons__single-icon"
},
{
"id": "linkedin",
"title": "Linked logo",
"class": "icons__single-icon"
},
{
"id": "list",
"title": "List",
"class": "icons__single-icon"
},
{
"id": "loader",
"title": "Loader",
"class": "icons__single-icon"
},
{
"id": "master-card",
"title": "Master Card",
"class": "icons__single-icon"
},
{
"id": "minus",
"title": "Minus mark",
"class": "icons__single-icon"
},
{
"id": "mobile-menu",
"title": "Mobile menu",
"class": "icons__single-icon"
},
{
"id": "more",
"title": "more",
"class": "icons__single-icon"
},
{
"id": "no-results",
"title": "No results",
"class": "icons__single-icon"
},
{
"id": "paypal",
"title": "Paypal",
"class": "icons__single-icon"
},
{
"id": "phone",
"title": "Phone",
"class": "icons__single-icon"
},
{
"id": "pinterest",
"title": "Pinterest",
"class": "icons__single-icon"
},
{
"id": "pin",
"title": "Pin",
"class": "icons__single-icon"
},
{
"id": "plus",
"title": "Plus mark",
"class": "icons__single-icon"
},
{
"id": "remove",
"title": "Trash bin",
"class": "icons__single-icon"
},
{
"id": "return",
"title": "Return 30 days",
"class": "icons__single-icon"
},
{
"id": "reviews",
"title": "Reviews",
"class": "icons__single-icon"
},
{
"id": "search",
"title": "Search",
"class": "icons__single-icon"
},
{
"id": "settings",
"title": "Settings",
"class": "icons__single-icon"
},
{
"id": "shield",
"title": "Shield",
"class": "icons__single-icon"
},
{
"id": "shipping-time-truck",
"title": "Delivery truck with clock",
"class": "icons__single-icon"
},
{
"id": "shopping-cart",
"title": "Shopping cart",
"class": "icons__single-icon"
},
{
"id": "signin",
"title": "Signin",
"class": "icons__single-icon"
},
{
"id": "star",
"title": "Star",
"class": "icons__single-icon"
},
{
"id": "star-border",
"title": "Star border",
"class": "icons__single-icon"
},
{
"id": "twitter",
"title": "Twitter logo",
"class": "icons__single-icon"
},
{
"id": "unchecked",
"title": "Unchecked",
"class": "icons__single-icon"
},
{
"id": "user",
"title": "User",
"class": "icons__single-icon"
},
{
"id": "visa",
"title": "Visa",
"class": "icons__single-icon"
},
{
"id": "visibility",
"title": "Visibility",
"class": "icons__single-icon"
},
{
"id": "visibility-off",
"title": "Visibility off",
"class": "icons__single-icon"
},
{
"id": "warning",
"title": "Warning exclamation mark",
"class": "icons__single-icon"
},
{
"id": "youtube",
"title": "Youtube logo",
"class": "icons__single-icon"
},
{
"id": "share",
"title": "Share",
"class": "icons__single-icon"
},
{
"id": "thumb-up",
"title": "Thumb up",
"class": "icons__single-icon"
},
{
"id": "thumb-down",
"title": "Thumb down",
"class": "icons__single-icon"
}
]
}
All icons are gathered into icon-sprite.svg file
Use sprite to display svg inline in your project:
<svg class="icon-class" role="img">
<title>Icon title</title>
<use href="#icon-id"></use>
</svg>To display icons in documentation, on each preview the icon-sprite is injected inline.
While implementing in theme, include the sprite inside body tag and to display an icon use use with it’s id as a value for href
There are no dedicated styles for svg icons,
feel free to add appropriate BEM class using icon in your block and set fill, width and height property to change icon’s color and size
To make icons accessible we use title element as a first child of svg and role="img". Title is provided in config file.
When you set hidden value in config context to true role will change to presentation, an attribute focusable="false" will be added and icon won’t be visible for assistive technologies (AT).
This should be use when element has icon and text and icon is displayed only for design purposes.
In button with text and icon before/after icon should be hidden, in button--icon icon also should be hidden, because it’s aria-label on the button element should inform user about possible action and focusing on icon inside button make the website operation less comfortable for AT’s users.
If you need to implement description for the icon, use <desc> element for it and add id for both title and desc elements and bind those ids in aria-labelledby svg’s attribute:
<svg class="header__icon" role="img" aria-labelledby="icon-title-id icon-desc-id">
<title id="icon-title-id">Icon title</title>
<desc id="icon-desc-id"></desc>
<use href="images/icons-sprite.svg#icon-id"></use>
</svg>