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="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>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="2">
<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="3">
<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="4">
<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="5">
<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="6">
<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>
</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>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="2">
<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="3">
<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="4">
<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="5">
<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="6">
<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="7">
<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="8">
<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="9">
<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="10">
<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="11">
<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="12">
<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="13">
<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="14">
<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="15">
<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="16">
<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="17">
<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="18">
<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="19">
<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="20">
<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="21">
<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="22">
<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="23">
<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="24">
<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="25">
<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="26">
<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="27">
<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="28">
<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>
</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="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>
</tbody>
</table>
</div>
<h3 id="videoplayer">Videoplayer</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>Back Circle</td>
<td>
<code>#back-circle</code>
</td>
<td>
<code>assets/icons/videoplayer/back-circle.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>back-circle</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#back-circle">
</use>
</svg>
</td>
</tr>
<tr data-index="2">
<td>Mute</td>
<td>
<code>#mute</code>
</td>
<td>
<code>assets/icons/videoplayer/mute.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>mute</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#mute">
</use>
</svg>
</td>
</tr>
<tr data-index="3">
<td>Next Circle</td>
<td>
<code>#next-circle</code>
</td>
<td>
<code>assets/icons/videoplayer/next-circle.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>next-circle</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#next-circle">
</use>
</svg>
</td>
</tr>
<tr data-index="4">
<td>Next_alt</td>
<td>
<code>#next_alt</code>
</td>
<td>
<code>assets/icons/videoplayer/next_alt.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>next_alt</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#next_alt">
</use>
</svg>
</td>
</tr>
<tr data-index="5">
<td>Pause Circle</td>
<td>
<code>#pause-circle</code>
</td>
<td>
<code>assets/icons/videoplayer/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="6">
<td>Pause_alt</td>
<td>
<code>#pause_alt</code>
</td>
<td>
<code>assets/icons/videoplayer/pause_alt.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>pause_alt</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#pause_alt">
</use>
</svg>
</td>
</tr>
<tr data-index="7">
<td>Play Circle</td>
<td>
<code>#play-circle</code>
</td>
<td>
<code>assets/icons/videoplayer/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="8">
<td>Play_alt</td>
<td>
<code>#play_alt</code>
</td>
<td>
<code>assets/icons/videoplayer/play_alt.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>play_alt</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#play_alt">
</use>
</svg>
</td>
</tr>
<tr data-index="9">
<td>Skip Ahead 15 Seconds</td>
<td>
<code>#skip-ahead-15-seconds</code>
</td>
<td>
<code>assets/icons/videoplayer/skip-ahead-15-seconds.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>skip-ahead-15-seconds</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#skip-ahead-15-seconds">
</use>
</svg>
</td>
</tr>
<tr data-index="10">
<td>Skip Ahead Circle</td>
<td>
<code>#skip-ahead-circle</code>
</td>
<td>
<code>assets/icons/videoplayer/skip-ahead-circle.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>skip-ahead-circle</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#skip-ahead-circle">
</use>
</svg>
</td>
</tr>
<tr data-index="11">
<td>Skip Back 15 Seconds</td>
<td>
<code>#skip-back-15-seconds</code>
</td>
<td>
<code>assets/icons/videoplayer/skip-back-15-seconds.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>skip-back-15-seconds</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#skip-back-15-seconds">
</use>
</svg>
</td>
</tr>
<tr data-index="12">
<td>Skip Back Circle</td>
<td>
<code>#skip-back-circle</code>
</td>
<td>
<code>assets/icons/videoplayer/skip-back-circle.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>skip-back-circle</title>
<use
xlink:href="../../.././_assets/images/icon__sprite.svg#skip-back-circle">
</use>
</svg>
</td>
</tr>
<tr data-index="13">
<td>Skip_alt</td>
<td>
<code>#skip_alt</code>
</td>
<td>
<code>assets/icons/videoplayer/skip_alt.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>skip_alt</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#skip_alt">
</use>
</svg>
</td>
</tr>
<tr data-index="14">
<td>Stop Circle</td>
<td>
<code>#stop-circle</code>
</td>
<td>
<code>assets/icons/videoplayer/stop-circle.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>stop-circle</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#stop-circle">
</use>
</svg>
</td>
</tr>
<tr data-index="15">
<td>Stop_alt</td>
<td>
<code>#stop_alt</code>
</td>
<td>
<code>assets/icons/videoplayer/stop_alt.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>stop_alt</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#stop_alt">
</use>
</svg>
</td>
</tr>
<tr data-index="16">
<td>Unmute</td>
<td>
<code>#unmute</code>
</td>
<td>
<code>assets/icons/videoplayer/unmute.svg</code>
</td>
<td>
<svg class="icon icon-4" xmlns="http://www.w3.org/2000/svg" role="img"
focusable="false">
<title>unmute</title>
<use xlink:href="../../.././_assets/images/icon__sprite.svg#unmute">
</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 Schwarz brandmangement.
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.