Building the BookNest Icon Set

BookNest needs search, cart and star icons and a glyph per genre. One set of rules makes them a family: a 24 by 24 grid, 2-unit strokes with round caps and joins, no fills, and currentColor. Those are the conventions of the popular open-source sets, Lucide 97,889 (ISC license), Heroicons 222,394 and Tabler Icons 159,294 (MIT) and Google's Material Design 15,533 Icons (Apache-2.0), so BookNest's icons sit comfortably beside borrowed ones.

The BookNest icon sprite: nine symbols on a 24-unit gridHTMLLive

<svg width="0" height="0" style="position:absolute">
  <symbol id="i-search" viewBox="0 0 24 24"><circle cx="10.5" cy="10.5" r="6.5"/>
    <path d="M15.5 15.5 21 21"/></symbol>
  <symbol id="i-cart" viewBox="0 0 24 24"><path d="M2 3h3l2.4 11.5h11.1L21 7H6"/>
    <circle cx="9" cy="19.5" r="1.5"/><circle cx="17" cy="19.5" r="1.5"/></symbol>
  <symbol id="i-star" viewBox="0 0 24 24"><path style="fill:var(--fill, none)" d="M12 2.6
    14.5 9.2 21.5 9.5 16 13.9 17.9 20.7 12 16.8 6.1 20.7 8 13.9 2.5 9.5 9.5 9.2Z"/></symbol>
  <symbol id="i-fiction" viewBox="0 0 24 24"><path d="M9 21 10.5 8h3L15 21ZM9.5 8h5V6L12 4
    9.5 6ZM3 6l4 1M21 6l-4 1M4 21h16"/></symbol>
  <symbol id="i-tech" viewBox="0 0 24 24"><path d="M8 7l-5 5 5 5M16 7l5 5-5 5M14 4l-4 16"/>
    </symbol>
  <symbol id="i-cooking" viewBox="0 0 24 24"><path d="M4 11h16v2a7 7 0 0 1-7 7h-2a7 7 0 0 1
    -7-7ZM2 11h20M9 7q1.5-2 0-4M15 7q1.5-2 0-4"/></symbol>
  <symbol id="i-travel" viewBox="0 0 24 24"><path d="M2 20 9 7l4 7 2-3 7 9Z"/></symbol>
  <symbol id="i-scifi" viewBox="0 0 24 24"><circle cx="12" cy="13" r="8"/>
    <path d="M12 9v4l3 2M10 2h4M12 2v3"/></symbol>
  <symbol id="i-garden" viewBox="0 0 24 24"><path d="M5 19C5 10 11 4 20 4c0 9-5 15-15 15ZM5 19
    l8-8"/></symbol>
</svg>
<style>.icon { width:40px; height:40px; display:block; margin:auto; fill:none;
  stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }</style>
<div id="row" style="display:flex; gap:16px; font:12px Arial; text-align:center"></div>
<script>
  const icons = { search:'#263238', cart:'#263238', star:'#e09a10', fiction:'#1f5f8b',
    tech:'#5b3f99', cooking:'#e09a10', travel:'#3f7d3a', scifi:'#b5452f', garden:'#2a9d8f' };
  for (const [name, c] of Object.entries(icons)) row.insertAdjacentHTML('beforeend',
    `<div style="color:${c}"><svg class="icon"><use href="#i-${name}"/></svg>${name}</div>`);
</script>

Browser output of Listing 1.12 — Browser output of 12

The stroke style lives once, in the .icon rule on each host <svg>, and reaches every instance by inheritance. The sprite is saved as booknest-icons.svg: inline it once per page and any icon costs one <svg><use>.

MENU