SUIS BMC Icons

A list of icons used in SUIS BMC

by davidpauljunior

HTML

<div class="icon icon-chevron"></div>
<hr/>	<pre><code>.icon-add-primary:</code></pre>

<div class="icon icon-add-primary"></div>
<hr/>	<pre><code>.icon-checkmark:</code></pre>

<div class="icon icon-checkmark"></div>
<hr/>	<pre><code>.icon-chevron-alpha-primary-down:</code></pre>

<div class="icon icon-chevron-alpha-primary-down"></div>
<hr/>	<pre><code>.icon-chevron-alpha-primary:</code></pre>

<div class="icon icon-chevron-alpha-primary"></div>
<hr/>	<pre><code>.icon-chevron-beta-primary:</code></pre>

<div class="icon icon-chevron-beta-primary"></div>
<hr/>	<pre><code>.icon-chevron-beta-secondary:</code></pre>

<div class="icon icon-chevron-beta-secondary"></div>
<hr/>	<pre><code>.icon-cross-primary:</code></pre>

<div class="icon icon-cross-primary"></div>
<hr/>	<pre><code>.icon-cross-secondary:</code></pre>

<div class="icon icon-cross-secondary"></div>
<hr/>	<pre><code>.icon-cross-tertiary:</code></pre>

<div class="icon icon-cross-tertiary"></div>
<hr/>	<pre><code>.icon-info:</code></pre>

<div class="icon icon-info"></div>
<hr/>	<pre><code>.icon-menu:</code></pre>

<div class="icon icon-menu"></div>
<hr/>	<pre><code>.icon-search:</code></pre>

<div class="icon icon-search"></div>
<hr/>

CSS

.icon {
    background-repeat: no-repeat;
    display: inline-block;
    background-size: cover;
}
.icon:hover {
    background-position: 0 100%;
}
.icon-chevron {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2016.0.4%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0D%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20width%3D%2232px%22%20height%3D%22128px%22%20viewBox%3D%220%200%2032%20128%22%20enable-background%3D%22new%200%200%2032%20128%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20fill%3D%22%2302558A%22%20d%3D%22M27.999%2C91.926L0%2C64v8.729L24%2C96L0%2C119.271V128l27.999-27.926L32%2C96L27.999%2C91.926z%22/%3E%0D%0A%3Cpath%20fill%3D%22%23417EBA%22%20d%3D%22M27.999%2C27.926L0%2C0v8.728L24%2C32L0%2C55.271V64l27.999-27.926L32%2C32L27.999%2C27.926z%22/%3E%0D%0A%3C/svg%3E%0D%0A');
    background-repeat: no-repeat;
    width: 32px;
    height: 64px;
}
.icon-add-primary {
    background-image:...