A Pen by Julian Garnier.

<h1>Document icons</h1>

<h2>Using CSS and UniCode symbols</h2>

<div class="box">

  <div class="icon blue">

    <span class="doc-icon doc">☰</span>

    <span class="doc-type">DOC</span>

  </div>

  <div class="icon turquoise">

    <span class="doc-icon code">❮ ❯</span>

    <span class="doc-type">HTML</span>

  </div>

  <div class="icon darkgreen">

    <span class="doc-icon spread">⊟</span>

    <span class="doc-type">XLS</span>

  </div>

  <div class="icon lightgreen">

    <span class="doc-icon zip">⊡</span>

    <span class="doc-type">ZIP</span>

  </div>

  <div class="icon yellow">

    <span class="doc-icon misc">☺</span>

    <span class="doc-type">LOL</span>

  </div>

  <div class="icon orange">

    <span class="doc-icon ptt">⧉</span>

    <span class="doc-type">PTT</span>

  </div>

  <div class="icon red">

    <span class="doc-icon pdf">☷</span>

    <span class="doc-type">PDF</span>

  </div>

</div>