title: Grid shape icon
body: <p>Writing an app that uses CSS to define icons, avoiding dependency on external image files.  This works fine for circles, squares, triangles, diamonds, which is almost enough.  </p>
  
  <p>I wonder if it's possible to create slightly more complex icons like the two grid shaped ones on the right using CSS? It need not support IE8.</p>
  
  <p><img src="https://i.stack.imgur.com/0Oa6V.png" alt="CSS icons with a grid shape"></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.icon {
    height: 20px;
    width: 20px;
    background-color: steelblue;
    display: inline-block;
  }
  .icon-circle {
    border-radius: 10px;
  }
  .icon-square {
    border-radius: 0
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="icon icon-circle"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>