13 #Icon Icon

Html
    <i class="sf-icon -close"></i>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-icon.-{light, lighter, black, white, color-inherit}




Html
    <i class="sf-fa sf-fa-folder-o sf-icon -light -size-xl"></i>
    <i class="sf-fa sf-fa-ellipsis-v sf-icon -light"></i>
    <i class="sf-fa sf-fa-ellipsis-v sf-icon -light -size-xs"></i>
    <br />
    <i class="sf-fa sf-fa-folder-o sf-icon -lighter -size-xl"></i>
    <i class="sf-fa sf-fa-ellipsis-v sf-icon -lighter"></i>
    <i class="sf-fa sf-fa-ellipsis-v sf-icon -lighter -size-xs"></i>
    <br />
    <i class="sf-fa sf-fa-folder-o sf-icon -black -size-xl"></i>
    <i class="sf-fa sf-fa-ellipsis-v sf-icon -black"></i>
    <i class="sf-fa sf-fa-ellipsis-v sf-icon -black -size-xs"></i>
    <div style="background-color: grey; color: pink; padding: 5px; max-width: 150px;">
    <i class="sf-fa sf-fa-folder-o sf-icon -white -size-xl"></i>
    <i class="sf-fa sf-fa-ellipsis-v sf-icon -white"></i>
    <i class="sf-fa sf-fa-ellipsis-v sf-icon -white -size-xs"></i>
    <br />
    <i class="sf-fa sf-fa-folder-o sf-icon -color-inherit -size-xl"></i>
    <i class="sf-fa sf-fa-ellipsis-v sf-icon -color-inherit"></i>
    <i class="sf-fa sf-fa-ellipsis-v sf-icon -color-inherit -size-xs"></i>
    </div>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-icon.-illustrative

Html
    <i class="sf-fa sf-fa-check-square-o sf-icon -illustrative"></i>
    <i class="sf-fa sf-fa-user sf-icon -illustrative -size-3xl"></i>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-icon.-size-{7xs, 4xs, 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl, 4xl, 5xl}

-size-7xs — 5px
-size-4xs — 11px
-size-3xs — 12px
-size-2xs — 13px
-size-xs — 14px
-size-s — 16px
-size-m — 18px
-size-l — 20px
-size-xl — 22px
-size-2xl — 28px
-size-3xl — 36px
-size-4xl — 48px
-size-5xl — 60px
Html
    <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-7xs"></i>-size-7xs — 5px<br />
    <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-4xs"></i>-size-4xs — 11px<br />
    <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-3xs"></i>-size-3xs — 12px<br />
    <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-2xs"></i>-size-2xs — 13px<br />
    <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-xs"></i>-size-xs — 14px<br />
    <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-s"></i>-size-s — 16px<br />
    <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-m"></i>-size-m — 18px<br />
    <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-l"></i>-size-l — 20px<br />
    <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-xl"></i>-size-xl — 22px<br />
    <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-2xl"></i>-size-2xl — 28px<br />
    <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-3xl"></i>-size-3xl — 36px<br />
    <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-4xl"></i>-size-4xl — 48px<br />
    <i class="sf-fa sf-fa-ellipsis-v sf-icon -size-5xl"></i>-size-5xl — 60px<br />

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-stack {.sf-stack__in,.sf-stack__out}

Html
    <div class="sf-icon-stack">
      <i class="sf-icon-stack__in sf-fa sf-fa-info sf-icon -size-3xs -white"></i>
      <i class="sf-icon-stack__out sf-fa sf-fa-circle sf-icon -size-l -black"></i>
    </div>
    <div class="sf-icon-stack">
      <i class="sf-icon-stack__in sf-fa sf-fa-check sf-icon -size-2xs -light"></i>
      <i class="sf-icon-stack__in sf-fa sf-fa-circle sf-icon -size-xl -black"></i>
      <i class="sf-icon-stack__out sf-fa sf-fa-circle sf-icon -size-2xl -light"></i>
    </div>
Settings
Help
Folder

Html
    <i class="sf-fa sf-fa-sliders sf-icon"></i><span>Settings</span><br />
    <i class="sf-fa sf-fa-question-circle sf-icon"></i><span>Help</span><br />
    <i class="sf-fa sf-fa-folder-o sf-icon"></i><span>Folder</span><br />
    <i class="sf-fa sf-fa-exclamation-circle sf-icon -exclamation"></i><br />