DAHLIA Pattern Library

Icon All 

<div class="row margin-bottom">
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-arrow-down"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-arrow-down
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-download"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-download
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-forward"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-forward
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-info"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-info
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-like"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-like
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-mail"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-mail
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-map"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-map
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-menu"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-menu
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-plus"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-plus
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-search"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-search
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-warning"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-warning
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-check"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-check
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-close"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-close
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-globe"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-globe
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-question"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-question
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-link"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-link
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-phone"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-phone
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-right"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-right
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-left"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-left
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-asterisk"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-asterisk
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-edit"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-edit
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-lock"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-lock
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-ticket"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-ticket
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-list"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-list
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-light bulb"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-light bulb
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-clock"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-clock
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-eye"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-eye
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-file"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-file
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-bed"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-bed
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-calendar"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-calendar
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-building"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-building
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon">
        <svg>
          <use xlink:href="#i-result"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                #i-result
            </div>
        </div>
    </div>
</div>

<div class="row margin-bottom">
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon i-primary">
        <svg>
          <use xlink:href="#i-info"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                i-primary
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon i-success">
        <svg>
          <use xlink:href="#i-info"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                i-success
            </div>
        </div>
    </div>
</div>

<div class="row margin-bottom">
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon ui-small">
        <svg>
          <use xlink:href="#i-mail"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                ui-small
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon ui-medium">
        <svg>
          <use xlink:href="#i-mail"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                ui-medium
            </div>
        </div>
    </div>
    <div class="medium-3 columns end">
        <div class="dahlia-icon-block">
            <span class="ui-icon ui-large">
        <svg>
          <use xlink:href="#i-mail"></use>
        </svg>
      </span>
            <div class="dahlia-icon-label">
                ui-large
            </div>
        </div>
    </div>
</div>
 
<div class="row margin-bottom">
{{#each icon}}
  <div class="medium-3 columns end">
    <div class="dahlia-icon-block">
      <span class="ui-icon">
        <svg>
          <use xlink:href="#i-{{this}}"></use>
        </svg>
      </span>
      <div class="dahlia-icon-label">
        #i-{{this}}
      </div>
    </div>
  </div>
{{/each}}
</div>

<div class="row margin-bottom">
{{#each fill}}
  <div class="medium-3 columns end">
    <div class="dahlia-icon-block">
      <span class="ui-icon i-{{this}}">
        <svg>
          <use xlink:href="#i-info"></use>
        </svg>
      </span>
      <div class="dahlia-icon-label">
        i-{{this}}
      </div>
    </div>
  </div>
{{/each}}
</div>

<div class="row margin-bottom">
{{#each size}}
   <div class="medium-3 columns end">
    <div class="dahlia-icon-block">
      <span class="ui-icon ui-{{this}}">
        <svg>
          <use xlink:href="#i-mail"></use>
        </svg>
      </span>
      <div class="dahlia-icon-label">
        ui-{{this}}
      </div>
    </div>
  </div>
{{/each}}
</div>
 
{
  "icon": [
    "arrow-down",
    "download",
    "forward",
    "info",
    "like",
    "mail",
    "map",
    "menu",
    "plus",
    "search",
    "warning",
    "check",
    "close",
    "globe",
    "question",
    "link",
    "phone",
    "right",
    "left",
    "asterisk",
    "edit",
    "lock",
    "ticket",
    "list",
    "light bulb",
    "clock",
    "eye",
    "file",
    "bed",
    "calendar",
    "building",
    "result"
  ],
  "fill": [
    "primary",
    "success"
  ],
  "size": [
    "small",
    "medium",
    "large"
  ]
}

Uses SVGs symbols which are stored in layouts/includes. Has variables for icon, fill color and size.