Skip to content
SmartHand Design Systemv0.1.1

Icons

The design system bundles the full Tabler Icons set (5000+ SVGs) under design-system/assets/icons. They are stroked with currentColor, so they inherit text color and can be sized with size-*.

Icons inherit color & size
Open ↗
foundations/icons.html
<div class="space-y-5">
  <div class="flex flex-wrap items-center gap-4 text-foreground-primary">
    <span class="[&_svg]:size-5"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path
          d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245"
        /></svg
    ></span>
    <span class="[&_svg]:size-6"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path
          d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245"
        /></svg
    ></span>
    <span class="[&_svg]:size-8"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path
          d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245"
        /></svg
    ></span>
    <span class="[&_svg]:size-10"
      ><svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.5"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path
          d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873l-6.158 -3.245"
        /></svg
    ></span>
    <span class="text-foreground-subtle">— one icon, sized with <code>size-*</code>, coloured with <code>text-*</code></span>
  </div>


  <div class="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-6">
    <div class="flex flex-col items-center gap-2 rounded-lg border border-border bg-background-muted p-4">
      <span class="text-foreground [&_svg]:size-7"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="M5 12l-2 0l9 -9l9 9l-2 0" />
          <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
          <path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg
      ></span>
      <span class="font-geist-mono text-xs text-foreground-subtle">home</span>
    </div>
    <div class="flex flex-col items-center gap-2 rounded-lg border border-border bg-background-muted p-4">
      <span class="text-foreground [&_svg]:size-7"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0" />
          <path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" /></svg
      ></span>
      <span class="font-geist-mono text-xs text-foreground-subtle">user</span>
    </div>
    <div class="flex flex-col items-center gap-2 rounded-lg border border-border bg-background-muted p-4">
      <span class="text-foreground [&_svg]:size-7"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path
            d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065"
          />
          <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" /></svg
      ></span>
      <span class="font-geist-mono text-xs text-foreground-subtle">settings</span>
    </div>
    <div class="flex flex-col items-center gap-2 rounded-lg border border-border bg-background-muted p-4">
      <span class="text-foreground [&_svg]:size-7"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
          <path d="M21 21l-6 -6" /></svg
      ></span>
      <span class="font-geist-mono text-xs text-foreground-subtle">search</span>
    </div>
    <div class="flex flex-col items-center gap-2 rounded-lg border border-border bg-background-muted p-4">
      <span class="text-foreground [&_svg]:size-7"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
          <path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg
      ></span>
      <span class="font-geist-mono text-xs text-foreground-subtle">bell</span>
    </div>
    <div class="flex flex-col items-center gap-2 rounded-lg border border-border bg-background-muted p-4">
      <span class="text-foreground [&_svg]:size-7"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2l0 -12" />
          <path d="M16 3l0 4" />
          <path d="M8 3l0 4" />
          <path d="M4 11l16 0" />
          <path d="M8 15h2v2h-2l0 -2" /></svg
      ></span>
      <span class="font-geist-mono text-xs text-foreground-subtle">calendar-event</span>
    </div>
    <div class="flex flex-col items-center gap-2 rounded-lg border border-border bg-background-muted p-4">
      <span class="text-foreground [&_svg]:size-7"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="M14 3v4a1 1 0 0 0 1 1h4" />
          <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2" />
          <path d="M9 17l0 -5" />
          <path d="M12 17l0 -1" />
          <path d="M15 17l0 -3" /></svg
      ></span>
      <span class="font-geist-mono text-xs text-foreground-subtle">file-analytics</span>
    </div>
    <div class="flex flex-col items-center gap-2 rounded-lg border border-border bg-background-muted p-4">
      <span class="text-foreground [&_svg]:size-7"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="M4 7l16 0" />
          <path d="M10 11l0 6" />
          <path d="M14 11l0 6" />
          <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12" />
          <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3" /></svg
      ></span>
      <span class="font-geist-mono text-xs text-foreground-subtle">trash</span>
    </div>
    <div class="flex flex-col items-center gap-2 rounded-lg border border-border bg-background-muted p-4">
      <span class="text-foreground [&_svg]:size-7"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
          <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415" />
          <path d="M16 5l3 3" /></svg
      ></span>
      <span class="font-geist-mono text-xs text-foreground-subtle">edit</span>
    </div>
    <div class="flex flex-col items-center gap-2 rounded-lg border border-border bg-background-muted p-4">
      <span class="text-foreground [&_svg]:size-7"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" />
          <path d="M7 11l5 5l5 -5" />
          <path d="M12 4l0 12" /></svg
      ></span>
      <span class="font-geist-mono text-xs text-foreground-subtle">download</span>
    </div>
    <div class="flex flex-col items-center gap-2 rounded-lg border border-border bg-background-muted p-4">
      <span class="text-foreground [&_svg]:size-7"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="M9 6l6 6l-6 6" /></svg
      ></span>
      <span class="font-geist-mono text-xs text-foreground-subtle">chevron-right</span>
    </div>
    <div class="flex flex-col items-center gap-2 rounded-lg border border-border bg-background-muted p-4">
      <span class="text-foreground [&_svg]:size-7"
        ><svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.5"
          stroke-linecap="round"
          stroke-linejoin="round"
        >
          <path d="M5 12l5 5l10 -10" /></svg
      ></span>
      <span class="font-geist-mono text-xs text-foreground-subtle">check</span>
    </div>
  </div>
</div>

Inline them

Section titled “Inline them”

The recommended way is to inline the SVG — that lets it inherit currentColor and respond to text-* and size-* utilities:

<span class="text-foreground-primary [&_svg]:size-6">
  <!-- paste the contents of design-system/assets/icons/home.svg -->
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    …
  >
    …
  </svg>
</span>

window._icons (for components)

Section titled “window._icons (for components)”

Some JS components inject icons themselves (chevrons in tables, close/edit/trash in the detail drawer). They read them from window._icons, defined in runtime.js:

window._icons = {
  chevron: `<svg …>…</svg>`,
  chevronUp: `<svg …>…</svg>`,
  trash: `<svg …>…</svg>`,
  // …
}

If a component needs an icon that isn’t there yet, add the key to runtime.js. See How the JavaScript works.