Icons

Usage

<svg class="iconnables">
  <use xlink:href="#icons-{{iconName}}">
</svg>

Single Color

Icons that are made of a stroke or fill can be styled by changing the color. Try hovering or tapping on the icons below.

.iconnables {
  color: currentColor;

  &:hover,
  &:active {
    color: $purple-light;
  }
}

Full Color

Files & Folders

Octicons Based

Buttons

States

<button class="btn gray"></button>
<button class="btn gray active"></button>
<button class="btn gray" disabled></button>

Colors

<button class="btn btn-md gray"></button>
<button class="btn btn-md green"></button>
<button class="btn btn-md orange"></button>
<button class="btn btn-md red"></button>
<button class="btn btn-md white"></button>

Sizes

<button class="btn btn-lg gray"></button>
<button class="btn btn-md gray"></button>
<button class="btn gray btn-sm"></button>
<button class="btn gray btn-xs"></button>
<button class="btn gray btn-xxs"></button>

Icons

<button class="btn btn-md gray btn-icon">
  <svg class="iconnables">
    <use xlink:href="#icons-server-link"><use>
  <svg>
<button>
<button class="btn gray btn-icon btn-sm">
  <svg class="iconnables">
    <use xlink:href="#icons-file-upload"><use>
  <svg>
<button>

Groups

<div class="btn-group">
  <button class="btn btn-md gray">button</button>
  <button class="btn btn-md gray">button</button>
</div>

<div class="btn-group">
  <button class="btn btn-md gray">
    <svg class="iconnables">
      <use xlink:href="icons-server">
    </svg>
  </button>
  <button class="btn btn-md gray">
    <svg class="iconnables">
      <use xlink:href="icons-translation">
    </svg>
  </button>
  <button class="btn btn-md gray">
    <svg class="iconnables">
      <use xlink:href="icons-advanced">
    </svg>
  </button>
</div>