Index

icon

Position

Inline

Displays ideogram inside text.

I'm an inlinebutton icon
| I'm an inline+icon('button')| button icon
I'm an inline<svg class="icon">  <use xlink:href="../img/vectors.svg#icon-button"></use></svg>button icon

Block

Displays ideogram as block.

I'm block-levelbutton icon
| I'm block-level+icon('button', 'block')| button icon
I'm block-level<svg class="icon icon--block">  <use xlink:href="../img/vectors.svg#icon-button"></use></svg>button icon

Size

Inherits font size

Width and height equals to parent's font size.

I'm an iconinside header

I'm the same iconinside paragraph

h2 I'm an icon  +icon('button')  | inside headerp I'm the same icon  +icon('button')  | inside paragraph
<h2>  I'm an icon  <svg class="icon">    <use xlink:href="../img/vectors.svg#icon-button"></use>  </svg>  inside header</h2><p>  I'm the same icon  <svg class="icon">    <use xlink:href="../img/vectors.svg#icon-button"></use>  </svg>  inside paragraph</h2>

Predefined

Sized by predefined metrics.

nano
mini
tiny
small
default
medium
big
large
huge
massive
giant
+icon('button', 'nano')| nanobr+icon('button', 'mini')| minibr+icon('button', 'tiny')| tinybr+icon('button', 'small')| smallbr+icon('button', 'default')| defaultbr+icon('button', 'medium')| mediumbr+icon('button', 'big')| bigbr+icon('button', 'large')| largebr+icon('button', 'huge')| hugebr+icon('button', 'massive')| massivebr+icon('button', 'giant')| giant
<svg class="icon icon--nano">  <use xlink:href="../img/vectors.svg#icon-button"></use></svg>nano<br><svg class="icon icon--mini">  <use xlink:href="../img/vectors.svg#icon-button"></use></svg>mini<br><svg class="icon icon--tiny">  <use xlink:href="../img/vectors.svg#icon-button"></use></svg>tiny<br><svg class="icon icon--small">  <use xlink:href="../img/vectors.svg#icon-button"></use></svg>small<br><svg class="icon icon--default">  <use xlink:href="../img/vectors.svg#icon-button"></use></svg>default<br><svg class="icon icon--medium">  <use xlink:href="../img/vectors.svg#icon-button"></use></svg>medium<br><svg class="icon icon--big">  <use xlink:href="../img/vectors.svg#icon-button"></use></svg>big<br><svg class="icon icon--large">  <use xlink:href="../img/vectors.svg#icon-button"></use></svg>large<br><svg class="icon icon--huge">  <use xlink:href="../img/vectors.svg#icon-button"></use></svg>huge<br><svg class="icon icon--massive">  <use xlink:href="../img/vectors.svg#icon-button"></use></svg>massive<br><svg class="icon icon--giant">  <use xlink:href="../img/vectors.svg#icon-button"></use></svg>giant<br>

Space

Horizontal

Adds left and right margin.

I'm fittedbutton icon (default)
I'm an optical-spacedbutton icon
I'm a paddedbutton icon
I'm a relaxedbutton icon
I'm an icon that starts a line
| I'm fitted+icon('button')| button icon (default)br| I'm an optical-spaced+icon('button', 'optical')| button iconbr| I'm a padded+icon('button', 'padded') | button iconbr| I'm a relaxed+icon('button', 'relaxed')| button iconbr+icon('button', 'initial')| I'm an icon that starts a line
I'm fitted<svg class="icon">  <use xlink:href="../img/vectors.svg#icon-button"></use></svg>button icon (default)<br>I'm an optical-spaced<svg class="icon icon--optical">  <use xlink:href="../img/vectors.svg#icon-button"></use></svg>button icon<br>I'm an padded<svg class="icon icon--padded">  <use xlink:href="../img/vectors.svg#icon-button"></use></svg>button icon<br>I'm an relaxed<svg class="icon icon--relaxed">  <use xlink:href="../img/vectors.svg#icon-button"></use></svg>button icon<br><svg class="icon icon--initial">  <use xlink:href="../img/vectors.svg#icon-button"></use></svg>I'm an icon that starts a line

Color

Inherits color

Inherits parent's fill attribute value.

I'mmaroon icon
div(style="fill: maroon")  | I'm  +icon('button')  | maroon icon
<div style="fill: maroon">  I'm  <svg class="icon">    <use xlink:href="../img/vectors.svg#icon-button"></use>  </svg>  maroon icon</div>

Predefined

Can be one of predefined colors.

I'mprimary colored padded icon
| I'm+icon('button', 'primary', 'padded')| primary colored padded icon
I'm<svg class="icon icon--primary icon--padded"> <use xlink:href="../img/vectors.svg#icon-button"></use></svg>primary colored padded icon
less than portrait
portrait phone
landscape phone
portrait tablet
landscape tablet / minimal desktop
generic laptop screen
generic desktop screen
full hd screen
2k+ screen