Icon

.icon gives small images a consistent size and alignment, then adapts them to the surrounding sashimi UI component.

Applicable Elements

• svg
• img
• picture

Basic Usage

Icon size is relative to the surrounding text, so the same class works in body copy and headings.

<h2>
  <img class="icon" src="/delete_blue.svg" alt="" />Today’s selection
</h2>

<p>
  <svg class="icon" aria-hidden="true"><use href="/diamond.svg#root" /></svg>
  Fresh fish arrived this morning.
</p>

<p>
  Your order 
  <picture class="icon">
    <source srcset="/saved_white.svg" media="(prefers-color-scheme: dark)" />
    <img src="/saved_black.svg" alt="" />
  </picture>
   has been saved.
</p>

Combinations

Other sashimi UI components recognize .icon and adjust its size, spacing, or position for their own layout.

Supported component classes: .button, .link, .menu-item, .callout, .details

<button class="button">
  <svg class="icon" aria-hidden="true"><use href="/home.svg#root" /></svg>
  Home
</button>

<button class="button secondary">
  Edit
  <svg class="icon" aria-hidden="true"><use href="/edit.svg#root" /></svg>
</button>

<a class="link" href="https://github.com" target="_blank">
  View the source
  <svg class="icon" aria-hidden="true"><use href="/open_in_new.svg#root" /></svg>
</a>

<button class="menu-item">
  <svg class="icon" aria-hidden="true"><use href="/share.svg#root" /></svg>
  Share today’s menu
</button>

<div class="callout info">
  <svg class="icon" aria-hidden="true"><use href="/info.svg#root" /></svg>
  <p>The sea bream is especially good today.</p>
</div>

<details class="details">
  <summary>
    <svg class="icon" aria-hidden="true"><use href="/diamond.svg#root" /></svg>
    Chef’s recommendation
  </summary>
  <p>Begin with the sea bream, then try the richer tuna.</p>
</details>

Tinting Icons

sashimi UI does NOT provide a built-in icon recoloring feature.
We recommend using SVGs for icon coloring.

Prepare SVGs without fixed width or height attributes and set their fill or stroke to currentColor.
Make sure each SVG contains an element with an id.
Then reference that element with <use> so the icon inherits its color from CSS.

<!-- icon.svg -->
<svg
  xmlns="http://www.w3.org/2000/svg"
  id="root"
  viewBox="0 -960 960 960"
  fill="currentColor"
>
  <path d="..."/>
</svg>

<!-- index.html -->
<button class="button">
  <svg class="icon">
    <title>alt text</title>
    <use href="/icon.svg#root" />
  </svg>
  Button Text
</button>