---
name: iconic
url: /iconic
---

## Iconic
<h3 class="subheader">We partnered with Iconic to include 24 responsive, highly flexible icons for use in your apps. For more info on iconic or to buy the complete set head to <a href="https://useiconic.com/">useiconic.com</a></h3>

---

<a href="#" class="large button">
  <img class="iconic-sm" zf-iconic data-src="/assets/img/iconic/magnifying-glass.svg">
  Search
</a>
<a href="#" class="large alert button">
  <img class="iconic-sm" zf-iconic data-src="/assets/img/iconic/ban.svg">
  Delete
</a>
<a href="#" class="large success button">
  <img class="iconic-sm" zf-iconic data-src="/assets/img/iconic/circle-check.svg">
  Save
</a>
<a href="#" class="large secondary button">
  <img class="iconic-sm" zf-iconic data-src="/assets/img/iconic/cart.svg">
  Add to Cart
</a>

---

<ul class="button-group">
  <li><a href="#">
    <img zf-iconic data-src="/assets/img/iconic/magnifying-glass.svg">
    Eat
  </a></li>
  <li class="secondary"><a href="#">
    <img zf-iconic data-src="/assets/img/iconic/magnifying-glass.svg">
    Sleep
  </a></li>
</ul>

<ul class="expanded segmented button-group">
  <li class="is-active"><a href="#">
    <img zf-iconic data-src="/assets/img/iconic/magnifying-glass.svg">
    Eat
  </a></li>
  <li><a href="#">
    <img zf-iconic data-src="/assets/img/iconic/magnifying-glass.svg">
    Sleep
  </a></li>
</ul>

---

<ul class="menu-bar icon-left">
  <li><a href="#">
    <img zf-iconic data-src="/assets/img/iconic/magnifying-glass.svg">
    Eat
  </a></li>
  <li><a href="#">
    <img zf-iconic data-src="/assets/img/iconic/magnifying-glass.svg">
    Eat
  </a></li>
  <li><a href="#">
    <img zf-iconic data-src="/assets/img/iconic/magnifying-glass.svg">
    Eat
  </a></li>
</ul>

<ul class="primary menu-bar icon-top">
  <li><a href="#">
    <img zf-iconic data-src="/assets/img/iconic/magnifying-glass.svg">
    Eat
  </a></li>
  <li><a href="#">
    <img zf-iconic data-src="/assets/img/iconic/magnifying-glass.svg">
    Eat
  </a></li>
  <li><a href="#">
    <img zf-iconic data-src="/assets/img/iconic/magnifying-glass.svg">
    Eat
  </a></li>
</ul>

---

<div class="title-bar">
  <div class="left">
    <a href="#">
      <img zf-iconic data-src="/assets/img/iconic/account.svg">
      Buy
    </a>
  </div>
</div>

<div class="dark title-bar">
  <div class="center">
    <a href="#">
      <img zf-iconic data-src="/assets/img/iconic/account.svg">
      Buy
    </a>
  </div>
</div>

---

<img zf-iconic data-src="/assets/img/iconic/account.svg">
<img zf-iconic data-src="/assets/img/iconic/action.svg" class="iconic-lg">
<img zf-iconic data-src="/assets/img/iconic/ban.svg" class="iconic-lg">
<img zf-iconic data-src="/assets/img/iconic/bell.svg" class="iconic-lg">
<img zf-iconic data-src="/assets/img/iconic/bookmark.svg" class="iconic-lg iconic-color-dark">
<img zf-iconic data-src="/assets/img/iconic/cart.svg" class="iconic-lg iconic-color-dark">
<img zf-iconic data-src="/assets/img/iconic/chevron.svg" class="iconic-lg iconic-color-dark">
<img zf-iconic data-src="/assets/img/iconic/circle-check.svg" class="iconic-lg iconic-color-dark">
<img zf-iconic data-src="/assets/img/iconic/circle-x.svg" class="iconic-lg iconic-color-success">
<img zf-iconic data-src="/assets/img/iconic/cog.svg" class="iconic-lg iconic-color-success">
<img zf-iconic data-src="/assets/img/iconic/comment-square.svg" class="iconic-lg iconic-color-success">
<img zf-iconic data-src="/assets/img/iconic/dashboard.svg" class="iconic-lg iconic-color-success">
<img zf-iconic data-src="/assets/img/iconic/document.svg" class="iconic-lg iconic-color-warning">
<img zf-iconic data-src="/assets/img/iconic/envelope.svg" class="iconic-lg iconic-color-warning">
<img zf-iconic data-src="/assets/img/iconic/flag.svg" class="iconic-lg iconic-color-warning">
<img zf-iconic data-src="/assets/img/iconic/home.svg" class="iconic-lg iconic-color-warning">
<img zf-iconic data-src="/assets/img/iconic/lock.svg" class="iconic-lg iconic-color-alert">
<img zf-iconic data-src="/assets/img/iconic/magnifying-glass.svg" class="iconic-lg iconic-color-alert">
<img zf-iconic data-src="/assets/img/iconic/person.svg" class="iconic-lg iconic-color-alert">
<img zf-iconic data-src="/assets/img/iconic/reload.svg" class="iconic-lg iconic-color-alert">
<img zf-iconic data-src="/assets/img/iconic/share-boxed.svg" class="iconic-lg">
<img zf-iconic data-src="/assets/img/iconic/star.svg" class="iconic-lg">
<img zf-iconic data-src="/assets/img/iconic/thumb.svg" class="iconic-lg">
<img zf-iconic data-src="/assets/img/iconic/zoom.svg" class="iconic-lg">