Icon
CAKE does include an icon library by default. All icons below are in the SVG (including a title) because of the improved accessibility and vector support. SVG icons are scalable, the file size is very small and they are also modifiable through xml and css.
Usage in general#
You can use the standardised svg tag to display CAKE's svg-icons. To get the basic styling for correct presentation of the icons simply use the class .icon on the svg tag. Additionally you should add the xmlns="http://www.w3.org/2000/svg" attribute, the correct role img and the focusable property. The last important thing you have to do, is to add a use element referencing to the spritesheet of our icons with a valid icon reference like in the example below.
<svg class="icon" xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>Spritesheet#
To use all the advantages of SVGs, we use a icon-spritesheet with our icons. It's as simple as a svg-file including many different icons in one file. This gives us the advantage of only having to load one resource from the server. Also we are able to color the icons with plain css and we get a better accessbility. The icon-sprite can be found under dist/images/icon__sprite.svg. It will be automatically generated using the npm package svg-spritemap-webpack-plugin and the icon sources from assets/icons.
To use one icon out of this icon-sprite, you have to set the path to the icon__sprite.svg file inside the use tag and set the reference of the icon you want to display. For example you can display the arrow-down icon with the following use element inside your svg tag:
<use xlink:href="/assets/images/icon__sprite.svg#arrow-down"><svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Arrow down</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#arrow-down">
</use>
</svg>Browser support#
Most of the mordern and wide-spread browsers have a native support of rendering svg files. Despite this some older browsers do not support svg-icons natively, especially when referencing to a seperate svg-file instead of inline-svg definitions. Therefore we have to use the polyfill svg4everybody which is already included by default in the dist/js/cake.js bundle. If you use your own JavaScript you should consider to use a similar polyfill.
Icon sizing#
By default (when only using the .icon class) the icon will scale to it's available space. To give you the ability to set up more concrete sizes, you can use one of the following classes additionally to the default .icon class (usage: class="icon icon-XX"). The number of these sizing classes represents the multiplier of $spacer for the dimension. (These values are set as rem values.)
.icon-1(height: 8px, width: 8px).icon-2(height: 16px, width: 16px).icon-3(height: 24px, width: 24px).icon-4(height: 32px, width: 32px)
Icon size 8px (.icon-1)#
<svg class="icon icon-1" xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>Icon size 16px (.icon-2)#
<svg class="icon icon-2" xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>Icon size 24px (.icon-3)#
<svg class="icon icon-3" xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>Icon size 32px (.icon-4)#
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>Icon positioning#
In some unique situations the default positioning of the icons does not work for the specific usage. Therefore there are some additional icon-classes that can be used to extend the default positioning of the .icon class.
Button icons#
When using icons inside of buttons you should add the class .btn-icon. With this class the icon will be positioned vertically centered.
<button class="btn btn-primary">
<svg class="icon icon-3 btn-icon" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg> Some text</button>Vertical middle#
The class .icon-vertical-middle can be used, if you want to position an icon next to some text while keep it vertically cetnered.
<svg class="icon icon-3 icon-vertical-middle" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg> Some textIcon coloring#
As a default the icon will be displayed using the text color of it's actual context. To change the color of the icon you can simply adjust the css attribute color to whatever value you want.
<svg class="icon icon-4" style="color:red" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>
<svg class="icon icon-4" style="color:#0050AA" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>
<svg class="icon icon-4" style="color:rgba(190, 89, 29, 1)" xmlns="http://www.w3.org/2000/svg"
role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>
<svg class="icon icon-4" style="color:hsla(357, 92%, 47%, 1)" xmlns="http://www.w3.org/2000/svg"
role="img" focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>
<svg class="icon icon-4 text-primary" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>Placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>Icons#
You can use a bunch of prestyled icons that are available through our icon-sprite.
<h3 id="animal">Animal</h3>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Icon</th>
<th>Reference</th>
<th>Icon-Path</th>
<th>Preview</th>
</tr>
</thead>
<tbody>
<tr data-index="1">
<td>Cattle</td>
<td>
<code>#cattle</code>
</td>
<td>
<code>assets/icons/animal/cattle.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>cattle</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#cattle">
</use>
</svg>
</td>
</tr>
<tr data-index="2">
<td>Chicken</td>
<td>
<code>#chicken</code>
</td>
<td>
<code>assets/icons/animal/chicken.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>chicken</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#chicken">
</use>
</svg>
</td>
</tr>
<tr data-index="3">
<td>Crab</td>
<td>
<code>#crab</code>
</td>
<td>
<code>assets/icons/animal/crab.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>crab</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#crab">
</use>
</svg>
</td>
</tr>
<tr data-index="4">
<td>Deer</td>
<td>
<code>#deer</code>
</td>
<td>
<code>assets/icons/animal/deer.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>deer</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#deer">
</use>
</svg>
</td>
</tr>
<tr data-index="5">
<td>Dog</td>
<td>
<code>#dog</code>
</td>
<td>
<code>assets/icons/animal/dog.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>dog</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#dog">
</use>
</svg>
</td>
</tr>
<tr data-index="6">
<td>Fish</td>
<td>
<code>#fish</code>
</td>
<td>
<code>assets/icons/animal/fish.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>fish</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#fish">
</use>
</svg>
</td>
</tr>
<tr data-index="7">
<td>Goose</td>
<td>
<code>#goose</code>
</td>
<td>
<code>assets/icons/animal/goose.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>goose</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#goose">
</use>
</svg>
</td>
</tr>
<tr data-index="8">
<td>Pig</td>
<td>
<code>#pig</code>
</td>
<td>
<code>assets/icons/animal/pig.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>pig</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#pig">
</use>
</svg>
</td>
</tr>
<tr data-index="9">
<td>Rabbit</td>
<td>
<code>#rabbit</code>
</td>
<td>
<code>assets/icons/animal/rabbit.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>rabbit</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#rabbit">
</use>
</svg>
</td>
</tr>
<tr data-index="10">
<td>Shrimp</td>
<td>
<code>#shrimp</code>
</td>
<td>
<code>assets/icons/animal/shrimp.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>shrimp</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#shrimp">
</use>
</svg>
</td>
</tr>
<tr data-index="11">
<td>Turkey</td>
<td>
<code>#turkey</code>
</td>
<td>
<code>assets/icons/animal/turkey.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>turkey</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#turkey">
</use>
</svg>
</td>
</tr>
</tbody>
</table>
</div>
<h3 id="expression">Expression</h3>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Icon</th>
<th>Reference</th>
<th>Icon-Path</th>
<th>Preview</th>
</tr>
</thead>
<tbody>
<tr data-index="1">
<td>Award</td>
<td>
<code>#award</code>
</td>
<td>
<code>assets/icons/expression/award.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>award</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#award">
</use>
</svg>
</td>
</tr>
<tr data-index="2">
<td>Certificate</td>
<td>
<code>#certificate</code>
</td>
<td>
<code>assets/icons/expression/certificate.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>certificate</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#certificate">
</use>
</svg>
</td>
</tr>
<tr data-index="3">
<td>Comment</td>
<td>
<code>#comment</code>
</td>
<td>
<code>assets/icons/expression/comment.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>comment</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#comment">
</use>
</svg>
</td>
</tr>
<tr data-index="4">
<td>Conversation Ballons Chat</td>
<td>
<code>#conversation-ballons-chat</code>
</td>
<td>
<code>assets/icons/expression/conversation-ballons-chat.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>conversation-ballons-chat</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#conversation-ballons-chat">
</use>
</svg>
</td>
</tr>
<tr data-index="5">
<td>Conversation Ballons</td>
<td>
<code>#conversation-ballons</code>
</td>
<td>
<code>assets/icons/expression/conversation-ballons.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>conversation-ballons</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#conversation-ballons">
</use>
</svg>
</td>
</tr>
<tr data-index="6">
<td>Dice Percentage</td>
<td>
<code>#dice-percentage</code>
</td>
<td>
<code>assets/icons/expression/dice-percentage.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>dice-percentage</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#dice-percentage">
</use>
</svg>
</td>
</tr>
<tr data-index="7">
<td>Exclamation Ballon</td>
<td>
<code>#exclamation-ballon</code>
</td>
<td>
<code>assets/icons/expression/exclamation-ballon.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>exclamation-ballon</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#exclamation-ballon">
</use>
</svg>
</td>
</tr>
<tr data-index="8">
<td>Exclamation Circle</td>
<td>
<code>#exclamation-circle</code>
</td>
<td>
<code>assets/icons/expression/exclamation-circle.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>exclamation-circle</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#exclamation-circle">
</use>
</svg>
</td>
</tr>
<tr data-index="9">
<td>Exclamation Triangle</td>
<td>
<code>#exclamation-triangle</code>
</td>
<td>
<code>assets/icons/expression/exclamation-triangle.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>exclamation-triangle</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#exclamation-triangle">
</use>
</svg>
</td>
</tr>
<tr data-index="10">
<td>Gift Close</td>
<td>
<code>#gift-close</code>
</td>
<td>
<code>assets/icons/expression/gift-close.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>gift-close</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#gift-close">
</use>
</svg>
</td>
</tr>
<tr data-index="11">
<td>Gift Open</td>
<td>
<code>#gift-open</code>
</td>
<td>
<code>assets/icons/expression/gift-open.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>gift-open</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#gift-open">
</use>
</svg>
</td>
</tr>
<tr data-index="12">
<td>Handshake</td>
<td>
<code>#handshake</code>
</td>
<td>
<code>assets/icons/expression/handshake.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>handshake</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#handshake">
</use>
</svg>
</td>
</tr>
<tr data-index="13">
<td>Hook Circle</td>
<td>
<code>#hook-circle</code>
</td>
<td>
<code>assets/icons/expression/hook-circle.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>hook-circle</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#hook-circle">
</use>
</svg>
</td>
</tr>
<tr data-index="14">
<td>Hook Shield</td>
<td>
<code>#hook-shield</code>
</td>
<td>
<code>assets/icons/expression/hook-shield.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>hook-shield</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#hook-shield">
</use>
</svg>
</td>
</tr>
<tr data-index="15">
<td>Hook Square</td>
<td>
<code>#hook-square</code>
</td>
<td>
<code>assets/icons/expression/hook-square.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>hook-square</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#hook-square">
</use>
</svg>
</td>
</tr>
<tr data-index="16">
<td>Information Circle</td>
<td>
<code>#information-circle</code>
</td>
<td>
<code>assets/icons/expression/information-circle.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>information-circle</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#information-circle">
</use>
</svg>
</td>
</tr>
<tr data-index="17">
<td>Lightbulb Off</td>
<td>
<code>#lightbulb-off</code>
</td>
<td>
<code>assets/icons/expression/lightbulb-off.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>lightbulb-off</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#lightbulb-off">
</use>
</svg>
</td>
</tr>
<tr data-index="18">
<td>Lightbulb On</td>
<td>
<code>#lightbulb-on</code>
</td>
<td>
<code>assets/icons/expression/lightbulb-on.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>lightbulb-on</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#lightbulb-on">
</use>
</svg>
</td>
</tr>
<tr data-index="19">
<td>Newspaper</td>
<td>
<code>#newspaper</code>
</td>
<td>
<code>assets/icons/expression/newspaper.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>newspaper</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#newspaper">
</use>
</svg>
</td>
</tr>
<tr data-index="20">
<td>Paragraph Circle</td>
<td>
<code>#paragraph-circle</code>
</td>
<td>
<code>assets/icons/expression/paragraph-circle.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>paragraph-circle</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#paragraph-circle">
</use>
</svg>
</td>
</tr>
<tr data-index="21">
<td>Piggy Bank</td>
<td>
<code>#piggy-bank</code>
</td>
<td>
<code>assets/icons/expression/piggy-bank.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>piggy-bank</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#piggy-bank">
</use>
</svg>
</td>
</tr>
<tr data-index="22">
<td>Questionmark Ballon</td>
<td>
<code>#questionmark-ballon</code>
</td>
<td>
<code>assets/icons/expression/questionmark-ballon.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>questionmark-ballon</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#questionmark-ballon">
</use>
</svg>
</td>
</tr>
<tr data-index="23">
<td>Questionmark Circle</td>
<td>
<code>#questionmark-circle</code>
</td>
<td>
<code>assets/icons/expression/questionmark-circle.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>questionmark-circle</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#questionmark-circle">
</use>
</svg>
</td>
</tr>
<tr data-index="24">
<td>Stop Sign</td>
<td>
<code>#stop-sign</code>
</td>
<td>
<code>assets/icons/expression/stop-sign.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>stop-sign</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#stop-sign">
</use>
</svg>
</td>
</tr>
<tr data-index="25">
<td>Thumbs Up Ballon</td>
<td>
<code>#thumbs-up-ballon</code>
</td>
<td>
<code>assets/icons/expression/thumbs-up-ballon.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>thumbs-up-ballon</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#thumbs-up-ballon">
</use>
</svg>
</td>
</tr>
</tbody>
</table>
</div>
<h3 id="food & beverage">Food & beverage</h3>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Icon</th>
<th>Reference</th>
<th>Icon-Path</th>
<th>Preview</th>
</tr>
</thead>
<tbody>
<tr data-index="1">
<td>Apple</td>
<td>
<code>#apple</code>
</td>
<td>
<code>assets/icons/food & beverage/apple.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>apple</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#apple">
</use>
</svg>
</td>
</tr>
<tr data-index="2">
<td>Bakery Products</td>
<td>
<code>#bakery-products</code>
</td>
<td>
<code>assets/icons/food & beverage/bakery-products.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>bakery-products</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#bakery-products">
</use>
</svg>
</td>
</tr>
<tr data-index="3">
<td>Barrel</td>
<td>
<code>#barrel</code>
</td>
<td>
<code>assets/icons/food & beverage/barrel.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>barrel</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#barrel">
</use>
</svg>
</td>
</tr>
<tr data-index="4">
<td>Beer Glass</td>
<td>
<code>#beer-glass</code>
</td>
<td>
<code>assets/icons/food & beverage/beer-glass.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>beer-glass</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#beer-glass">
</use>
</svg>
</td>
</tr>
<tr data-index="5">
<td>Bottle</td>
<td>
<code>#bottle</code>
</td>
<td>
<code>assets/icons/food & beverage/bottle.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>bottle</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#bottle">
</use>
</svg>
</td>
</tr>
<tr data-index="6">
<td>Bottles</td>
<td>
<code>#bottles</code>
</td>
<td>
<code>assets/icons/food & beverage/bottles.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>bottles</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#bottles">
</use>
</svg>
</td>
</tr>
<tr data-index="7">
<td>Bread</td>
<td>
<code>#bread</code>
</td>
<td>
<code>assets/icons/food & beverage/bread.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>bread</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#bread">
</use>
</svg>
</td>
</tr>
<tr data-index="8">
<td>Bun</td>
<td>
<code>#bun</code>
</td>
<td>
<code>assets/icons/food & beverage/bun.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>bun</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#bun">
</use>
</svg>
</td>
</tr>
<tr data-index="9">
<td>Cheese 1</td>
<td>
<code>#cheese-1</code>
</td>
<td>
<code>assets/icons/food & beverage/cheese-1.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>cheese-1</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#cheese-1">
</use>
</svg>
</td>
</tr>
<tr data-index="10">
<td>Cheese 2</td>
<td>
<code>#cheese-2</code>
</td>
<td>
<code>assets/icons/food & beverage/cheese-2.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>cheese-2</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#cheese-2">
</use>
</svg>
</td>
</tr>
<tr data-index="11">
<td>Chefs Hat</td>
<td>
<code>#chefs-hat</code>
</td>
<td>
<code>assets/icons/food & beverage/chefs-hat.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>chefs-hat</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#chefs-hat">
</use>
</svg>
</td>
</tr>
<tr data-index="12">
<td>Chocolate Bar</td>
<td>
<code>#chocolate-bar</code>
</td>
<td>
<code>assets/icons/food & beverage/chocolate-bar.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>chocolate-bar</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#chocolate-bar">
</use>
</svg>
</td>
</tr>
<tr data-index="13">
<td>Cupcake</td>
<td>
<code>#cupcake</code>
</td>
<td>
<code>assets/icons/food & beverage/cupcake.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>cupcake</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#cupcake">
</use>
</svg>
</td>
</tr>
<tr data-index="14">
<td>Cutlery Plate</td>
<td>
<code>#cutlery-plate</code>
</td>
<td>
<code>assets/icons/food & beverage/cutlery-plate.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>cutlery-plate</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#cutlery-plate">
</use>
</svg>
</td>
</tr>
<tr data-index="15">
<td>Different Bottles</td>
<td>
<code>#different-bottles</code>
</td>
<td>
<code>assets/icons/food & beverage/different-bottles.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>different-bottles</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#different-bottles">
</use>
</svg>
</td>
</tr>
<tr data-index="16">
<td>Food 1</td>
<td>
<code>#food-1</code>
</td>
<td>
<code>assets/icons/food & beverage/food-1.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>food-1</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#food-1">
</use>
</svg>
</td>
</tr>
<tr data-index="17">
<td>Food 2</td>
<td>
<code>#food-2</code>
</td>
<td>
<code>assets/icons/food & beverage/food-2.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>food-2</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#food-2">
</use>
</svg>
</td>
</tr>
<tr data-index="18">
<td>Glass Bottle Percentage</td>
<td>
<code>#glass-bottle-percentage</code>
</td>
<td>
<code>assets/icons/food & beverage/glass-bottle-percentage.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>glass-bottle-percentage</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#glass-bottle-percentage">
</use>
</svg>
</td>
</tr>
<tr data-index="19">
<td>Grapes</td>
<td>
<code>#grapes</code>
</td>
<td>
<code>assets/icons/food & beverage/grapes.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>grapes</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#grapes">
</use>
</svg>
</td>
</tr>
<tr data-index="20">
<td>Grill</td>
<td>
<code>#grill</code>
</td>
<td>
<code>assets/icons/food & beverage/grill.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>grill</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#grill">
</use>
</svg>
</td>
</tr>
<tr data-index="21">
<td>Mug Hot</td>
<td>
<code>#mug-hot</code>
</td>
<td>
<code>assets/icons/food & beverage/mug-hot.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>mug-hot</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#mug-hot">
</use>
</svg>
</td>
</tr>
<tr data-index="22">
<td>Olive Cheese</td>
<td>
<code>#olive-cheese</code>
</td>
<td>
<code>assets/icons/food & beverage/olive-cheese.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>olive-cheese</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#olive-cheese">
</use>
</svg>
</td>
</tr>
<tr data-index="23">
<td>Piece Of Cake</td>
<td>
<code>#piece-of-cake</code>
</td>
<td>
<code>assets/icons/food & beverage/piece-of-cake.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>piece-of-cake</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#piece-of-cake">
</use>
</svg>
</td>
</tr>
<tr data-index="24">
<td>Pretzel</td>
<td>
<code>#pretzel</code>
</td>
<td>
<code>assets/icons/food & beverage/pretzel.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>pretzel</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#pretzel">
</use>
</svg>
</td>
</tr>
<tr data-index="25">
<td>Salad Bowl</td>
<td>
<code>#salad-bowl</code>
</td>
<td>
<code>assets/icons/food & beverage/salad-bowl.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>salad-bowl</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#salad-bowl">
</use>
</svg>
</td>
</tr>
<tr data-index="26">
<td>Salami</td>
<td>
<code>#salami</code>
</td>
<td>
<code>assets/icons/food & beverage/salami.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>salami</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#salami">
</use>
</svg>
</td>
</tr>
<tr data-index="27">
<td>Shell</td>
<td>
<code>#shell</code>
</td>
<td>
<code>assets/icons/food & beverage/shell.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>shell</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#shell">
</use>
</svg>
</td>
</tr>
<tr data-index="28">
<td>Steak</td>
<td>
<code>#steak</code>
</td>
<td>
<code>assets/icons/food & beverage/steak.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>steak</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#steak">
</use>
</svg>
</td>
</tr>
<tr data-index="29">
<td>Vegetables</td>
<td>
<code>#vegetables</code>
</td>
<td>
<code>assets/icons/food & beverage/vegetables.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>vegetables</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#vegetables">
</use>
</svg>
</td>
</tr>
<tr data-index="30">
<td>Wine Glas 1</td>
<td>
<code>#wine-glas-1</code>
</td>
<td>
<code>assets/icons/food & beverage/wine-glas-1.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>wine-glas-1</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#wine-glas-1">
</use>
</svg>
</td>
</tr>
<tr data-index="31">
<td>Wine Glas 2</td>
<td>
<code>#wine-glas-2</code>
</td>
<td>
<code>assets/icons/food & beverage/wine-glas-2.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>wine-glas-2</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#wine-glas-2">
</use>
</svg>
</td>
</tr>
<tr data-index="32">
<td>Wine Glasses</td>
<td>
<code>#wine-glasses</code>
</td>
<td>
<code>assets/icons/food & beverage/wine-glasses.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>wine-glasses</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#wine-glasses">
</use>
</svg>
</td>
</tr>
</tbody>
</table>
</div>
<h3 id="interaction">Interaction</h3>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Icon</th>
<th>Reference</th>
<th>Icon-Path</th>
<th>Preview</th>
</tr>
</thead>
<tbody>
<tr data-index="1">
<td>360 Degree</td>
<td>
<code>#360-degree</code>
</td>
<td>
<code>assets/icons/interaction/360-degree.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>360-degree</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#360-degree">
</use>
</svg>
</td>
</tr>
<tr data-index="2">
<td>Arrow Left Circle</td>
<td>
<code>#arrow-left-circle</code>
</td>
<td>
<code>assets/icons/interaction/arrow-left-circle.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>arrow-left-circle</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#arrow-left-circle">
</use>
</svg>
</td>
</tr>
<tr data-index="3">
<td>Arrow Right Circle</td>
<td>
<code>#arrow-right-circle</code>
</td>
<td>
<code>assets/icons/interaction/arrow-right-circle.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>arrow-right-circle</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#arrow-right-circle">
</use>
</svg>
</td>
</tr>
<tr data-index="4">
<td>Arrows Expand</td>
<td>
<code>#arrows-expand</code>
</td>
<td>
<code>assets/icons/interaction/arrows-expand.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>arrows-expand</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#arrows-expand">
</use>
</svg>
</td>
</tr>
<tr data-index="5">
<td>Arrows Vertical</td>
<td>
<code>#arrows-vertical</code>
</td>
<td>
<code>assets/icons/interaction/arrows-vertical.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>arrows-vertical</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#arrows-vertical">
</use>
</svg>
</td>
</tr>
<tr data-index="6">
<td>Bars Horizontal</td>
<td>
<code>#bars-horizontal</code>
</td>
<td>
<code>assets/icons/interaction/bars-horizontal.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>bars-horizontal</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#bars-horizontal">
</use>
</svg>
</td>
</tr>
<tr data-index="7">
<td>Book Open</td>
<td>
<code>#book-open</code>
</td>
<td>
<code>assets/icons/interaction/book-open.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>book-open</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#book-open">
</use>
</svg>
</td>
</tr>
<tr data-index="8">
<td>Bulletlist</td>
<td>
<code>#bulletlist</code>
</td>
<td>
<code>assets/icons/interaction/bulletlist.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>bulletlist</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#bulletlist">
</use>
</svg>
</td>
</tr>
<tr data-index="9">
<td>Calendar Clock</td>
<td>
<code>#calendar-clock</code>
</td>
<td>
<code>assets/icons/interaction/calendar-clock.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>calendar-clock</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#calendar-clock">
</use>
</svg>
</td>
</tr>
<tr data-index="10">
<td>Calendar</td>
<td>
<code>#calendar</code>
</td>
<td>
<code>assets/icons/interaction/calendar.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>calendar</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#calendar">
</use>
</svg>
</td>
</tr>
<tr data-index="11">
<td>Camera</td>
<td>
<code>#camera</code>
</td>
<td>
<code>assets/icons/interaction/camera.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>camera</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#camera">
</use>
</svg>
</td>
</tr>
<tr data-index="12">
<td>Checklist</td>
<td>
<code>#checklist</code>
</td>
<td>
<code>assets/icons/interaction/checklist.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>checklist</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#checklist">
</use>
</svg>
</td>
</tr>
<tr data-index="13">
<td>Clip</td>
<td>
<code>#clip</code>
</td>
<td>
<code>assets/icons/interaction/clip.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>clip</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#clip">
</use>
</svg>
</td>
</tr>
<tr data-index="14">
<td>Clock</td>
<td>
<code>#clock</code>
</td>
<td>
<code>assets/icons/interaction/clock.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>clock</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#clock">
</use>
</svg>
</td>
</tr>
<tr data-index="15">
<td>Cogwheel</td>
<td>
<code>#cogwheel</code>
</td>
<td>
<code>assets/icons/interaction/cogwheel.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>cogwheel</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#cogwheel">
</use>
</svg>
</td>
</tr>
<tr data-index="16">
<td>Controls</td>
<td>
<code>#controls</code>
</td>
<td>
<code>assets/icons/interaction/controls.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>controls</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#controls">
</use>
</svg>
</td>
</tr>
<tr data-index="17">
<td>Crosshair</td>
<td>
<code>#crosshair</code>
</td>
<td>
<code>assets/icons/interaction/crosshair.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>crosshair</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#crosshair">
</use>
</svg>
</td>
</tr>
<tr data-index="18">
<td>Download</td>
<td>
<code>#download</code>
</td>
<td>
<code>assets/icons/interaction/download.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>download</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#download">
</use>
</svg>
</td>
</tr>
<tr data-index="19">
<td>Ellipsis Horizontal</td>
<td>
<code>#ellipsis-horizontal</code>
</td>
<td>
<code>assets/icons/interaction/ellipsis-horizontal.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>ellipsis-horizontal</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#ellipsis-horizontal">
</use>
</svg>
</td>
</tr>
<tr data-index="20">
<td>Envelope Close</td>
<td>
<code>#envelope-close</code>
</td>
<td>
<code>assets/icons/interaction/envelope-close.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>envelope-close</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#envelope-close">
</use>
</svg>
</td>
</tr>
<tr data-index="21">
<td>Envelope Open</td>
<td>
<code>#envelope-open</code>
</td>
<td>
<code>assets/icons/interaction/envelope-open.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>envelope-open</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#envelope-open">
</use>
</svg>
</td>
</tr>
<tr data-index="22">
<td>External Link</td>
<td>
<code>#external-link</code>
</td>
<td>
<code>assets/icons/interaction/external-link.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>external-link</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#external-link">
</use>
</svg>
</td>
</tr>
<tr data-index="23">
<td>Eye Close</td>
<td>
<code>#eye-close</code>
</td>
<td>
<code>assets/icons/interaction/eye-close.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>eye-close</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#eye-close">
</use>
</svg>
</td>
</tr>
<tr data-index="24">
<td>Eye Open</td>
<td>
<code>#eye-open</code>
</td>
<td>
<code>assets/icons/interaction/eye-open.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>eye-open</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#eye-open">
</use>
</svg>
</td>
</tr>
<tr data-index="25">
<td>File</td>
<td>
<code>#file</code>
</td>
<td>
<code>assets/icons/interaction/file.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>file</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#file">
</use>
</svg>
</td>
</tr>
<tr data-index="26">
<td>Fingerprint</td>
<td>
<code>#fingerprint</code>
</td>
<td>
<code>assets/icons/interaction/fingerprint.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>fingerprint</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#fingerprint">
</use>
</svg>
</td>
</tr>
<tr data-index="27">
<td>Flyer</td>
<td>
<code>#flyer</code>
</td>
<td>
<code>assets/icons/interaction/flyer.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>flyer</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#flyer">
</use>
</svg>
</td>
</tr>
<tr data-index="28">
<td>Hand Pointer</td>
<td>
<code>#hand-pointer</code>
</td>
<td>
<code>assets/icons/interaction/hand-pointer.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>hand-pointer</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#hand-pointer">
</use>
</svg>
</td>
</tr>
<tr data-index="29">
<td>Hook</td>
<td>
<code>#hook</code>
</td>
<td>
<code>assets/icons/interaction/hook.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>hook</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#hook">
</use>
</svg>
</td>
</tr>
<tr data-index="30">
<td>House</td>
<td>
<code>#house</code>
</td>
<td>
<code>assets/icons/interaction/house.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>house</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#house">
</use>
</svg>
</td>
</tr>
<tr data-index="31">
<td>Invoice</td>
<td>
<code>#invoice</code>
</td>
<td>
<code>assets/icons/interaction/invoice.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>invoice</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#invoice">
</use>
</svg>
</td>
</tr>
<tr data-index="32">
<td>Lock Close</td>
<td>
<code>#lock-close</code>
</td>
<td>
<code>assets/icons/interaction/lock-close.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>lock-close</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#lock-close">
</use>
</svg>
</td>
</tr>
<tr data-index="33">
<td>Lock Open</td>
<td>
<code>#lock-open</code>
</td>
<td>
<code>assets/icons/interaction/lock-open.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>lock-open</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#lock-open">
</use>
</svg>
</td>
</tr>
<tr data-index="34">
<td>Magnifier Minus</td>
<td>
<code>#magnifier-minus</code>
</td>
<td>
<code>assets/icons/interaction/magnifier-minus.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>magnifier-minus</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#magnifier-minus">
</use>
</svg>
</td>
</tr>
<tr data-index="35">
<td>Magnifier Plus</td>
<td>
<code>#magnifier-plus</code>
</td>
<td>
<code>assets/icons/interaction/magnifier-plus.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>magnifier-plus</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#magnifier-plus">
</use>
</svg>
</td>
</tr>
<tr data-index="36">
<td>Magnifier</td>
<td>
<code>#magnifier</code>
</td>
<td>
<code>assets/icons/interaction/magnifier.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>magnifier</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#magnifier">
</use>
</svg>
</td>
</tr>
<tr data-index="37">
<td>Map Marker</td>
<td>
<code>#map-marker</code>
</td>
<td>
<code>assets/icons/interaction/map-marker.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>map-marker</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#map-marker">
</use>
</svg>
</td>
</tr>
<tr data-index="38">
<td>Map</td>
<td>
<code>#map</code>
</td>
<td>
<code>assets/icons/interaction/map.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>map</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#map">
</use>
</svg>
</td>
</tr>
<tr data-index="39">
<td>Microphone On</td>
<td>
<code>#microphone-on</code>
</td>
<td>
<code>assets/icons/interaction/microphone-on.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>microphone-on</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#microphone-on">
</use>
</svg>
</td>
</tr>
<tr data-index="40">
<td>Minus</td>
<td>
<code>#minus</code>
</td>
<td>
<code>assets/icons/interaction/minus.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>minus</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#minus">
</use>
</svg>
</td>
</tr>
<tr data-index="41">
<td>Paper Plane</td>
<td>
<code>#paper-plane</code>
</td>
<td>
<code>assets/icons/interaction/paper-plane.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>paper-plane</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#paper-plane">
</use>
</svg>
</td>
</tr>
<tr data-index="42">
<td>Pause Circle</td>
<td>
<code>#pause-circle</code>
</td>
<td>
<code>assets/icons/interaction/pause-circle.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>pause-circle</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#pause-circle">
</use>
</svg>
</td>
</tr>
<tr data-index="43">
<td>Pencil</td>
<td>
<code>#pencil</code>
</td>
<td>
<code>assets/icons/interaction/pencil.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>pencil</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#pencil">
</use>
</svg>
</td>
</tr>
<tr data-index="44">
<td>Phone Envelope</td>
<td>
<code>#phone-envelope</code>
</td>
<td>
<code>assets/icons/interaction/phone-envelope.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>phone-envelope</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#phone-envelope">
</use>
</svg>
</td>
</tr>
<tr data-index="45">
<td>Phone</td>
<td>
<code>#phone</code>
</td>
<td>
<code>assets/icons/interaction/phone.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>phone</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#phone">
</use>
</svg>
</td>
</tr>
<tr data-index="46">
<td>Placeholder</td>
<td>
<code>#placeholder</code>
</td>
<td>
<code>assets/icons/interaction/placeholder.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>placeholder</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#placeholder">
</use>
</svg>
</td>
</tr>
<tr data-index="47">
<td>Play Circle</td>
<td>
<code>#play-circle</code>
</td>
<td>
<code>assets/icons/interaction/play-circle.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>play-circle</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#play-circle">
</use>
</svg>
</td>
</tr>
<tr data-index="48">
<td>Plus</td>
<td>
<code>#plus</code>
</td>
<td>
<code>assets/icons/interaction/plus.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>plus</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#plus">
</use>
</svg>
</td>
</tr>
<tr data-index="49">
<td>Printer</td>
<td>
<code>#printer</code>
</td>
<td>
<code>assets/icons/interaction/printer.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>printer</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#printer">
</use>
</svg>
</td>
</tr>
<tr data-index="50">
<td>Share</td>
<td>
<code>#share</code>
</td>
<td>
<code>assets/icons/interaction/share.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>share</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#share">
</use>
</svg>
</td>
</tr>
<tr data-index="51">
<td>Shopping Bag</td>
<td>
<code>#shopping-bag</code>
</td>
<td>
<code>assets/icons/interaction/shopping-bag.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>shopping-bag</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#shopping-bag">
</use>
</svg>
</td>
</tr>
<tr data-index="52">
<td>Shopping Cart 1</td>
<td>
<code>#shopping-cart-1</code>
</td>
<td>
<code>assets/icons/interaction/shopping-cart-1.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>shopping-cart-1</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#shopping-cart-1">
</use>
</svg>
</td>
</tr>
<tr data-index="53">
<td>Shopping Cart 2</td>
<td>
<code>#shopping-cart-2</code>
</td>
<td>
<code>assets/icons/interaction/shopping-cart-2.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>shopping-cart-2</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#shopping-cart-2">
</use>
</svg>
</td>
</tr>
<tr data-index="54">
<td>Social Share</td>
<td>
<code>#social-share</code>
</td>
<td>
<code>assets/icons/interaction/social-share.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>social-share</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#social-share">
</use>
</svg>
</td>
</tr>
<tr data-index="55">
<td>Square</td>
<td>
<code>#square</code>
</td>
<td>
<code>assets/icons/interaction/square.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>square</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#square">
</use>
</svg>
</td>
</tr>
<tr data-index="56">
<td>Store Magnifier</td>
<td>
<code>#store-magnifier</code>
</td>
<td>
<code>assets/icons/interaction/store-magnifier.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>store-magnifier</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#store-magnifier">
</use>
</svg>
</td>
</tr>
<tr data-index="57">
<td>Store</td>
<td>
<code>#store</code>
</td>
<td>
<code>assets/icons/interaction/store.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>store</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#store">
</use>
</svg>
</td>
</tr>
<tr data-index="58">
<td>Sync</td>
<td>
<code>#sync</code>
</td>
<td>
<code>assets/icons/interaction/sync.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>sync</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#sync">
</use>
</svg>
</td>
</tr>
<tr data-index="59">
<td>Trash</td>
<td>
<code>#trash</code>
</td>
<td>
<code>assets/icons/interaction/trash.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>trash</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#trash">
</use>
</svg>
</td>
</tr>
<tr data-index="60">
<td>Upload</td>
<td>
<code>#upload</code>
</td>
<td>
<code>assets/icons/interaction/upload.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>upload</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#upload">
</use>
</svg>
</td>
</tr>
<tr data-index="61">
<td>User Eighteen Plus</td>
<td>
<code>#user-eighteen-plus</code>
</td>
<td>
<code>assets/icons/interaction/user-eighteen-plus.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>user-eighteen-plus</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#user-eighteen-plus">
</use>
</svg>
</td>
</tr>
<tr data-index="62">
<td>User</td>
<td>
<code>#user</code>
</td>
<td>
<code>assets/icons/interaction/user.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>user</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#user">
</use>
</svg>
</td>
</tr>
<tr data-index="63">
<td>Volume Up</td>
<td>
<code>#volume-up</code>
</td>
<td>
<code>assets/icons/interaction/volume-up.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>volume-up</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#volume-up">
</use>
</svg>
</td>
</tr>
</tbody>
</table>
</div>
<h3 id="nature">Nature</h3>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Icon</th>
<th>Reference</th>
<th>Icon-Path</th>
<th>Preview</th>
</tr>
</thead>
<tbody>
<tr data-index="1">
<td>Cloud</td>
<td>
<code>#cloud</code>
</td>
<td>
<code>assets/icons/nature/cloud.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>cloud</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#cloud">
</use>
</svg>
</td>
</tr>
<tr data-index="2">
<td>Earth Map Marker</td>
<td>
<code>#earth-map-marker</code>
</td>
<td>
<code>assets/icons/nature/earth-map-marker.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>earth-map-marker</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#earth-map-marker">
</use>
</svg>
</td>
</tr>
<tr data-index="3">
<td>Earth</td>
<td>
<code>#earth</code>
</td>
<td>
<code>assets/icons/nature/earth.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>earth</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#earth">
</use>
</svg>
</td>
</tr>
<tr data-index="4">
<td>Ecology 2</td>
<td>
<code>#ecology-2</code>
</td>
<td>
<code>assets/icons/nature/ecology-2.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>ecology-2</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#ecology-2">
</use>
</svg>
</td>
</tr>
<tr data-index="5">
<td>Ecology</td>
<td>
<code>#ecology</code>
</td>
<td>
<code>assets/icons/nature/ecology.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>ecology</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#ecology">
</use>
</svg>
</td>
</tr>
<tr data-index="6">
<td>Heartbeat</td>
<td>
<code>#heartbeat</code>
</td>
<td>
<code>assets/icons/nature/heartbeat.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>heartbeat</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#heartbeat">
</use>
</svg>
</td>
</tr>
<tr data-index="7">
<td>Leaf</td>
<td>
<code>#leaf</code>
</td>
<td>
<code>assets/icons/nature/leaf.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>leaf</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#leaf">
</use>
</svg>
</td>
</tr>
<tr data-index="8">
<td>Snowflake</td>
<td>
<code>#snowflake</code>
</td>
<td>
<code>assets/icons/nature/snowflake.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>snowflake</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#snowflake">
</use>
</svg>
</td>
</tr>
<tr data-index="9">
<td>Sun</td>
<td>
<code>#sun</code>
</td>
<td>
<code>assets/icons/nature/sun.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>sun</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#sun">
</use>
</svg>
</td>
</tr>
<tr data-index="10">
<td>Thermometer</td>
<td>
<code>#thermometer</code>
</td>
<td>
<code>assets/icons/nature/thermometer.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>thermometer</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#thermometer">
</use>
</svg>
</td>
</tr>
</tbody>
</table>
</div>
<h3 id="navigation">Navigation</h3>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Icon</th>
<th>Reference</th>
<th>Icon-Path</th>
<th>Preview</th>
</tr>
</thead>
<tbody>
<tr data-index="1">
<td>Arrow Down</td>
<td>
<code>#arrow-down</code>
</td>
<td>
<code>assets/icons/navigation/arrow-down.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>arrow-down</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#arrow-down">
</use>
</svg>
</td>
</tr>
<tr data-index="2">
<td>Arrow Left</td>
<td>
<code>#arrow-left</code>
</td>
<td>
<code>assets/icons/navigation/arrow-left.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>arrow-left</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#arrow-left">
</use>
</svg>
</td>
</tr>
<tr data-index="3">
<td>Arrow Right</td>
<td>
<code>#arrow-right</code>
</td>
<td>
<code>assets/icons/navigation/arrow-right.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>arrow-right</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#arrow-right">
</use>
</svg>
</td>
</tr>
<tr data-index="4">
<td>Arrow Up</td>
<td>
<code>#arrow-up</code>
</td>
<td>
<code>assets/icons/navigation/arrow-up.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>arrow-up</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#arrow-up">
</use>
</svg>
</td>
</tr>
<tr data-index="5">
<td>Cross</td>
<td>
<code>#cross</code>
</td>
<td>
<code>assets/icons/navigation/cross.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>cross</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#cross">
</use>
</svg>
</td>
</tr>
<tr data-index="6">
<td>Undo</td>
<td>
<code>#undo</code>
</td>
<td>
<code>assets/icons/navigation/undo.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>undo</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#undo">
</use>
</svg>
</td>
</tr>
</tbody>
</table>
</div>
<h3 id="payment">Payment</h3>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Icon</th>
<th>Reference</th>
<th>Icon-Path</th>
<th>Preview</th>
</tr>
</thead>
<tbody>
<tr data-index="1">
<td>Contactless Payment</td>
<td>
<code>#contactless-payment</code>
</td>
<td>
<code>assets/icons/payment/contactless-payment.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>contactless-payment</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#contactless-payment">
</use>
</svg>
</td>
</tr>
<tr data-index="2">
<td>Credit Card</td>
<td>
<code>#credit-card</code>
</td>
<td>
<code>assets/icons/payment/credit-card.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>credit-card</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#credit-card">
</use>
</svg>
</td>
</tr>
<tr data-index="3">
<td>Hand Coins</td>
<td>
<code>#hand-coins</code>
</td>
<td>
<code>assets/icons/payment/hand-coins.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>hand-coins</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#hand-coins">
</use>
</svg>
</td>
</tr>
<tr data-index="4">
<td>Money Return</td>
<td>
<code>#money-return</code>
</td>
<td>
<code>assets/icons/payment/money-return.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>money-return</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#money-return">
</use>
</svg>
</td>
</tr>
<tr data-index="5">
<td>Money</td>
<td>
<code>#money</code>
</td>
<td>
<code>assets/icons/payment/money.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>money</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#money">
</use>
</svg>
</td>
</tr>
<tr data-index="6">
<td>Voucher Euro</td>
<td>
<code>#voucher-euro</code>
</td>
<td>
<code>assets/icons/payment/voucher-euro.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>voucher-euro</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#voucher-euro">
</use>
</svg>
</td>
</tr>
<tr data-index="7">
<td>Voucher Gift</td>
<td>
<code>#voucher-gift</code>
</td>
<td>
<code>assets/icons/payment/voucher-gift.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>voucher-gift</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#voucher-gift">
</use>
</svg>
</td>
</tr>
<tr data-index="8">
<td>Voucher Percentage</td>
<td>
<code>#voucher-percentage</code>
</td>
<td>
<code>assets/icons/payment/voucher-percentage.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>voucher-percentage</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#voucher-percentage">
</use>
</svg>
</td>
</tr>
<tr data-index="9">
<td>Wallet Coins</td>
<td>
<code>#wallet-coins</code>
</td>
<td>
<code>assets/icons/payment/wallet-coins.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>wallet-coins</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#wallet-coins">
</use>
</svg>
</td>
</tr>
</tbody>
</table>
</div>
<h3 id="smiley">Smiley</h3>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Icon</th>
<th>Reference</th>
<th>Icon-Path</th>
<th>Preview</th>
</tr>
</thead>
<tbody>
<tr data-index="1">
<td>Smiley Bad Solid</td>
<td>
<code>#smiley-bad-solid</code>
</td>
<td>
<code>assets/icons/smiley/smiley-bad-solid.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>smiley-bad-solid</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#smiley-bad-solid">
</use>
</svg>
</td>
</tr>
<tr data-index="2">
<td>Smiley Bad</td>
<td>
<code>#smiley-bad</code>
</td>
<td>
<code>assets/icons/smiley/smiley-bad.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>smiley-bad</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#smiley-bad">
</use>
</svg>
</td>
</tr>
<tr data-index="3">
<td>Smiley Best Solid</td>
<td>
<code>#smiley-best-solid</code>
</td>
<td>
<code>assets/icons/smiley/smiley-best-solid.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>smiley-best-solid</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#smiley-best-solid">
</use>
</svg>
</td>
</tr>
<tr data-index="4">
<td>Smiley Best</td>
<td>
<code>#smiley-best</code>
</td>
<td>
<code>assets/icons/smiley/smiley-best.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>smiley-best</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#smiley-best">
</use>
</svg>
</td>
</tr>
<tr data-index="5">
<td>Smiley Better Solid</td>
<td>
<code>#smiley-better-solid</code>
</td>
<td>
<code>assets/icons/smiley/smiley-better-solid.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>smiley-better-solid</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#smiley-better-solid">
</use>
</svg>
</td>
</tr>
<tr data-index="6">
<td>Smiley Better</td>
<td>
<code>#smiley-better</code>
</td>
<td>
<code>assets/icons/smiley/smiley-better.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>smiley-better</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#smiley-better">
</use>
</svg>
</td>
</tr>
<tr data-index="7">
<td>Smiley Good Solid</td>
<td>
<code>#smiley-good-solid</code>
</td>
<td>
<code>assets/icons/smiley/smiley-good-solid.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>smiley-good-solid</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#smiley-good-solid">
</use>
</svg>
</td>
</tr>
<tr data-index="8">
<td>Smiley Good</td>
<td>
<code>#smiley-good</code>
</td>
<td>
<code>assets/icons/smiley/smiley-good.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>smiley-good</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#smiley-good">
</use>
</svg>
</td>
</tr>
<tr data-index="9">
<td>Smiley Neutral Solid</td>
<td>
<code>#smiley-neutral-solid</code>
</td>
<td>
<code>assets/icons/smiley/smiley-neutral-solid.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>smiley-neutral-solid</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#smiley-neutral-solid">
</use>
</svg>
</td>
</tr>
<tr data-index="10">
<td>Smiley Neutral</td>
<td>
<code>#smiley-neutral</code>
</td>
<td>
<code>assets/icons/smiley/smiley-neutral.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>smiley-neutral</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#smiley-neutral">
</use>
</svg>
</td>
</tr>
<tr data-index="11">
<td>Smiley Worst Solid</td>
<td>
<code>#smiley-worst-solid</code>
</td>
<td>
<code>assets/icons/smiley/smiley-worst-solid.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>smiley-worst-solid</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#smiley-worst-solid">
</use>
</svg>
</td>
</tr>
<tr data-index="12">
<td>Smiley Worst</td>
<td>
<code>#smiley-worst</code>
</td>
<td>
<code>assets/icons/smiley/smiley-worst.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>smiley-worst</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#smiley-worst">
</use>
</svg>
</td>
</tr>
</tbody>
</table>
</div>
<h3 id="status">Status</h3>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Icon</th>
<th>Reference</th>
<th>Icon-Path</th>
<th>Preview</th>
</tr>
</thead>
<tbody>
<tr data-index="1">
<td>Bell Regular</td>
<td>
<code>#bell-regular</code>
</td>
<td>
<code>assets/icons/status/bell-regular.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>bell-regular</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#bell-regular">
</use>
</svg>
</td>
</tr>
<tr data-index="2">
<td>Bell Solid</td>
<td>
<code>#bell-solid</code>
</td>
<td>
<code>assets/icons/status/bell-solid.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>bell-solid</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#bell-solid">
</use>
</svg>
</td>
</tr>
<tr data-index="3">
<td>Bookmark Regular</td>
<td>
<code>#bookmark-regular</code>
</td>
<td>
<code>assets/icons/status/bookmark-regular.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>bookmark-regular</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#bookmark-regular">
</use>
</svg>
</td>
</tr>
<tr data-index="4">
<td>Bookmark Solid</td>
<td>
<code>#bookmark-solid</code>
</td>
<td>
<code>assets/icons/status/bookmark-solid.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>bookmark-solid</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#bookmark-solid">
</use>
</svg>
</td>
</tr>
<tr data-index="5">
<td>Heart Regular</td>
<td>
<code>#heart-regular</code>
</td>
<td>
<code>assets/icons/status/heart-regular.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>heart-regular</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#heart-regular">
</use>
</svg>
</td>
</tr>
<tr data-index="6">
<td>Heart Solid</td>
<td>
<code>#heart-solid</code>
</td>
<td>
<code>assets/icons/status/heart-solid.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>heart-solid</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#heart-solid">
</use>
</svg>
</td>
</tr>
<tr data-index="7">
<td>Star Regular</td>
<td>
<code>#star-regular</code>
</td>
<td>
<code>assets/icons/status/star-regular.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>star-regular</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#star-regular">
</use>
</svg>
</td>
</tr>
<tr data-index="8">
<td>Star Solid</td>
<td>
<code>#star-solid</code>
</td>
<td>
<code>assets/icons/status/star-solid.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>star-solid</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#star-solid">
</use>
</svg>
</td>
</tr>
<tr data-index="9">
<td>Thumbs Down Regular</td>
<td>
<code>#thumbs-down-regular</code>
</td>
<td>
<code>assets/icons/status/thumbs-down-regular.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>thumbs-down-regular</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#thumbs-down-regular">
</use>
</svg>
</td>
</tr>
<tr data-index="10">
<td>Thumbs Down Solid</td>
<td>
<code>#thumbs-down-solid</code>
</td>
<td>
<code>assets/icons/status/thumbs-down-solid.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>thumbs-down-solid</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#thumbs-down-solid">
</use>
</svg>
</td>
</tr>
<tr data-index="11">
<td>Thumbs Up Regular</td>
<td>
<code>#thumbs-up-regular</code>
</td>
<td>
<code>assets/icons/status/thumbs-up-regular.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>thumbs-up-regular</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#thumbs-up-regular">
</use>
</svg>
</td>
</tr>
<tr data-index="12">
<td>Thumbs Up Solid</td>
<td>
<code>#thumbs-up-solid</code>
</td>
<td>
<code>assets/icons/status/thumbs-up-solid.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>thumbs-up-solid</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#thumbs-up-solid">
</use>
</svg>
</td>
</tr>
</tbody>
</table>
</div>
<h3 id="store locator pin">Store locator pin</h3>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Icon</th>
<th>Reference</th>
<th>Icon-Path</th>
<th>Preview</th>
</tr>
</thead>
<tbody>
<tr data-index="1">
<td>Available Store Default</td>
<td>
<code>#available-store-default</code>
</td>
<td>
<code>assets/icons/store locator pin/available-store-default.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>available-store-default</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#available-store-default">
</use>
</svg>
</td>
</tr>
<tr data-index="2">
<td>Available Store Selected</td>
<td>
<code>#available-store-selected</code>
</td>
<td>
<code>assets/icons/store locator pin/available-store-selected.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>available-store-selected</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#available-store-selected">
</use>
</svg>
</td>
</tr>
<tr data-index="3">
<td>Group</td>
<td>
<code>#group</code>
</td>
<td>
<code>assets/icons/store locator pin/group.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>group</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#group">
</use>
</svg>
</td>
</tr>
<tr data-index="4">
<td>Low Stock Store Default</td>
<td>
<code>#low-stock-store-default</code>
</td>
<td>
<code>assets/icons/store locator pin/low-stock-store-default.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>low-stock-store-default</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#low-stock-store-default">
</use>
</svg>
</td>
</tr>
<tr data-index="5">
<td>Low Stock Store Selected</td>
<td>
<code>#low-stock-store-selected</code>
</td>
<td>
<code>assets/icons/store locator pin/low-stock-store-selected.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>low-stock-store-selected</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#low-stock-store-selected">
</use>
</svg>
</td>
</tr>
<tr data-index="6">
<td>My Store Default</td>
<td>
<code>#my-store-default</code>
</td>
<td>
<code>assets/icons/store locator pin/my-store-default.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>my-store-default</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#my-store-default">
</use>
</svg>
</td>
</tr>
<tr data-index="7">
<td>My Store Selected</td>
<td>
<code>#my-store-selected</code>
</td>
<td>
<code>assets/icons/store locator pin/my-store-selected.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>my-store-selected</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#my-store-selected">
</use>
</svg>
</td>
</tr>
<tr data-index="8">
<td>No Data Available Store Default</td>
<td>
<code>#no-data-available-store-default</code>
</td>
<td>
<code>assets/icons/store locator pin/no-data-available-store-default.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>no-data-available-store-default</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#no-data-available-store-default">
</use>
</svg>
</td>
</tr>
<tr data-index="9">
<td>No Data Available Store Selected</td>
<td>
<code>#no-data-available-store-selected</code>
</td>
<td>
<code>assets/icons/store locator pin/no-data-available-store-selected.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>no-data-available-store-selected</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#no-data-available-store-selected">
</use>
</svg>
</td>
</tr>
<tr data-index="10">
<td>Sold Out Store Default</td>
<td>
<code>#sold-out-store-default</code>
</td>
<td>
<code>assets/icons/store locator pin/sold-out-store-default.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>sold-out-store-default</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#sold-out-store-default">
</use>
</svg>
</td>
</tr>
<tr data-index="11">
<td>Sold Out Store Selected</td>
<td>
<code>#sold-out-store-selected</code>
</td>
<td>
<code>assets/icons/store locator pin/sold-out-store-selected.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>sold-out-store-selected</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#sold-out-store-selected">
</use>
</svg>
</td>
</tr>
</tbody>
</table>
</div>
<h3 id="technology">Technology</h3>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Icon</th>
<th>Reference</th>
<th>Icon-Path</th>
<th>Preview</th>
</tr>
</thead>
<tbody>
<tr data-index="1">
<td>Computer Mouse</td>
<td>
<code>#computer-mouse</code>
</td>
<td>
<code>assets/icons/technology/computer-mouse.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>computer-mouse</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#computer-mouse">
</use>
</svg>
</td>
</tr>
<tr data-index="2">
<td>Display Play</td>
<td>
<code>#display-play</code>
</td>
<td>
<code>assets/icons/technology/display-play.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>display-play</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#display-play">
</use>
</svg>
</td>
</tr>
<tr data-index="3">
<td>Display</td>
<td>
<code>#display</code>
</td>
<td>
<code>assets/icons/technology/display.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>display</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#display">
</use>
</svg>
</td>
</tr>
<tr data-index="4">
<td>E Charging Station</td>
<td>
<code>#e-charging-station</code>
</td>
<td>
<code>assets/icons/technology/e-charging-station.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>e-charging-station</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#e-charging-station">
</use>
</svg>
</td>
</tr>
<tr data-index="5">
<td>Keyboard</td>
<td>
<code>#keyboard</code>
</td>
<td>
<code>assets/icons/technology/keyboard.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>keyboard</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#keyboard">
</use>
</svg>
</td>
</tr>
<tr data-index="6">
<td>Power</td>
<td>
<code>#power</code>
</td>
<td>
<code>assets/icons/technology/power.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>power</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#power">
</use>
</svg>
</td>
</tr>
<tr data-index="7">
<td>Smartphone</td>
<td>
<code>#smartphone</code>
</td>
<td>
<code>assets/icons/technology/smartphone.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>smartphone</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#smartphone">
</use>
</svg>
</td>
</tr>
<tr data-index="8">
<td>Wifi</td>
<td>
<code>#wifi</code>
</td>
<td>
<code>assets/icons/technology/wifi.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>wifi</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#wifi">
</use>
</svg>
</td>
</tr>
</tbody>
</table>
</div>
<h3 id="transport & logistic">Transport & logistic</h3>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Icon</th>
<th>Reference</th>
<th>Icon-Path</th>
<th>Preview</th>
</tr>
</thead>
<tbody>
<tr data-index="1">
<td>Bicycle</td>
<td>
<code>#bicycle</code>
</td>
<td>
<code>assets/icons/transport & logistic/bicycle.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>bicycle</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#bicycle">
</use>
</svg>
</td>
</tr>
<tr data-index="2">
<td>Box Coins Return</td>
<td>
<code>#box-coins-return</code>
</td>
<td>
<code>assets/icons/transport & logistic/box-coins-return.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>box-coins-return</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#box-coins-return">
</use>
</svg>
</td>
</tr>
<tr data-index="3">
<td>Box Multiple</td>
<td>
<code>#box-multiple</code>
</td>
<td>
<code>assets/icons/transport & logistic/box-multiple.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>box-multiple</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#box-multiple">
</use>
</svg>
</td>
</tr>
<tr data-index="4">
<td>Box Open</td>
<td>
<code>#box-open</code>
</td>
<td>
<code>assets/icons/transport & logistic/box-open.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>box-open</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#box-open">
</use>
</svg>
</td>
</tr>
<tr data-index="5">
<td>Box Return 30 Days</td>
<td>
<code>#box-return-30-days</code>
</td>
<td>
<code>assets/icons/transport & logistic/box-return-30-days.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>box-return-30-days</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#box-return-30-days">
</use>
</svg>
</td>
</tr>
<tr data-index="6">
<td>Box Return 90 Days</td>
<td>
<code>#box-return-90-days</code>
</td>
<td>
<code>assets/icons/transport & logistic/box-return-90-days.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>box-return-90-days</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#box-return-90-days">
</use>
</svg>
</td>
</tr>
<tr data-index="7">
<td>Box Return</td>
<td>
<code>#box-return</code>
</td>
<td>
<code>assets/icons/transport & logistic/box-return.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>box-return</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#box-return">
</use>
</svg>
</td>
</tr>
<tr data-index="8">
<td>Box</td>
<td>
<code>#box</code>
</td>
<td>
<code>assets/icons/transport & logistic/box.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>box</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#box">
</use>
</svg>
</td>
</tr>
<tr data-index="9">
<td>Car</td>
<td>
<code>#car</code>
</td>
<td>
<code>assets/icons/transport & logistic/car.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>car</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#car">
</use>
</svg>
</td>
</tr>
<tr data-index="10">
<td>Express Delivery</td>
<td>
<code>#express-delivery</code>
</td>
<td>
<code>assets/icons/transport & logistic/express-delivery.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>express-delivery</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#express-delivery">
</use>
</svg>
</td>
</tr>
<tr data-index="11">
<td>Packstation</td>
<td>
<code>#packstation</code>
</td>
<td>
<code>assets/icons/transport & logistic/packstation.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>packstation</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#packstation">
</use>
</svg>
</td>
</tr>
<tr data-index="12">
<td>Plane</td>
<td>
<code>#plane</code>
</td>
<td>
<code>assets/icons/transport & logistic/plane.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>plane</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#plane">
</use>
</svg>
</td>
</tr>
<tr data-index="13">
<td>Truck</td>
<td>
<code>#truck</code>
</td>
<td>
<code>assets/icons/transport & logistic/truck.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>truck</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#truck">
</use>
</svg>
</td>
</tr>
</tbody>
</table>
</div>More icons#
- The Lidl universe contains plenty of other icons that are not available in our design system and frontend framework.
- The naming of SVG files also differs from the Lidl standard because of the general usage of icons in our product.
- For more icons and further details log on to brand.lidl.
Accessibility#
There are some things you should be aware of when using svg images. To increase the accessibility you should always put a title tag explaining the content of the icon inside the svg tag. To give a even more detailed explanation you should consider to add a appropriate description with the desc tag. These descriptions can be very context-dependent wherefore we did not added any description in our showroom. Furthermore you can also use the aria-label attribute to add some meaningful description for screenreaders and other helpful tools.
Change log#
Removed#
Assets: "Icon" | removed redundantstore locator pin/group-store-default.svg
Added#
Assets: "Icon" | added newstore locator piniconsstore locator pin/available-store-default.svgstore locator pin/available-store-selected.svgstore locator pin/group-store-default.svgstore locator pin/group.svgstore locator pin/low-stock-store-default.svgstore locator pin/low-stock-store-selected.svgstore locator pin/my-store-default.svgstore locator pin/my-store-selected.svgstore locator pin/no-data-available-store-default.svgstore locator pin/no-data-available-store-selected.svgstore locator pin/sold-out-store-default.svgstore locator pin/sold-out-store-selected.svg
Changed#
Assets: "Icon" | updated all icons via our Design from the Brand Portal
Changed#
Assets: "Icon" | added new solid versions of the smiley iconssmiley/smiley-bad-solid.svgsmiley/smiley-best-solid.svgsmiley/smiley-better-solid.svgsmiley/smiley-good-solid.svgsmiley/smiley-neutral-solid.svgsmiley/smiley-worst-solid.svg
Changed#
Assets: "Icon" | updated box icon intransport & logistic/box.svg
Added#
Assets: "Icon" | added new iconsexpression/conversation-ballons-chat.svgexpression/lightbulb-off.svgexpression/piggy-bank.svgfood & beverage/beer-glass.svgfood & beverage/bottle.svgfood & beverage/piece-of-cake.svginteraction/invoice.svgnature/ecology-2.svgpayment/voucher-euro.svgpayment/voucher-gift.svgtechnology/e-charging-station.svgtechnology/keyboard.svgtechnology/power.svgtransport & logistic/box-multiple.svgtransport & logistic/box-return-30-days.svgtransport & logistic/box-return-90-days.svgtransport & logistic/express-delivery.svgtransport & logistic/packstation.svg
Changed#
Assets: "Icon" | updatedinteraction/house.svgicon
Changed#
Scss: "Icon" | changed.icon-8>.icon-1,.icon-16>.icon-2,.icon-24>.icon-3and.icon-32>.icon-4Assets: "Icon" | renamed iconcalender-clock.svgtocalendar-clock.svg
Changed#
Assets: "Lidl-Theme" | "Icon" | updated#store-magnifierand#storeto look more like lidl
Added#
Assets: "Lidl-Theme" | "Icon" | new paper-plane and share icon in interaction icons
Added#
Doc: "Icon" | info to more icons
Fixed#
Doc: "Icon" | misspelled headline fixed in icon sizing example
Changed#
Assets: "Lidl-Theme" | "Icon" | Replace and add new set of lidl-icons into the lidl-themeDoc: "Icon" | Icon sizing examples restructured
Changed#
CSS,Assets: "Icon" | component get the icon set from the theme
Removed#
Assets: "Icon" | removed social-media icons