Icon
SVG
Scalable Vector Graphic (SVG) is emerging as the preferred graphic format to use on the web today. That's why Kriyā uses SVG for icons instead of an icon font, and there are a number of advantages to this approach. You can use your own icons or choose from great icon libraries like IcoMoon, Noun Project and Nucleo. Use SVG icons as img src or use them inline.
Sometimes icons take a moment to load, or might fail to load altogether. That's why Kriyā comes with a icon container so your layout doesn't break or jump around while rendering. Here's the markup:
<span class="icon">
<svg version="1.1" viewBox="0 0 32 32" role="img"><title>Umbrella icon</title><g stroke-width="2" transform="translate(0, 0)"><line fill="none" stroke="#444444" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="8" y1="31" x2="24" y2="31" stroke-linejoin="miter"></line> <line fill="none" stroke="#444444" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="16" y1="4" x2="16" y2="1" stroke-linejoin="miter"></line> <line fill="none" stroke="#444444" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="16" y1="31" x2="16" y2="16" stroke-linejoin="miter"></line> <path data-cap="butt" data-color="color-2" fill="none" stroke="#444444" stroke-width="2" stroke-miterlimit="10" d="M9,16c0-5.093,2.934-9.55,7-12" stroke-linejoin="miter" stroke-linecap="butt"></path> <path data-cap="butt" data-color="color-2" fill="none" stroke="#444444" stroke-width="2" stroke-miterlimit="10" d="M23,16c0-5.093-2.934-9.55-7-12 " stroke-linejoin="miter" stroke-linecap="butt"></path> <path data-color="color-2" fill="none" stroke="#444444" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M30,16 C29.027,9.218,23.051,4,16,4S2.973,9.218,2,16H30z" stroke-linejoin="miter"></path> <line data-color="color-2" fill="none" stroke="#444444" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" x1="16" y1="16" x2="16" y2="4" stroke-linejoin="miter"></line></g></svg>
</span>Since SVGs do not contain any visible text to describe the graphic, make sure they're accessible by adding role="img" to the svg tag, and a title inside the svg tag.
Sizes
Kriyā icons are 32px by default but there are 5 fixed square sizes to choose from, like is-24 - see modifiers below.
<span class="icon is-16">
<svg version="1.1" viewBox="0 0 24 24" role="img"><title>Magnifier icon</title><path d="M23.822 20.88l-6.353-6.354c.93-1.465 1.467-3.2 1.467-5.059.001-5.219-4.247-9.467-9.468-9.467s-9.468 4.248-9.468 9.468c0 5.221 4.247 9.469 9.468 9.469 1.768 0 3.421-.487 4.839-1.333l6.396 6.396 3.119-3.12zm-20.294-11.412c0-3.273 2.665-5.938 5.939-5.938 3.275 0 5.94 2.664 5.94 5.938 0 3.275-2.665 5.939-5.94 5.939-3.274 0-5.939-2.664-5.939-5.939z"/></svg>
</span>