Display

Icon

283 line icons, from interface basics to commerce, media and travel. Takes the size and colour of its text.

Built on
<svg>currentColorrole=img
Client JavaScript
None
Works without React
Yes, as HTML and CSS
Source, gzipped
11.1 kB
Dependencies
React
Try its options

Loading its options.

Code
import { Icon, type IconName } from "@/components/equip/icon";

const shown: IconName[] = ["search", "bell", "settings", "user", "calendar", "mail", "star", "heart", "trash", "download", "lock", "sparkle"];

export default function Demo() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 24px)", gap: 14, color: "var(--eq-ink-2)" }}>
      {shown.map((name) => (
        <Icon key={name} name={name} size="l" />
      ))}
    </div>
  );
}
Your versionchange its options in Look, This part
HTMLworks in any framework, with the part's CSS
<div style="display:grid;grid-template-columns:repeat(6, 24px);gap:14px;color:var(--eq-ink-2)">
  <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
    <path d="M4 10.5a6.5 6.5 0 1 0 13 0a6.5 6.5 0 1 0 -13 0" />
    <path d="M15.5 15.5l4.5 4.5" />
  </svg>
  <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
    <path d="M6 17v-6a6 6 0 0 1 12 0v6" />
    <path d="M4 17h16" />
    <path d="M10 20.5h4M12 3v2" />
  </svg>
  <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
    <path d="M18.44 10.57L20.9 10.67A9 9 0 0 1 20.9 13.33L18.44 13.43A6.6 6.6 0 0 1 17.57 15.55L19.23 17.35A9 9 0 0 1 17.35 19.23L15.55 17.57A6.6 6.6 0 0 1 13.43 18.44L13.33 20.9A9 9 0 0 1 10.67 20.9L10.57 18.44A6.6 6.6 0 0 1 8.45 17.57L6.65 19.23A9 9 0 0 1 4.77 17.35L6.43 15.55A6.6 6.6 0 0 1 5.56 13.43L3.1 13.33A9 9 0 0 1 3.1 10.67L5.56 10.57A6.6 6.6 0 0 1 6.43 8.45L4.77 6.65A9 9 0 0 1 6.65 4.77L8.45 6.43A6.6 6.6 0 0 1 10.57 5.56L10.67 3.1A9 9 0 0 1 13.33 3.1L13.43 5.56A6.6 6.6 0 0 1 15.55 6.43L17.35 4.77A9 9 0 0 1 19.23 6.65L17.57 8.45A6.6 6.6 0 0 1 18.44 10.57z" />
    <path d="M9.25 12a2.75 2.75 0 1 0 5.5 0a2.75 2.75 0 1 0 -5.5 0" />
  </svg>
  <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
    <path d="M8.75 7.25a3.25 3.25 0 1 0 6.5 0a3.25 3.25 0 1 0 -6.5 0" />
    <path d="M4.5 20.5V20a6 6 0 0 1 6-6h3a6 6 0 0 1 6 6v.5" />
  </svg>
  <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
    <path d="M5.5 5h13a2 2 0 0 1 2 2v11.5a2 2 0 0 1 -2 2h-13a2 2 0 0 1 -2 -2v-11.5a2 2 0 0 1 2 -2z" />
    <path d="M3.5 10h17" />
    <path d="M8 3v4M16 3v4" />
  </svg>
  <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
    <path d="M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2z" />
    <path d="M4 7l8 5.5L20 7" />
  </svg>
  <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
    <path d="M12 3.3L14.41 9.58L21.13 9.93L15.9 14.17L17.64 20.67L12 17L6.36 20.67L8.1 14.17L2.87 9.93L9.59 9.58z" />
  </svg>
  <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
    <path d="M12 7.15A4.6 4.6 0 1 0 4.18 11.54L12 20.15L19.82 11.54A4.6 4.6 0 1 0 12 7.15z" />
  </svg>
  <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
    <path d="M4 6.5h16M9.5 6.5v-2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v2" />
    <path d="M6 6.5l.9 12.6a1.5 1.5 0 0 0 1.5 1.4h7.2a1.5 1.5 0 0 0 1.5-1.4L18 6.5" />
    <path d="M10 10.5v6M14 10.5v6" />
  </svg>
  <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
    <path d="M12 3.5v11" />
    <path d="M7.5 10.5 12 15l4.5-4.5" />
    <path d="M4 15.5v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" />
  </svg>
  <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
    <path d="M6.5 10.5h11a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-11a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2z" />
    <path d="M8 10.5V8a4 4 0 0 1 8 0v2.5" />
    <path d="M12 14.5v2" />
  </svg>
  <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
    <path d="M12 3Q13.4 10.6 21 12Q13.4 13.4 12 21Q10.6 13.4 3 12Q10.6 10.6 12 3z" />
  </svg>
</div>

Examples

The whole set

Every icon by the name you pass to it, drawn at 24px.

  • arrow-up
  • arrow-down
  • arrow-left
  • arrow-right
  • chevron-up
  • chevron-down
  • chevron-left
  • chevron-right
  • check
  • close
  • plus
  • minus
  • search
  • menu
  • more
  • settings
  • user
  • users
  • home
  • bell
  • mail
  • calendar
  • clock
  • star
  • heart
  • bookmark
  • trash
  • edit
  • copy
  • download
  • upload
  • link
  • external
  • eye
  • eye-off
  • lock
  • filter
  • sort
  • refresh
  • info
  • warning
  • error
  • help
  • sun
  • moon
  • folder
  • file
  • image
  • play
  • pause
  • send
  • sparkle
  • arrow-up-right
  • arrow-up-left
  • arrow-down-right
  • arrow-down-left
  • chevrons-left
  • chevrons-right
  • chevrons-up
  • chevrons-down
  • caret-up
  • caret-down
  • caret-left
  • caret-right
  • undo
  • redo
  • expand
  • collapse
  • maximize
  • minimize
  • move
  • grip
  • grid
  • list
  • columns
  • rows
  • layout
  • sidebar
  • panel-right
  • sliders
  • check-circle
  • close-circle
  • plus-circle
  • minus-circle
  • check-square
  • square
  • circle
  • more-vertical
  • log-in
  • log-out
  • zoom-in
  • zoom-out
  • pin
  • tag
  • hash
  • at
  • key
  • shield
  • shield-check
  • lock-open
  • power
  • bolt
  • flag
  • archive
  • inbox
  • save
  • print
  • share
  • paperclip
  • scissors
  • clipboard
  • clipboard-check
  • bold
  • italic
  • underline
  • strikethrough
  • align-left
  • align-center
  • align-right
  • list-ordered
  • list-checks
  • quote
  • code
  • terminal
  • type
  • palette
  • pen
  • crop
  • layers
  • command
  • message
  • messages
  • phone
  • video
  • camera
  • mic
  • mic-off
  • volume
  • volume-off
  • music
  • headphones
  • skip-forward
  • skip-back
  • stop
  • record
  • repeat
  • shuffle
  • rss
  • wifi
  • wifi-off
  • bluetooth
  • battery
  • plug
  • monitor
  • laptop
  • smartphone
  • tablet
  • watch
  • server
  • database
  • cloud
  • cloud-upload
  • cloud-download
  • cpu
  • hard-drive
  • git-branch
  • git-commit
  • git-merge
  • pull-request
  • bug
  • braces
  • brackets
  • package
  • box
  • globe
  • unlink
  • qr-code
  • barcode
  • bar-chart
  • line-chart
  • pie-chart
  • trend-up
  • trend-down
  • activity
  • gauge
  • table
  • kanban
  • file-text
  • file-plus
  • file-code
  • folder-open
  • folder-plus
  • book
  • book-open
  • notebook
  • newspaper
  • bot
  • brain
  • sparkles
  • wand
  • cart
  • bag
  • credit-card
  • wallet
  • coins
  • banknote
  • receipt
  • percent
  • gift
  • store
  • truck
  • building
  • bank
  • briefcase
  • map
  • map-pin
  • compass
  • navigation
  • plane
  • car
  • bike
  • train
  • ship
  • rocket
  • anchor
  • user-plus
  • user-minus
  • user-check
  • id-card
  • smile
  • frown
  • thumbs-up
  • thumbs-down
  • award
  • trophy
  • crown
  • target
  • lightbulb
  • flame
  • droplet
  • leaf
  • tree
  • flower
  • cloud-rain
  • snowflake
  • wind
  • umbrella
  • thermometer
  • mountain
  • heart-pulse
  • pill
  • stethoscope
  • first-aid
  • graduation-cap
  • coffee
  • utensils
  • bed
  • dumbbell
  • gamepad
  • dice
  • puzzle
  • ticket
  • film
  • tv
  • megaphone
  • hourglass
  • timer
  • alarm
  • history
  • calendar-check
  • calendar-plus
  • infinity
  • accessibility
  • languages
  • magnet
  • scale
  • gavel
  • recycle
  • life-buoy
  • brush
  • ruler
  • wrench
  • hammer
Code
import { Icon, iconNames } from "@/components/equip/icon";

export default function Example() {
  return (
    <ul
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(auto-fill, minmax(84px, 1fr))",
        gap: 4,
        width: "100%",
        margin: 0,
        padding: 0,
        listStyle: "none",
      }}
    >
      {iconNames.map((name) => (
        <li
          key={name}
          style={{ display: "grid", justifyItems: "center", gap: 8, padding: "12px 4px 10px", color: "var(--eq-ink)" }}
        >
          <Icon name={name} size="l" />
          <span style={{ fontSize: "var(--eq-text-xs)", color: "var(--eq-ink-2)" }}>{name}</span>
        </li>
      ))}
    </ul>
  );
}
HTMLworks in any framework, with the part's CSS
<ul style="display:grid;grid-template-columns:repeat(auto-fill, minmax(84px, 1fr));gap:4px;width:100%;margin:0;padding:0;list-style:none">
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 19.5v-15" />
      <path d="M6 10.5l6-6 6 6" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">arrow-up</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 4.5v15" />
      <path d="M6 13.5l6 6 6-6" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">arrow-down</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M19.5 12h-15" />
      <path d="M10.5 6l-6 6 6 6" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">arrow-left</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4.5 12h15" />
      <path d="M13.5 6l6 6-6 6" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">arrow-right</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5.5 15 12 8.5l6.5 6.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">chevron-up</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5.5 9 12 15.5 18.5 9" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">chevron-down</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M15 5.5 8.5 12l6.5 6.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">chevron-left</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M9 5.5 15.5 12 9 18.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">chevron-right</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4.5 12.5l5 5 10-11" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">check</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 6l12 12M18 6 6 18" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">close</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 4.5v15M4.5 12h15" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">plus</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4.5 12h15" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">minus</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 10.5a6.5 6.5 0 1 0 13 0a6.5 6.5 0 1 0 -13 0" />
      <path d="M15.5 15.5l4.5 4.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">search</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 6.5h16M4 12h16M4 17.5h16" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">menu</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M18 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">more</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M18.44 10.57L20.9 10.67A9 9 0 0 1 20.9 13.33L18.44 13.43A6.6 6.6 0 0 1 17.57 15.55L19.23 17.35A9 9 0 0 1 17.35 19.23L15.55 17.57A6.6 6.6 0 0 1 13.43 18.44L13.33 20.9A9 9 0 0 1 10.67 20.9L10.57 18.44A6.6 6.6 0 0 1 8.45 17.57L6.65 19.23A9 9 0 0 1 4.77 17.35L6.43 15.55A6.6 6.6 0 0 1 5.56 13.43L3.1 13.33A9 9 0 0 1 3.1 10.67L5.56 10.57A6.6 6.6 0 0 1 6.43 8.45L4.77 6.65A9 9 0 0 1 6.65 4.77L8.45 6.43A6.6 6.6 0 0 1 10.57 5.56L10.67 3.1A9 9 0 0 1 13.33 3.1L13.43 5.56A6.6 6.6 0 0 1 15.55 6.43L17.35 4.77A9 9 0 0 1 19.23 6.65L17.57 8.45A6.6 6.6 0 0 1 18.44 10.57z" />
      <path d="M9.25 12a2.75 2.75 0 1 0 5.5 0a2.75 2.75 0 1 0 -5.5 0" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">settings</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M8.75 7.25a3.25 3.25 0 1 0 6.5 0a3.25 3.25 0 1 0 -6.5 0" />
      <path d="M4.5 20.5V20a6 6 0 0 1 6-6h3a6 6 0 0 1 6 6v.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">user</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 8a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
      <path d="M3 20v-.5a5 5 0 0 1 5-5h2a5 5 0 0 1 5 5v.5" />
      <path d="M15.5 5.2a3 3 0 0 1 0 5.6M17.5 14.6a5 5 0 0 1 3.5 4.9v.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">users</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3.5 11 12 4l8.5 7" />
      <path d="M5.5 9.5V20h13V9.5" />
      <path d="M10 20v-5.5h4V20" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">home</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 17v-6a6 6 0 0 1 12 0v6" />
      <path d="M4 17h16" />
      <path d="M10 20.5h4M12 3v2" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">bell</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2z" />
      <path d="M4 7l8 5.5L20 7" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">mail</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5.5 5h13a2 2 0 0 1 2 2v11.5a2 2 0 0 1 -2 2h-13a2 2 0 0 1 -2 -2v-11.5a2 2 0 0 1 2 -2z" />
      <path d="M3.5 10h17" />
      <path d="M8 3v4M16 3v4" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">calendar</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
      <path d="M12 7v5l3.5 2.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">clock</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 3.3L14.41 9.58L21.13 9.93L15.9 14.17L17.64 20.67L12 17L6.36 20.67L8.1 14.17L2.87 9.93L9.59 9.58z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">star</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 7.15A4.6 4.6 0 1 0 4.18 11.54L12 20.15L19.82 11.54A4.6 4.6 0 1 0 12 7.15z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">heart</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 20.5V5.5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v15l-6-4.25z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">bookmark</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 6.5h16M9.5 6.5v-2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v2" />
      <path d="M6 6.5l.9 12.6a1.5 1.5 0 0 0 1.5 1.4h7.2a1.5 1.5 0 0 0 1.5-1.4L18 6.5" />
      <path d="M10 10.5v6M14 10.5v6" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">trash</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M15 4.5l4.5 4.5L9 19.5H4.5V15z" />
      <path d="M12.5 7l4.5 4.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">edit</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M10.5 8.5h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2z" />
      <path d="M15.5 8.5v-3a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h3" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">copy</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 3.5v11" />
      <path d="M7.5 10.5 12 15l4.5-4.5" />
      <path d="M4 15.5v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">download</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 15V4" />
      <path d="M7.5 8.5 12 4l4.5 4.5" />
      <path d="M4 15.5v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">upload</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M9.5 16.5h-2a4.5 4.5 0 0 1 0-9h2" />
      <path d="M14.5 7.5h2a4.5 4.5 0 0 1 0 9h-2" />
      <path d="M8.5 12h7" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">link</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M19.5 13.5v5a2 2 0 0 1-2 2h-12a2 2 0 0 1-2-2v-12a2 2 0 0 1 2-2h5" />
      <path d="M14.5 3.5h6v6" />
      <path d="M20.5 3.5l-9 9" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">external</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M2.5 12a11 11 0 0 1 19 0a11 11 0 0 1-19 0z" />
      <path d="M9 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">eye</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M2.5 12a11 11 0 0 1 19 0a11 11 0 0 1-19 0z" />
      <path d="M9 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
      <path d="M4 4l16 16" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">eye-off</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6.5 10.5h11a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-11a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2z" />
      <path d="M8 10.5V8a4 4 0 0 1 8 0v2.5" />
      <path d="M12 14.5v2" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">lock</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 6.5h16M7 12h10M10 17.5h4" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">filter</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M8 4v16M4.5 7.5 8 4l3.5 3.5" />
      <path d="M16 20V4M12.5 16.5 16 20l3.5-3.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">sort</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M19 14.63A7.25 7.25 0 1 1 15.63 6.47" />
      <path d="M14.78 3.33L15.63 6.47L12.49 7.31" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">refresh</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
      <path d="M12 11.25v5.25" />
      <path d="M12 7.5v.01" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">info</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 4 21 19.5H3z" />
      <path d="M12 9.5v3.5M12 16.75v.01" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">warning</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M20.68 15.6L15.6 20.68L8.4 20.68L3.32 15.6L3.32 8.4L8.4 3.32L15.6 3.32L20.68 8.4z" />
      <path d="M9.25 9.25l5.5 5.5M14.75 9.25l-5.5 5.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">error</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
      <path d="M9.5 9.5a2.5 2.5 0 1 1 3.75 2.17c-.8.46-1.25.98-1.25 1.83" />
      <path d="M12 17.25v.01" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">help</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M8.5 12a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0" />
      <path d="M19 12h2.25M16.95 16.95l1.59 1.59M12 19v2.25M7.05 16.95l-1.59 1.59M5 12H2.75M7.05 7.05 5.46 5.46M12 5V2.75M16.95 7.05l1.59-1.59" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">sun</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M20.75 12.17A8.5 8.5 0 1 1 11.31 3.55A6.75 6.75 0 0 0 20.75 12.17z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">moon</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3.5 18V6.5a2 2 0 0 1 2-2h4l2 2.5h7a2 2 0 0 1 2 2V18a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">folder</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M14 3.5H7.5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8z" />
      <path d="M14 3.5V8h4.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">file</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5.5 4.5h13a2 2 0 0 1 2 2v11a2 2 0 0 1 -2 2h-13a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2z" />
      <path d="M13.75 8.75a1.75 1.75 0 1 0 3.5 0a1.75 1.75 0 1 0 -3.5 0" />
      <path d="M4 17l4.5-4.5 6.5 6.5M13.5 16.5l2.5-2.5 4 4" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">image</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M7.5 4.5v15l12-7.5z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">play</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M8.5 5v14M15.5 5v14" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">pause</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M20.5 3.5 3.5 10.5l7 3 3 7z" />
      <path d="M20.5 3.5l-10 10" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">send</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 3Q13.4 10.6 21 12Q13.4 13.4 12 21Q10.6 13.4 3 12Q10.6 10.6 12 3z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">sparkle</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 18 18 6" />
      <path d="M9 6h9v9" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">arrow-up-right</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M18 18 6 6" />
      <path d="M15 6H6v9" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">arrow-up-left</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 6l12 12" />
      <path d="M18 9v9H9" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">arrow-down-right</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M18 6 6 18" />
      <path d="M6 9v9h9" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">arrow-down-left</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M11.5 6.5 6 12l5.5 5.5" />
      <path d="M18 6.5 12.5 12l5.5 5.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">chevrons-left</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 6.5l5.5 5.5L6 17.5" />
      <path d="M12.5 6.5 18 12l-5.5 5.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">chevrons-right</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6.5 11.5 12 6l5.5 5.5" />
      <path d="M6.5 18 12 12.5l5.5 5.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">chevrons-up</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6.5 6 12 11.5 17.5 6" />
      <path d="M6.5 12.5 12 18l5.5-5.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">chevrons-down</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 15.25h12L12 8.75z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">caret-up</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 8.75h12L12 15.25z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">caret-down</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M15.25 6v12L8.75 12z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">caret-left</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M8.75 6v12l6.5-6z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">caret-right</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M9 14 4.5 9.5 9 5" />
      <path d="M4.5 9.5h10a5 5 0 0 1 0 10H11" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">undo</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M15 14l4.5-4.5L15 5" />
      <path d="M19.5 9.5h-10a5 5 0 0 0 0 10H13" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">redo</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M14.5 3.5h6v6M20.5 3.5l-6 6" />
      <path d="M9.5 20.5h-6v-6M3.5 20.5l6-6" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">expand</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M14 4v6h6M14 10l6.5-6.5" />
      <path d="M10 20v-6H4M10 14l-6.5 6.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">collapse</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 9V6a2 2 0 0 1 2-2h3" />
      <path d="M15 4h3a2 2 0 0 1 2 2v3" />
      <path d="M20 15v3a2 2 0 0 1-2 2h-3" />
      <path d="M9 20H6a2 2 0 0 1-2-2v-3" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">maximize</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M9 4v3a2 2 0 0 1-2 2H4" />
      <path d="M20 9h-3a2 2 0 0 1-2-2V4" />
      <path d="M15 20v-3a2 2 0 0 1 2-2h3" />
      <path d="M4 15h3a2 2 0 0 1 2 2v3" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">minimize</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 3v18M3 12h18" />
      <path d="M9 6l3-3 3 3M9 18l3 3 3-3" />
      <path d="M6 9l-3 3 3 3M18 9l3 3-3 3" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">move</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M8 6a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M8 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M8 18a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M14 6a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M14 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M14 18a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">grip</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 3.5h3.5a1.5 1.5 0 0 1 1.5 1.5v3.5a1.5 1.5 0 0 1 -1.5 1.5h-3.5a1.5 1.5 0 0 1 -1.5 -1.5v-3.5a1.5 1.5 0 0 1 1.5 -1.5zM15.5 3.5h3.5a1.5 1.5 0 0 1 1.5 1.5v3.5a1.5 1.5 0 0 1 -1.5 1.5h-3.5a1.5 1.5 0 0 1 -1.5 -1.5v-3.5a1.5 1.5 0 0 1 1.5 -1.5z" />
      <path d="M5 14h3.5a1.5 1.5 0 0 1 1.5 1.5v3.5a1.5 1.5 0 0 1 -1.5 1.5h-3.5a1.5 1.5 0 0 1 -1.5 -1.5v-3.5a1.5 1.5 0 0 1 1.5 -1.5zM15.5 14h3.5a1.5 1.5 0 0 1 1.5 1.5v3.5a1.5 1.5 0 0 1 -1.5 1.5h-3.5a1.5 1.5 0 0 1 -1.5 -1.5v-3.5a1.5 1.5 0 0 1 1.5 -1.5z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">grid</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M8.5 6.5h11.5M8.5 12h11.5M8.5 17.5h11.5" />
      <path d="M4 6.5h.01M4 12h.01M4 17.5h.01" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">list</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2z" />
      <path d="M12 4v16" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">columns</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2z" />
      <path d="M4 12h16" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">rows</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 4h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2z" />
      <path d="M4 9.5h16" />
      <path d="M9.5 9.5V20" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">layout</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2z" />
      <path d="M9 5v14" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">sidebar</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2z" />
      <path d="M15 5v14" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">panel-right</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 6h9M17 6h3M4 12h3M11 12h9M4 18h8M16 18h4" />
      <path d="M13 6a2 2 0 1 0 4 0a2 2 0 1 0 -4 0M7 12a2 2 0 1 0 4 0a2 2 0 1 0 -4 0M12 18a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">sliders</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
      <path d="M8 12.5l2.75 2.75L16 9.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">check-circle</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
      <path d="M9.25 9.25l5.5 5.5M14.75 9.25l-5.5 5.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">close-circle</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
      <path d="M12 8v8M8 12h8" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">plus-circle</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
      <path d="M8 12h8" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">minus-circle</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6.5 4h11a2.5 2.5 0 0 1 2.5 2.5v11a2.5 2.5 0 0 1 -2.5 2.5h-11a2.5 2.5 0 0 1 -2.5 -2.5v-11a2.5 2.5 0 0 1 2.5 -2.5z" />
      <path d="M8 12.5l2.75 2.75L16 9.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">check-square</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6.5 4h11a2.5 2.5 0 0 1 2.5 2.5v11a2.5 2.5 0 0 1 -2.5 2.5h-11a2.5 2.5 0 0 1 -2.5 -2.5v-11a2.5 2.5 0 0 1 2.5 -2.5z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">square</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">circle</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M11 5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M11 12a1 1 0 1 0 2 0a1 1 0 1 0 -2 0M11 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">more-vertical</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4" />
      <path d="M3.5 12h11" />
      <path d="M10.5 8l4 4-4 4" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">log-in</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4" />
      <path d="M9.5 12h11" />
      <path d="M16.5 8l4 4-4 4" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">log-out</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 10.5a6.5 6.5 0 1 0 13 0a6.5 6.5 0 1 0 -13 0" />
      <path d="M15.5 15.5l4.5 4.5" />
      <path d="M10.5 8v5M8 10.5h5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">zoom-in</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 10.5a6.5 6.5 0 1 0 13 0a6.5 6.5 0 1 0 -13 0" />
      <path d="M15.5 15.5l4.5 4.5" />
      <path d="M8 10.5h5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">zoom-out</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M9 3.5h6M10 3.5V9l-3 3.5h10L14 9V3.5" />
      <path d="M12 12.5v8" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">pin</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 4h7.5l8.5 8.5-7.5 7.5L4 11.5z" />
      <path d="M7.5 9a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 -3 0" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">tag</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M10 4 8 20M16 4l-2 16" />
      <path d="M5 9h15M4 15h15" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">hash</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M8.5 12a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0" />
      <path d="M15.5 8v4.5a2.5 2.5 0 0 0 5 0V12a8.5 8.5 0 1 0-3.5 6.87" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">at</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 16a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
      <path d="M10.83 13.17l8.67-8.67" />
      <path d="M17 7l2.5 2.5M14 10l2 2" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">key</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 3.5l7.5 3V12c0 4.5-3.2 7.6-7.5 9-4.3-1.4-7.5-4.5-7.5-9V6.5z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">shield</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 3.5l7.5 3V12c0 4.5-3.2 7.6-7.5 9-4.3-1.4-7.5-4.5-7.5-9V6.5z" />
      <path d="M8.75 12l2.25 2.25 4.25-4.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">shield-check</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6.5 10.5h11a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-11a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2z" />
      <path d="M8 10.5V8a4 4 0 0 1 7.75-1.4" />
      <path d="M12 14.5v2" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">lock-open</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 3.5v8" />
      <path d="M6.86 6.37A8 8 0 1 0 17.14 6.37" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">power</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M13 3 5 13.5h6.5L11 21l8-10.5h-6.5z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">bolt</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 20.5v-17" />
      <path d="M6 4h12.5L16 8.5l2.5 4.5H6" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">flag</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 4h16a1 1 0 0 1 1 1v2.5a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-2.5a1 1 0 0 1 1 -1z" />
      <path d="M5 8.5V18a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5" />
      <path d="M10 12.5h4" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">archive</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5.5 4.5h13a2 2 0 0 1 2 2v11a2 2 0 0 1 -2 2h-13a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2z" />
      <path d="M3.5 13h4.5l1.5 2.5h5l1.5-2.5h4.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">inbox</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3.5 5.5a2 2 0 0 1 2-2h10l5 5v10a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z" />
      <path d="M7.5 20.5v-6h9v6" />
      <path d="M8 3.5v4h6v-4" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">save</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M7 8V3.5h10V8" />
      <path d="M7 17H5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" />
      <path d="M7 13.5h10v7H7z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">print</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M14.5 5.5a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0M4.5 12a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0M14.5 18.5a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0" />
      <path d="M9.1 10.64l5.8-3.78M9.1 13.36l5.8 3.78" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">share</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M17.25 8v7.25a5.25 5.25 0 0 1-10.5 0V7a3.5 3.5 0 0 1 7 0v8a1.75 1.75 0 0 1-3.5 0V8.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">paperclip</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4.25 17.5a2.75 2.75 0 1 0 5.5 0a2.75 2.75 0 1 0 -5.5 0M14.25 17.5a2.75 2.75 0 1 0 5.5 0a2.75 2.75 0 1 0 -5.5 0" />
      <path d="M8.58 15.25 17 4M15.42 15.25 7 4" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">scissors</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M9 4.5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2h-2" />
      <path d="M10 3h4a1 1 0 0 1 1 1v1.5a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-1.5a1 1 0 0 1 1 -1z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">clipboard</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M9 4.5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2h-2" />
      <path d="M10 3h4a1 1 0 0 1 1 1v1.5a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1v-1.5a1 1 0 0 1 1 -1z" />
      <path d="M9 13.5l2 2 4-4.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">clipboard-check</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6.5 4h6a4 4 0 0 1 0 8h-6z" />
      <path d="M6.5 12h7a4 4 0 0 1 0 8h-7z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">bold</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M10 4h8M6 20h8" />
      <path d="M14 4l-4 16" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">italic</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M7 4v6.5a5 5 0 0 0 10 0V4" />
      <path d="M5.5 20.5h13" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">underline</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M16 7c-.5-1.8-2-3-4-3-2.3 0-4 1.4-4 3.5 0 2.3 2 3.5 4 4.5s4 2.2 4 4.5c0 2.1-1.7 3.5-4 3.5-2 0-3.5-1.2-4-3" />
      <path d="M4.5 12h15" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">strikethrough</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 5.25h16M4 14.25h16" />
      <path d="M4 9.75h10M4 18.75h10" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">align-left</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 5.25h16M4 14.25h16" />
      <path d="M7 9.75h10M7 18.75h10" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">align-center</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 5.25h16M4 14.25h16" />
      <path d="M10 9.75h10M10 18.75h10" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">align-right</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M11 7h9M11 16.75h9" />
      <path d="M4 5.5l1.75-1.25V9.5" />
      <path d="M4 15.25a1.75 1.75 0 1 1 3 1.25L4 19.5h3.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">list-ordered</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 7.5l2 2 3.5-4M4 16.5l2 2 3.5-4" />
      <path d="M13 7.5h7M13 16.5h7" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">list-checks</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M10 11H6.5a1 1 0 0 1-1-1V7.5a1 1 0 0 1 1-1H9a1 1 0 0 1 1 1V12c0 3-1.5 5-4.5 6" />
      <path d="M18.5 11H15a1 1 0 0 1-1-1V7.5a1 1 0 0 1 1-1h2.5a1 1 0 0 1 1 1V12c0 3-1.5 5-4.5 6" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">quote</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M8.5 7 3.5 12l5 5" />
      <path d="M15.5 7l5 5-5 5" />
      <path d="M13.5 5l-3 14" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">code</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 4.5h14a2 2 0 0 1 2 2v11a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2z" />
      <path d="M7 9.5l3 2.5-3 2.5" />
      <path d="M12.5 15h4.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">terminal</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 7V4.5h14V7" />
      <path d="M12 4.5v15" />
      <path d="M9.5 19.5h5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">type</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 3a9 9 0 0 0 0 18c1.5 0 2-1 2-2v-.5a2 2 0 0 1 2-2h1.5a3.5 3.5 0 0 0 3.5-3.5C21 7 17 3 12 3z" />
      <path d="M7.5 12h.01M9 8h.01M13.5 7h.01M16.5 10h.01" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">palette</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 20l2-9 4-4 7 7-4 4z" />
      <path d="M8.5 14a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 -3 0" />
      <path d="M4 20l4.94-4.94" />
      <path d="M12.5 4.5l7 7" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">pen</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M7 3v12a2 2 0 0 0 2 2h12" />
      <path d="M3 7h12a2 2 0 0 1 2 2v12" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">crop</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 3.5 21 8l-9 4.5L3 8z" />
      <path d="M3 12l9 4.5 9-4.5" />
      <path d="M3 16l9 4.5 9-4.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">layers</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M9 9V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">command</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 4h12a2.5 2.5 0 0 1 2.5 2.5v8A2.5 2.5 0 0 1 18 17h-7l-4.5 3.5V17H6a2.5 2.5 0 0 1-2.5-2.5v-8A2.5 2.5 0 0 1 6 4z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">message</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M10 9h9a2 2 0 0 1 2 2v5.5a2 2 0 0 1-2 2h-.5V21L15 18.5h-5a2 2 0 0 1-2-2V11a2 2 0 0 1 2-2z" />
      <path d="M15.5 5.5V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2v2.5L8 13" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">messages</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 3.5h3.5l1.5 4.5-2.25 1.5a11 11 0 0 0 6.75 6.75L16 14l4.5 1.5V19a1.5 1.5 0 0 1-1.5 1.5A16 16 0 0 1 3.5 5 1.5 1.5 0 0 1 5 3.5z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">phone</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 6h8.5a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8.5a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2z" />
      <path d="M15.5 10.5l5.5-3v9l-5.5-3" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">video</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 8.5a2 2 0 0 1 2-2h2.5L9 4h6l1.5 2.5H19a2 2 0 0 1 2 2V18a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
      <path d="M8.75 13.25a3.25 3.25 0 1 0 6.5 0a3.25 3.25 0 1 0 -6.5 0" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">camera</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 3h0a3 3 0 0 1 3 3v5a3 3 0 0 1 -3 3h0a3 3 0 0 1 -3 -3v-5a3 3 0 0 1 3 -3z" />
      <path d="M5.5 11a6.5 6.5 0 0 0 13 0" />
      <path d="M12 17.5v3.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">mic</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 3h0a3 3 0 0 1 3 3v5a3 3 0 0 1 -3 3h0a3 3 0 0 1 -3 -3v-5a3 3 0 0 1 3 -3z" />
      <path d="M5.5 11a6.5 6.5 0 0 0 13 0" />
      <path d="M12 17.5v3.5" />
      <path d="M4 4l16 16" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">mic-off</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 9.5h3l4.5-4v13l-4.5-4H4z" />
      <path d="M15 9a4 4 0 0 1 0 6M17.5 6.5a7.5 7.5 0 0 1 0 11" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">volume</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 9.5h3l4.5-4v13l-4.5-4H4z" />
      <path d="M15.5 9.5l5 5M20.5 9.5l-5 5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">volume-off</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M9 17.5V5.5l11-2v12" />
      <path d="M4 17.5a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0" />
      <path d="M15 15.5a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">music</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 16v-4a8 8 0 0 1 16 0v4" />
      <path d="M5.5 13.5h1a1.5 1.5 0 0 1 1.5 1.5v3.5a1.5 1.5 0 0 1 -1.5 1.5h-1a1.5 1.5 0 0 1 -1.5 -1.5v-3.5a1.5 1.5 0 0 1 1.5 -1.5z" />
      <path d="M17.5 13.5h1a1.5 1.5 0 0 1 1.5 1.5v3.5a1.5 1.5 0 0 1 -1.5 1.5h-1a1.5 1.5 0 0 1 -1.5 -1.5v-3.5a1.5 1.5 0 0 1 1.5 -1.5z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">headphones</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5.5 5.5v13L15 12z" />
      <path d="M18.75 5.5v13" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">skip-forward</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M18.5 5.5v13L9 12z" />
      <path d="M5.25 5.5v13" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">skip-back</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M7.5 5.5h9a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-9a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">stop</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
      <path d="M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">record</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 11.5v-2a3 3 0 0 1 3-3h13M17 3.5l3 3-3 3" />
      <path d="M20 12.5v2a3 3 0 0 1-3 3H4M7 14.5l-3 3 3 3" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">repeat</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 7h3.5c4.5 0 4.5 10 9 10H20M4 17h3.5c4.5 0 4.5-10 9-10H20" />
      <path d="M17.5 4.5 20 7l-2.5 2.5M17.5 14.5 20 17l-2.5 2.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">shuffle</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4.5 18.5a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
      <path d="M4.5 11.5a8 8 0 0 1 8 8" />
      <path d="M4.5 4.5a15 15 0 0 1 15 15" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">rss</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M2.81 9.06a13 13 0 0 1 18.38 0M5.64 11.89a9 9 0 0 1 12.73 0M8.46 14.71a5 5 0 0 1 7.07 0" />
      <path d="M11 18.25a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">wifi</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M2.81 9.06a13 13 0 0 1 18.38 0M5.64 11.89a9 9 0 0 1 12.73 0M8.46 14.71a5 5 0 0 1 7.07 0" />
      <path d="M11 18.25a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
      <path d="M4 4l16 16" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">wifi-off</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M7 7.5l10 9-5 4.5V3l5 4.5-10 9" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">bluetooth</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 6.5h11.5a2.5 2.5 0 0 1 2.5 2.5v6a2.5 2.5 0 0 1 -2.5 2.5h-11.5a2.5 2.5 0 0 1 -2.5 -2.5v-6a2.5 2.5 0 0 1 2.5 -2.5z" />
      <path d="M19 10h1.5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H19" />
      <path d="M6.5 10v4M10 10v4" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">battery</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M9 3v4.5M15 3v4.5" />
      <path d="M6 7.5h12v3a6 6 0 0 1-12 0z" />
      <path d="M12 16.5V21" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">plug</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4.5 3.5h15a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-15a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2z" />
      <path d="M12 16.5v4M8 20.5h8" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">monitor</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4.5 15V5.5A1.5 1.5 0 0 1 6 4h12a1.5 1.5 0 0 1 1.5 1.5V15" />
      <path d="M2.75 18.5 4.5 15h15l1.75 3.5a1 1 0 0 1-.9 1.5H3.65a1 1 0 0 1-.9-1.5z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">laptop</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M9 2.5h6a2.5 2.5 0 0 1 2.5 2.5v14a2.5 2.5 0 0 1 -2.5 2.5h-6a2.5 2.5 0 0 1 -2.5 -2.5v-14a2.5 2.5 0 0 1 2.5 -2.5z" />
      <path d="M11 18h2" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">smartphone</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6.5 2.5h11a2.5 2.5 0 0 1 2.5 2.5v14a2.5 2.5 0 0 1 -2.5 2.5h-11a2.5 2.5 0 0 1 -2.5 -2.5v-14a2.5 2.5 0 0 1 2.5 -2.5z" />
      <path d="M11 18h2" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">tablet</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M9 6.5h6a3 3 0 0 1 3 3v5a3 3 0 0 1 -3 3h-6a3 3 0 0 1 -3 -3v-5a3 3 0 0 1 3 -3z" />
      <path d="M8.5 6.5 9.25 3h5.5l.75 3.5M8.5 17.5l.75 3.5h5.5l.75-3.5" />
      <path d="M12 10v2h1.75" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">watch</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 3h14a2 2 0 0 1 2 2v3.25a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-3.25a2 2 0 0 1 2 -2z" />
      <path d="M5 13.75h14a2 2 0 0 1 2 2v3.25a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-3.25a2 2 0 0 1 2 -2z" />
      <path d="M7 6.63h.01M7 17.38h.01" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">server</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 5.5a8 2.5 0 1 0 16 0a8 2.5 0 1 0-16 0" />
      <path d="M4 5.5v13a8 2.5 0 0 0 16 0v-13" />
      <path d="M4 12a8 2.5 0 0 0 16 0" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">database</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M7.5 18.75A4 4 0 0 1 7 10.78A5.5 5.5 0 0 1 17.96 11.38A3.75 3.75 0 0 1 17 18.75z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">cloud</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M7.5 16A4 4 0 0 1 7 8.03A5.5 5.5 0 0 1 17.96 8.63A3.75 3.75 0 0 1 17 16" />
      <path d="M12 21V10" />
      <path d="M9.5 12.5 12 10l2.5 2.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">cloud-upload</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M7.5 16A4 4 0 0 1 7 8.03A5.5 5.5 0 0 1 17.96 8.63A3.75 3.75 0 0 1 17 16" />
      <path d="M12 9.5v12" />
      <path d="M10 19.5l2 2 2-2" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">cloud-download</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M8 6h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2z" />
      <path d="M10.5 9.5h3a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-3a1 1 0 0 1 -1 -1v-3a1 1 0 0 1 1 -1z" />
      <path d="M9.5 3v3M14.5 3v3M9.5 18v3M14.5 18v3M3 9.5h3M3 14.5h3M18 9.5h3M18 14.5h3" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">cpu</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4.5 13.5h15a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-15a2 2 0 0 1 -2 -2v-3a2 2 0 0 1 2 -2z" />
      <path d="M3.09 14.09 5.6 5.3A2 2 0 0 1 7.5 4h9a2 2 0 0 1 1.9 1.3l2.51 8.79" />
      <path d="M6.5 17h.01M10 17h.01" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">hard-drive</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 5.5a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0M4 18.5a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0M6.5 8v8" />
      <path d="M15 7a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0" />
      <path d="M17.5 9.5c0 4.5-11 3-11 6.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">git-branch</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M8.5 12a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0" />
      <path d="M2.5 12h6M15.5 12h6" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">git-commit</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 5.5a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0M4 18.5a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0M6.5 8v8" />
      <path d="M15 14a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0" />
      <path d="M6.5 8c0 4.5 4 6 8.5 6" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">git-merge</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3.5 5.5a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0M3.5 18.5a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0M6 8v8" />
      <path d="M15.5 18.5a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0M18 16V9a2.5 2.5 0 0 0-2.5-2.5H12" />
      <path d="M14.5 4 12 6.5 14.5 9" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">pull-request</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 5.5h0a5 5 0 0 1 5 5v5a5 5 0 0 1 -5 5h0a5 5 0 0 1 -5 -5v-5a5 5 0 0 1 5 -5z" />
      <path d="M7 11h10M12 11v9.5" />
      <path d="M9.5 6.17 8 3.75M14.5 6.17 16 3.75" />
      <path d="M7 14.5H3.5M17 14.5h3.5M7.6 17.87 5 20M16.4 17.87 19 20" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">bug</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M9 3.5H8a2 2 0 0 0-2 2v4A2.5 2.5 0 0 1 3.5 12 2.5 2.5 0 0 1 6 14.5v4a2 2 0 0 0 2 2h1" />
      <path d="M15 3.5h1a2 2 0 0 1 2 2v4a2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0-2.5 2.5v4a2 2 0 0 1-2 2h-1" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">braces</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M9 4H5.5v16H9" />
      <path d="M15 4h3.5v16H15" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">brackets</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 3l8.5 4.5v9L12 21l-8.5-4.5v-9z" />
      <path d="M3.5 7.5 12 12l8.5-4.5M12 12v9" />
      <path d="M7.75 5.25l8.5 4.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">package</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 3l8.5 4.5v9L12 21l-8.5-4.5v-9z" />
      <path d="M3.5 7.5 12 12l8.5-4.5M12 12v9" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">box</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
      <path d="M3 12h18" />
      <path d="M12 3c-2.5 2.5-3.75 5.5-3.75 9s1.25 6.5 3.75 9c2.5-2.5 3.75-5.5 3.75-9S14.5 5.5 12 3z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">globe</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M9.5 16.5h-2a4.5 4.5 0 0 1 0-9h2" />
      <path d="M14.5 7.5h2a4.5 4.5 0 0 1 0 9h-2" />
      <path d="M12 3v2M12 19v2" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">unlink</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4.5 3h4a1.5 1.5 0 0 1 1.5 1.5v4a1.5 1.5 0 0 1 -1.5 1.5h-4a1.5 1.5 0 0 1 -1.5 -1.5v-4a1.5 1.5 0 0 1 1.5 -1.5z" />
      <path d="M15.5 3h4a1.5 1.5 0 0 1 1.5 1.5v4a1.5 1.5 0 0 1 -1.5 1.5h-4a1.5 1.5 0 0 1 -1.5 -1.5v-4a1.5 1.5 0 0 1 1.5 -1.5z" />
      <path d="M4.5 14h4a1.5 1.5 0 0 1 1.5 1.5v4a1.5 1.5 0 0 1 -1.5 1.5h-4a1.5 1.5 0 0 1 -1.5 -1.5v-4a1.5 1.5 0 0 1 1.5 -1.5z" />
      <path d="M6.5 6.5h.01M17.5 6.5h.01M6.5 17.5h.01M14.5 14.5h.01M20.5 14.5h.01M17.5 17.5h.01M14.5 20.5h.01M20.5 20.5h.01" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">qr-code</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 5v14M12 5v14M19 5v14" />
      <path d="M8.5 5v10M15.5 5v10" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">barcode</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3.5 20h17" />
      <path d="M7.5 20v-7.5M12 20V4M16.5 20V9.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">bar-chart</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 4v16h16" />
      <path d="M8 15l3.5-4 3 2.5L20 7" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">line-chart</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M11 5a8 8 0 1 0 8 8h-8z" />
      <path d="M14.5 3a6.5 6.5 0 0 1 6.5 6.5h-6.5z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">pie-chart</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 17l6-6 4 4 8-8" />
      <path d="M15.5 7H21v5.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">trend-up</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 7l6 6 4-4 8 8" />
      <path d="M15.5 17H21v-5.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">trend-down</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M2.5 12h4l3-7.5 5 15 3-7.5h4" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">activity</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4.21 19a9 9 0 1 1 15.58 0" />
      <path d="M12 14.5l3.5-4.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">gauge</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2z" />
      <path d="M3 10h18M3 15h18" />
      <path d="M9.5 10v10" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">table</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5.5 3h13a2.5 2.5 0 0 1 2.5 2.5v13a2.5 2.5 0 0 1 -2.5 2.5h-13a2.5 2.5 0 0 1 -2.5 -2.5v-13a2.5 2.5 0 0 1 2.5 -2.5z" />
      <path d="M7.5 7v8M12 7v4.5M16.5 7v10" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">kanban</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M14 3.5H7.5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8zM14 3.5V8h4.5" />
      <path d="M9 12.5h6M9 16.5h4" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">file-text</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M14 3.5H7.5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8zM14 3.5V8h4.5" />
      <path d="M12 11v6M9 14h6" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">file-plus</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M14 3.5H7.5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8zM14 3.5V8h4.5" />
      <path d="M10.25 11 9 14l1.25 3M13.75 11 15 14l-1.25 3" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">file-code</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3.5 18V6.5a2 2 0 0 1 2-2h4l2 2.5h6a2 2 0 0 1 2 2v2" />
      <path d="M3.5 18l2.3-5.6A2 2 0 0 1 7.65 11H20.5a1 1 0 0 1 .93 1.37l-2.4 6.4a2 2 0 0 1-1.87 1.23H5.5a2 2 0 0 1-2-2" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">folder-open</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3.5 18V6.5a2 2 0 0 1 2-2h4l2 2.5h7a2 2 0 0 1 2 2V18a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z" />
      <path d="M12 10.5v6M9 13.5h6" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">folder-plus</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 18V5.5a2 2 0 0 1 2-2h12V20H7a2 2 0 0 1 0-4h12" />
      <path d="M9 7.5h6" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">book</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 6.5v14" />
      <path d="M12 6.5C10 5 7 4.5 3 4.5v13c4 0 7 .5 9 3" />
      <path d="M12 6.5c2-1.5 5-2 9-2v13c-4 0-7 .5-9 3" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">book-open</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M7.5 2.5h11a2 2 0 0 1 2 2v15a2 2 0 0 1 -2 2h-11a2 2 0 0 1 -2 -2v-15a2 2 0 0 1 2 -2z" />
      <path d="M3.5 7h4M3.5 12h4M3.5 17h4" />
      <path d="M11 8h6M11 12h6" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">notebook</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2z" />
      <path d="M6.5 8h11" />
      <path d="M6.5 12h4M6.5 16h4" />
      <path d="M14.5 11.5h2.5a0.5 0.5 0 0 1 0.5 0.5v4a0.5 0.5 0 0 1 -0.5 0.5h-2.5a0.5 0.5 0 0 1 -0.5 -0.5v-4a0.5 0.5 0 0 1 0.5 -0.5z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">newspaper</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M7 8.5h10a3 3 0 0 1 3 3v6a3 3 0 0 1 -3 3h-10a3 3 0 0 1 -3 -3v-6a3 3 0 0 1 3 -3z" />
      <path d="M12 8.5V5" />
      <path d="M11 4a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
      <path d="M9 13v2M15 13v2" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">bot</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 5a3 3 0 0 0-5 .25 3 3 0 0 0-3 4.25 3.25 3.25 0 0 0 .25 5.5A3.25 3.25 0 0 0 8 19a2.25 2.25 0 0 0 4 0z" />
      <path d="M12 5a3 3 0 0 1 5 .25 3 3 0 0 1 3 4.25 3.25 3.25 0 0 1-.25 5.5A3.25 3.25 0 0 1 16 19a2.25 2.25 0 0 1-4 0" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">brain</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M10 5q1 6 7 7-6 1-7 7-1-6-7-7 6-1 7-7z" />
      <path d="M18 3q.4 2.1 2.5 2.5-2.1.4-2.5 2.5-.4-2.1-2.5-2.5 2.1-.4 2.5-2.5z" />
      <path d="M18.5 16.5v4M16.5 18.5h4" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">sparkles</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 20 14 10" />
      <path d="M18 3.5v5M15.5 6h5" />
      <path d="M20 12v3M18.5 13.5h3" />
      <path d="M11 3v2.5M9.75 4.25h2.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">wand</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M2.5 4.5h2.25L6.75 15h11.5l2-7.5H5.4" />
      <path d="M7.25 19.25a1.25 1.25 0 1 0 2.5 0a1.25 1.25 0 1 0 -2.5 0M15.25 19.25a1.25 1.25 0 1 0 2.5 0a1.25 1.25 0 1 0 -2.5 0" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">cart</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6.5 7.5h11a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-11a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2z" />
      <path d="M9 10.5V6.5a3 3 0 0 1 6 0v4" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">bag</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2z" />
      <path d="M3 9.5h18" />
      <path d="M6.5 15h3" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">credit-card</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 6.5h14a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2z" />
      <path d="M5 6.5l10.6-3a1.5 1.5 0 0 1 1.9 1.45V6.5" />
      <path d="M21 10.5h-3.5a2 2 0 0 0 0 4H21" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">wallet</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3.5 9a5.5 5.5 0 1 0 11 0a5.5 5.5 0 1 0 -11 0" />
      <path d="M14.47 9.53A5.5 5.5 0 1 1 9.53 14.47" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">coins</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4.5 6h15a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-15a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2z" />
      <path d="M9.25 12a2.75 2.75 0 1 0 5.5 0a2.75 2.75 0 1 0 -5.5 0" />
      <path d="M6 12h.01M18 12h.01" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">banknote</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5.5 20.5V5A1.5 1.5 0 0 1 7 3.5h10A1.5 1.5 0 0 1 18.5 5v15.5l-2.17-1.5-2.16 1.5-2.17-1.5-2.17 1.5-2.16-1.5z" />
      <path d="M9 8h6M9 11.5h6M9 15h3.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">receipt</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M18.5 5.5l-13 13" />
      <path d="M5.5 7.5a2 2 0 1 0 4 0a2 2 0 1 0 -4 0M14.5 16.5a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">percent</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4.5 8h15a1 1 0 0 1 1 1v2a1 1 0 0 1 -1 1h-15a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1z" />
      <path d="M5 12v7a1.5 1.5 0 0 0 1.5 1.5h11A1.5 1.5 0 0 0 19 19v-7" />
      <path d="M12 8v12.5" />
      <path d="M12 8C11 5.5 7.5 3.5 7.5 6c0 1.4 2 2 4.5 2s4.5-.6 4.5-2c0-2.5-3.5-.5-4.5 2" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">gift</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3.5 9.5 5 4.5h14l1.5 5a2.83 2.83 0 0 1-5.67 0 2.83 2.83 0 0 1-5.66 0 2.83 2.83 0 0 1-5.67 0z" />
      <path d="M5 12v6.5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V12" />
      <path d="M10 20.5V16h4v4.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">store</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 17H3.5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1H13a1 1 0 0 1 1 1v11" />
      <path d="M14 9h3.5l4 4v3a1 1 0 0 1-1 1H19M9 17h6" />
      <path d="M5 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0M15 17a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">truck</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4.5 20.5V5A1.5 1.5 0 0 1 6 3.5h7A1.5 1.5 0 0 1 14.5 5v15.5" />
      <path d="M14.5 9.5h3.5a1.5 1.5 0 0 1 1.5 1.5v9.5" />
      <path d="M3 20.5h18" />
      <path d="M7.75 7.5h.01M11.25 7.5h.01M7.75 11h.01M11.25 11h.01M7.75 14.5h.01M11.25 14.5h.01M17 13h.01M17 16.5h.01" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">building</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3.5 9 12 4l8.5 5z" />
      <path d="M6 12.5V17M10 12.5V17M14 12.5V17M18 12.5V17" />
      <path d="M3 20.5h18" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">bank</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 7h14a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2z" />
      <path d="M9 7V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5V7" />
      <path d="M3 12.5h18" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">briefcase</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3.5 6.5 9 4l6 2.5L20.5 4v13.5L15 20l-6-2.5L3.5 20z" />
      <path d="M9 4v13.5M15 6.5V20" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">map</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z" />
      <path d="M9.5 9.5a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">map-pin</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
      <path d="M15.5 8.5l-2 5-5 2 2-5z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">compass</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 3.5 19 20l-7-4-7 4z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">navigation</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 3c.9 0 1.5 1 1.5 2.5v4l7 4.5v2l-7-2v4l2.25 1.75V21L12 20l-3.75 1v-1.25L10.5 18v-4l-7 2v-2l7-4.5v-4C10.5 4 11.1 3 12 3z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">plane</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 10.5l1.6-4.3A2 2 0 0 1 8.5 5h7a2 2 0 0 1 1.9 1.2l1.6 4.3" />
      <path d="M5 10.5h14a2 2 0 0 1 2 2v2.5a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-2.5a2 2 0 0 1 2 -2z" />
      <path d="M6 17v2M18 17v2" />
      <path d="M6.5 13.75h1M16.5 13.75h1" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">car</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M2.5 15.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0M14.5 15.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0" />
      <path d="M6 15.5 9.5 9h6M6 15.5h6l3.5-6.5" />
      <path d="M18 15.5 14.5 6.5h-2M8 9h1.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">bike</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M8 3h8a3 3 0 0 1 3 3v8.5a3 3 0 0 1 -3 3h-8a3 3 0 0 1 -3 -3v-8.5a3 3 0 0 1 3 -3z" />
      <path d="M5 10.5h14M12 3v7.5" />
      <path d="M8.5 14h.01M15.5 14h.01" />
      <path d="M8 17.5l-2 3M16 17.5l2 3" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">train</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 14h18l-2.5 5h-13z" />
      <path d="M6.5 14V9.5h11V14" />
      <path d="M10 9.5v-4h4v4" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">ship</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 2.5c3 2 4.5 5.5 4.5 9.5v4.5h-9V12c0-4 1.5-7.5 4.5-9.5z" />
      <path d="M7.5 12.5 5 15v3.5h2.5M16.5 12.5 19 15v3.5h-2.5" />
      <path d="M10.5 9a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 -3 0" />
      <path d="M12 19.25v2" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">rocket</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M10 5a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
      <path d="M12 7v14M8.5 10.5h7" />
      <path d="M4.5 13.5a7.5 7.5 0 0 0 15 0" />
      <path d="M3 15l1.5-1.5L6 15M18 15l1.5-1.5L21 15" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">anchor</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 8a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
      <path d="M3 20v-.5a5 5 0 0 1 5-5h2a5 5 0 0 1 5 5v.5" />
      <path d="M18.5 8v6M15.5 11h6" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">user-plus</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 8a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
      <path d="M3 20v-.5a5 5 0 0 1 5-5h2a5 5 0 0 1 5 5v.5" />
      <path d="M15.5 11h6" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">user-minus</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 8a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
      <path d="M3 20v-.5a5 5 0 0 1 5-5h2a5 5 0 0 1 5 5v.5" />
      <path d="M15.5 11l2 2 3.5-4" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">user-check</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 5h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2z" />
      <path d="M6 12a2.5 2.5 0 1 0 5 0a2.5 2.5 0 1 0 -5 0" />
      <path d="M14 10h3.5M14 14h3.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">id-card</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
      <path d="M8.5 14.5a4 4 0 0 0 7 0" />
      <path d="M9 9.5h.01M15 9.5h.01" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">smile</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
      <path d="M8.5 16.5a4 4 0 0 1 7 0" />
      <path d="M9 9.5h.01M15 9.5h.01" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">frown</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 10.5h2a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-8a1 1 0 0 1 1 -1z" />
      <path d="M7 11.5 10 5a1.8 1.8 0 0 1 3.4.8V10h4.8a2 2 0 0 1 2 2.35l-1.15 6.5a2 2 0 0 1-2 1.65H7" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">thumbs-up</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 3.5h2a1 1 0 0 1 1 1v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-8a1 1 0 0 1 1 -1z" />
      <path d="M7 12.5 10 19a1.8 1.8 0 0 0 3.4-.8V14h4.8a2 2 0 0 0 2-2.35l-1.15-6.5a2 2 0 0 0-2-1.65H7" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">thumbs-down</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 9a6 6 0 1 0 12 0a6 6 0 1 0 -12 0" />
      <path d="M8.5 14l-1.5 7 5-2.5 5 2.5-1.5-7" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">award</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M7 4h10v5a5 5 0 0 1-10 0z" />
      <path d="M7 6H4.5v1.5A3 3 0 0 0 7 10.5M17 6h2.5v1.5A3 3 0 0 1 17 10.5" />
      <path d="M12 14v6.5M8 20.5h8" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">trophy</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 16.5 3 6.5l5 4 4-6 4 6 5-4-1 10z" />
      <path d="M5 19.5h14" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">crown</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
      <path d="M7.5 12a4.5 4.5 0 1 0 9 0a4.5 4.5 0 1 0 -9 0" />
      <path d="M12 12h.01" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">target</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M9.5 17.5v-1c0-1.4-.6-2.2-1.5-3a6 6 0 1 1 8 0c-.9.8-1.5 1.6-1.5 3v1z" />
      <path d="M10 21h4" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">lightbulb</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 21a6.5 6.5 0 0 0 6.5-6.5c0-4.5-3.5-6.5-4.5-11-2.5 2-3 4.5-3 7-1-.5-2-1.5-2.5-2.5-2 2-3 4-3 6.5A6.5 6.5 0 0 0 12 21z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">flame</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 3.5s6.5 6.8 6.5 11a6.5 6.5 0 0 1-13 0c0-4.2 6.5-11 6.5-11z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">droplet</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 19C5 10 10 4.5 19.5 4.5 19.5 14 14 19 5 19z" />
      <path d="M4 20l9.5-9.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">leaf</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 3 6 11h3l-4 6h14l-4-6h3z" />
      <path d="M12 17v4" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">tree</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 13.5c-3 0-5-2-5-5v-4l2.5 2L12 4l2.5 2.5L17 4.5v4c0 3-2 5-5 5z" />
      <path d="M12 13.5v7" />
      <path d="M12 20.5c0-2.5-2-4.5-5-4.5 0 2.5 2 4.5 5 4.5zM12 20.5c0-2.5 2-4.5 5-4.5 0 2.5-2 4.5-5 4.5z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">flower</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M7.25 14.5A3.5 3.5 0 0 1 7.21 7.5A5.5 5.5 0 0 1 17.98 8.54A3 3 0 0 1 17.5 14.5z" />
      <path d="M8 17.5l-1 3M12 17.5l-1 3M16 17.5l-1 3" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">cloud-rain</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 3v18M19.79 7.5 4.21 16.5M19.79 16.5 4.21 7.5" />
      <path d="M14.1 3.5 12 5.6 9.9 3.5M20.41 9.57l-2.87-.77.77-2.87M18.31 18.07l-.77-2.87 2.87-.77M9.9 20.5l2.1-2.1 2.1 2.1M3.59 14.43l2.87.77-.77 2.87M5.69 5.93l.77 2.87-2.87.77" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">snowflake</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 10h10a2.5 2.5 0 1 0-2.5-2.5" />
      <path d="M3 14h15.5a2.5 2.5 0 1 1-2.5 2.5" />
      <path d="M3 18.5h8" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">wind</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 12a9 9 0 0 1 18 0a3 3 0 0 0-6 0a3 3 0 0 0-6 0a3 3 0 0 0-6 0z" />
      <path d="M12 9v9.5a2 2 0 0 1-4 0" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">umbrella</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M11.5 13.83V5a2 2 0 0 0-4 0v8.83a3.75 3.75 0 1 0 4 0z" />
      <path d="M15 5h3.5M15 8.5h3.5M15 12h3.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">thermometer</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M2.5 19 9.5 5.5l5 9.5 2.5-4 4.5 8z" />
      <path d="M7.2 10l2.3 1.5 2.3-1.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">mountain</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 7.15A4.6 4.6 0 1 0 4.18 11.54L12 20.15L19.82 11.54A4.6 4.6 0 1 0 12 7.15z" />
      <path d="M2.5 12.5h5l1.5-3 3 6 1.5-3h8" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">heart-pulse</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M17.48 12.88A4.5 4.5 0 0 0 11.12 6.52L6.52 11.12A4.5 4.5 0 0 0 12.88 17.48z" />
      <path d="M15.18 15.18 8.82 8.82" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">pill</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5.5 3.5H4v6a4.5 4.5 0 0 0 9 0v-6h-1.5" />
      <path d="M8.5 14v1a5 5 0 0 0 10 0v-2.5" />
      <path d="M16.5 10.5a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">stethoscope</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 7h14a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-9a2 2 0 0 1 2 -2z" />
      <path d="M9 7V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5V7" />
      <path d="M12 10.5v6M9 13.5h6" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">first-aid</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 4.5 2.5 9.5l9.5 5 9.5-5z" />
      <path d="M6.5 11.6V16c0 1.5 2.5 3 5.5 3s5.5-1.5 5.5-3v-4.4" />
      <path d="M21.5 9.5V15" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">graduation-cap</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3.5 9h13v6a5 5 0 0 1-5 5h-3a5 5 0 0 1-5-5z" />
      <path d="M16.5 11H18a2.5 2.5 0 0 1 0 5h-1.5" />
      <path d="M8 3.5V6M12 3.5V6" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">coffee</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5.5 3v5a2.5 2.5 0 0 0 5 0V3" />
      <path d="M8 10.5V21" />
      <path d="M18.5 21V3C16 4.5 15 7 15 10.5V14h3.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">utensils</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 5.5v14M3 16h18v3.5" />
      <path d="M10 16v-5.5h8.5A2.5 2.5 0 0 1 21 13v3" />
      <path d="M5 12.25a1.5 1.5 0 1 0 3 0a1.5 1.5 0 1 0 -3 0" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">bed</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6.5 6.5h1a1.5 1.5 0 0 1 1.5 1.5v8a1.5 1.5 0 0 1 -1.5 1.5h-1a1.5 1.5 0 0 1 -1.5 -1.5v-8a1.5 1.5 0 0 1 1.5 -1.5zM16.5 6.5h1a1.5 1.5 0 0 1 1.5 1.5v8a1.5 1.5 0 0 1 -1.5 1.5h-1a1.5 1.5 0 0 1 -1.5 -1.5v-8a1.5 1.5 0 0 1 1.5 -1.5z" />
      <path d="M9 12h6" />
      <path d="M2.5 10v4M21.5 10v4" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">dumbbell</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M7.5 6.5h9a4 4 0 0 1 3.9 3.2l.9 5a2.5 2.5 0 0 1-4.3 2.1L15 15H9l-2 1.8a2.5 2.5 0 0 1-4.3-2.1l.9-5A4 4 0 0 1 7.5 6.5z" />
      <path d="M7.5 9.5V13M5.75 11.25h3.5" />
      <path d="M15.5 10h.01M17.5 12.5h.01" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">gamepad</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M7 4h10a3 3 0 0 1 3 3v10a3 3 0 0 1 -3 3h-10a3 3 0 0 1 -3 -3v-10a3 3 0 0 1 3 -3z" />
      <path d="M8.5 8.5h.01M15.5 8.5h.01M12 12h.01M8.5 15.5h.01M15.5 15.5h.01" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">dice</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3.5 7.5h4.75a2.25 2.25 0 1 1 3.5 0h4.75v4.75a2.25 2.25 0 1 1 0 3.5v4.75h-13z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">puzzle</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 5.5h14A1.5 1.5 0 0 1 20.5 7v2.5a2.5 2.5 0 0 0 0 5V17a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 17v-2.5a2.5 2.5 0 0 0 0-5V7A1.5 1.5 0 0 1 5 5.5z" />
      <path d="M14.5 9v1.5M14.5 13.5V15" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">ticket</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5.5 3.5h13a2 2 0 0 1 2 2v13a2 2 0 0 1 -2 2h-13a2 2 0 0 1 -2 -2v-13a2 2 0 0 1 2 -2z" />
      <path d="M7.5 3.5v17M16.5 3.5v17" />
      <path d="M3.5 8h4M3.5 12h4M3.5 16h4M16.5 8h4M16.5 12h4M16.5 16h4" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">film</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 7h14a2 2 0 0 1 2 2v7.5a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-7.5a2 2 0 0 1 2 -2z" />
      <path d="M8.5 3.5 12 7l3.5-3.5" />
      <path d="M9 21h6" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">tv</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3.5 10.5v3A1.5 1.5 0 0 0 5 15h2.5l8.5 4.5v-15L7.5 9H5a1.5 1.5 0 0 0-1.5 1.5z" />
      <path d="M7.5 15l1.5 5" />
      <path d="M19.5 9.5a3.5 3.5 0 0 1 0 5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">megaphone</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6.5 3.5h11M6.5 20.5h11" />
      <path d="M7.5 3.5V6c0 2 1.5 3.5 4.5 6-3 2.5-4.5 4-4.5 6v2.5M16.5 3.5V6c0 2-1.5 3.5-4.5 6 3 2.5 4.5 4 4.5 6v2.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">hourglass</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4.5 13.5a7.5 7.5 0 1 0 15 0a7.5 7.5 0 1 0 -15 0" />
      <path d="M10 3h4M12 3v3" />
      <path d="M12 13.5V10" />
      <path d="M18.5 6.5 20 5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">timer</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 13a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
      <path d="M12 9.5V13l2.5 2" />
      <path d="M3.5 6l3-2.5M20.5 6l-3-2.5" />
      <path d="M7 19.5l-1.5 1.5M17 19.5l1.5 1.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">alarm</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3.5 12a8.5 8.5 0 1 0 2.49-6.01" />
      <path d="M3.5 4v3.5H7" />
      <path d="M12 7.5V12l3 2" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">history</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5.5 5h13a2 2 0 0 1 2 2v11.5a2 2 0 0 1 -2 2h-13a2 2 0 0 1 -2 -2v-11.5a2 2 0 0 1 2 -2z" />
      <path d="M3.5 10h17" />
      <path d="M8 3v4M16 3v4" />
      <path d="M9 15l2 2 4-4" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">calendar-check</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5.5 5h13a2 2 0 0 1 2 2v11.5a2 2 0 0 1 -2 2h-13a2 2 0 0 1 -2 -2v-11.5a2 2 0 0 1 2 -2z" />
      <path d="M3.5 10h17" />
      <path d="M8 3v4M16 3v4" />
      <path d="M12 13v5M9.5 15.5h5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">calendar-plus</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 12c-1.5-2-3-3.5-5-3.5a3.5 3.5 0 0 0 0 7c2 0 3.5-1.5 5-3.5s3-3.5 5-3.5a3.5 3.5 0 0 1 0 7c-2 0-3.5-1.5-5-3.5z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">infinity</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M10.25 5a1.75 1.75 0 1 0 3.5 0a1.75 1.75 0 1 0 -3.5 0" />
      <path d="M5 9l7 1.5L19 9" />
      <path d="M12 10.5V14l-3 6.5M12 14l3 6.5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">accessibility</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 5.5h8M7 3.5v2" />
      <path d="M5 5.5c.5 3 2.5 5.5 6 7M9.5 5.5c-.5 3-2.5 5.5-6 7" />
      <path d="M12.5 20.5l4-9 4 9M14 17.5h5" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">languages</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5 4.5h4v8a3 3 0 0 0 6 0v-8h4v8a7 7 0 0 1-14 0z" />
      <path d="M5 8.5h4M15 8.5h4" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">magnet</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M12 3.5v17M8 20.5h8M5.5 7h13" />
      <path d="M2.5 14.5 5.5 7l3 7.5a3 3 0 0 1-6 0z" />
      <path d="M15.5 14.5 18.5 7l3 7.5a3 3 0 0 1-6 0z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">scale</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M14.13 7.06 10.94 3.87 3.87 10.94l3.19 3.19z" />
      <path d="M10.59 10.59 18 18" />
      <path d="M12.5 20.5h8" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">gavel</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M13.1 5.16l5.54 9.6M15.5 13.92l3.14.84.85-3.14M18.24 17.88H7.16M9.46 15.58l-2.3 2.3 2.3 2.3M4.66 15.97l5.54-9.6M11.04 9.51l-.84-3.14-3.14.84" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">recycle</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
      <path d="M8 12a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
      <path d="M5.64 5.64l3.53 3.53M14.83 9.17l3.53-3.53M14.83 14.83l3.53 3.53M9.17 14.83l-3.53 3.53" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">life-buoy</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M19.5 4.5l-7 7" />
      <path d="M10.5 11l2.5 2.5" />
      <path d="M10 13c-2.5 0-3.5 1.5-3.5 3.5 0 1.5-1 2.5-3 3.5 4 1 7.5 0 8.5-2.5.8-2-.5-3.5-2-4.5z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">brush</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 7.5h16a1.5 1.5 0 0 1 1.5 1.5v6a1.5 1.5 0 0 1 -1.5 1.5h-16a1.5 1.5 0 0 1 -1.5 -1.5v-6a1.5 1.5 0 0 1 1.5 -1.5z" />
      <path d="M6.75 7.5V11M10.25 7.5v2M13.75 7.5V11M17.25 7.5v2" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">ruler</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M19.17 7.31 16.77 9.71 14.29 7.23 16.69 4.83A4.5 4.5 0 0 0 10.83 10.69L4.92 16.6A1.75 1.75 0 0 0 7.4 19.08l5.91-5.91a4.5 4.5 0 0 0 5.86-5.86z" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">wrench</span>
  </li>
  <li style="display:grid;justify-items:center;gap:8px;padding:12px 4px 10px;color:var(--eq-ink)">
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M8.31 4.64c2.47-.36 4.6.35 6.36 2.12l5.31 5.3a1 1 0 0 1 0 1.42l-2.13 2.12a1 1 0 0 1-1.41 0l-5.3-5.31C9.37 8.53 8.31 6.76 8.31 4.64z" />
      <path d="M11.14 10.29l-6.72 6.72a1.5 1.5 0 0 0 2.12 2.12l6.72-6.71" />
    </svg>
    <span style="font-size:var(--eq-text-xs);color:var(--eq-ink-2)">hammer</span>
  </li>
</ul>

With text and in a button

With no size the icon is 1.25em in the colour of its text, so it follows whatever it sits in.

Synced 4 minutes ago

Card declined

Code
import { Button } from "@/components/equip/button";
import { Icon } from "@/components/equip/icon";

export default function Example() {
  return (
    <div style={{ display: "grid", gap: 14, justifyItems: "start" }}>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
        <Button lead={<Icon name="download" />}>Export CSV</Button>
        <Button variant="outline" lead={<Icon name="link" />}>Copy link</Button>
        <Button variant="ghost" size="s" lead={<Icon name="refresh" />}>Retry</Button>
      </div>
      <p style={{ margin: 0, fontSize: "var(--eq-text-s)", color: "var(--eq-ink-2)" }}>
        <Icon name="clock" /> Synced 4 minutes ago
      </p>
      <p style={{ margin: 0, fontSize: "var(--eq-text-l)", color: "var(--eq-danger)" }}>
        <Icon name="error" /> Card declined
      </p>
    </div>
  );
}
HTMLworks in any framework, with the part's CSS
<div style="display:grid;gap:14px;justify-items:start">
  <div style="display:flex;flex-wrap:wrap;gap:8px">
    <button type="button" class="eq-button" data-variant="solid" data-size="m">
      <svg aria-hidden="true" focusable="false" class="eq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
        <path d="M12 3.5v11" />
        <path d="M7.5 10.5 12 15l4.5-4.5" />
        <path d="M4 15.5v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3" />
      </svg>
      <span class="eq-button-label">Export CSV</span>
    </button>
    <button type="button" class="eq-button" data-variant="outline" data-size="m">
      <svg aria-hidden="true" focusable="false" class="eq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
        <path d="M9.5 16.5h-2a4.5 4.5 0 0 1 0-9h2" />
        <path d="M14.5 7.5h2a4.5 4.5 0 0 1 0 9h-2" />
        <path d="M8.5 12h7" />
      </svg>
      <span class="eq-button-label">Copy link</span>
    </button>
    <button type="button" class="eq-button" data-variant="ghost" data-size="s">
      <svg aria-hidden="true" focusable="false" class="eq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
        <path d="M19 14.63A7.25 7.25 0 1 1 15.63 6.47" />
        <path d="M14.78 3.33L15.63 6.47L12.49 7.31" />
      </svg>
      <span class="eq-button-label">Retry</span>
    </button>
  </div>
  <p style="margin:0;font-size:var(--eq-text-s);color:var(--eq-ink-2)"><svg aria-hidden="true" focusable="false" class="eq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M12 7v5l3.5 2.5" /></svg> Synced 4 minutes ago</p>
  <p style="margin:0;font-size:var(--eq-text-l);color:var(--eq-danger)"><svg aria-hidden="true" focusable="false" class="eq-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M20.68 15.6L15.6 20.68L8.4 20.68L3.32 15.6L3.32 8.4L8.4 3.32L15.6 3.32L20.68 8.4z" /><path d="M9.25 9.25l5.5 5.5M14.75 9.25l-5.5 5.5" /></svg> Card declined</p>
</div>

Lighter or bolder

Set --eq-icon-stroke once, on the root or any container, and every icon inside follows. The default is 1.75.

1.25
1.75
2.25
Code
import type { CSSProperties } from "react";
import { Icon, type IconName } from "@/components/equip/icon";

const shown: IconName[] = ["home", "folder", "image", "send", "bookmark", "eye"];
const weights = [1.25, 1.75, 2.25];

export default function Example() {
  return (
    <div style={{ display: "grid", gap: 12 }}>
      {weights.map((w) => (
        <div
          key={w}
          style={{ "--eq-icon-stroke": w, display: "flex", flexWrap: "wrap", alignItems: "center", gap: 12 } as CSSProperties}
        >
          <span style={{ width: 36, fontSize: "var(--eq-text-xs)", color: "var(--eq-ink-2)" }}>{w}</span>
          {shown.map((name) => (
            <Icon key={name} name={name} size="l" />
          ))}
        </div>
      ))}
    </div>
  );
}
HTMLworks in any framework, with the part's CSS
<div style="display:grid;gap:12px">
  <div style="--eq-icon-stroke:1.25;display:flex;flex-wrap:wrap;align-items:center;gap:12px">
    <span style="width:36px;font-size:var(--eq-text-xs);color:var(--eq-ink-2)">1.25</span>
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3.5 11 12 4l8.5 7" />
      <path d="M5.5 9.5V20h13V9.5" />
      <path d="M10 20v-5.5h4V20" />
    </svg>
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3.5 18V6.5a2 2 0 0 1 2-2h4l2 2.5h7a2 2 0 0 1 2 2V18a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z" />
    </svg>
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5.5 4.5h13a2 2 0 0 1 2 2v11a2 2 0 0 1 -2 2h-13a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2z" />
      <path d="M13.75 8.75a1.75 1.75 0 1 0 3.5 0a1.75 1.75 0 1 0 -3.5 0" />
      <path d="M4 17l4.5-4.5 6.5 6.5M13.5 16.5l2.5-2.5 4 4" />
    </svg>
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M20.5 3.5 3.5 10.5l7 3 3 7z" />
      <path d="M20.5 3.5l-10 10" />
    </svg>
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 20.5V5.5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v15l-6-4.25z" />
    </svg>
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M2.5 12a11 11 0 0 1 19 0a11 11 0 0 1-19 0z" />
      <path d="M9 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
    </svg>
  </div>
  <div style="--eq-icon-stroke:1.75;display:flex;flex-wrap:wrap;align-items:center;gap:12px">
    <span style="width:36px;font-size:var(--eq-text-xs);color:var(--eq-ink-2)">1.75</span>
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3.5 11 12 4l8.5 7" />
      <path d="M5.5 9.5V20h13V9.5" />
      <path d="M10 20v-5.5h4V20" />
    </svg>
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3.5 18V6.5a2 2 0 0 1 2-2h4l2 2.5h7a2 2 0 0 1 2 2V18a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z" />
    </svg>
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5.5 4.5h13a2 2 0 0 1 2 2v11a2 2 0 0 1 -2 2h-13a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2z" />
      <path d="M13.75 8.75a1.75 1.75 0 1 0 3.5 0a1.75 1.75 0 1 0 -3.5 0" />
      <path d="M4 17l4.5-4.5 6.5 6.5M13.5 16.5l2.5-2.5 4 4" />
    </svg>
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M20.5 3.5 3.5 10.5l7 3 3 7z" />
      <path d="M20.5 3.5l-10 10" />
    </svg>
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 20.5V5.5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v15l-6-4.25z" />
    </svg>
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M2.5 12a11 11 0 0 1 19 0a11 11 0 0 1-19 0z" />
      <path d="M9 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
    </svg>
  </div>
  <div style="--eq-icon-stroke:2.25;display:flex;flex-wrap:wrap;align-items:center;gap:12px">
    <span style="width:36px;font-size:var(--eq-text-xs);color:var(--eq-ink-2)">2.25</span>
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3.5 11 12 4l8.5 7" />
      <path d="M5.5 9.5V20h13V9.5" />
      <path d="M10 20v-5.5h4V20" />
    </svg>
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3.5 18V6.5a2 2 0 0 1 2-2h4l2 2.5h7a2 2 0 0 1 2 2V18a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z" />
    </svg>
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M5.5 4.5h13a2 2 0 0 1 2 2v11a2 2 0 0 1 -2 2h-13a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2z" />
      <path d="M13.75 8.75a1.75 1.75 0 1 0 3.5 0a1.75 1.75 0 1 0 -3.5 0" />
      <path d="M4 17l4.5-4.5 6.5 6.5M13.5 16.5l2.5-2.5 4 4" />
    </svg>
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M20.5 3.5 3.5 10.5l7 3 3 7z" />
      <path d="M20.5 3.5l-10 10" />
    </svg>
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6 20.5V5.5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v15l-6-4.25z" />
    </svg>
    <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M2.5 12a11 11 0 0 1 19 0a11 11 0 0 1-19 0z" />
      <path d="M9 12a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
    </svg>
  </div>
</div>

An icon that carries meaning

When the icon is the only thing that says it, give it a label: it becomes role="img" and is read out.

  • billing-service
  • design-tokens
  • infra-terraform
Code
import { Icon } from "@/components/equip/icon";

const repos = [
  { name: "billing-service", private: true },
  { name: "design-tokens", private: false },
  { name: "infra-terraform", private: true },
];

export default function Example() {
  return (
    <ul style={{ display: "grid", gap: 4, width: 240, margin: 0, padding: 0, listStyle: "none", fontSize: "var(--eq-text-s)" }}>
      {repos.map((r) => (
        <li key={r.name} style={{ display: "flex", alignItems: "center", gap: 8, height: 28 }}>
          <span>{r.name}</span>
          {r.private && <Icon name="lock" size="s" label="Private" style={{ marginInlineStart: "auto", color: "var(--eq-ink-2)" }} />}
        </li>
      ))}
    </ul>
  );
}
HTMLworks in any framework, with the part's CSS
<ul style="display:grid;gap:4px;width:240px;margin:0;padding:0;list-style:none;font-size:var(--eq-text-s)">
  <li style="display:flex;align-items:center;gap:8px;height:28px">
    <span>billing-service</span>
    <svg role="img" aria-label="Private" focusable="false" class="eq-icon" data-size="s" style="margin-inline-start:auto;color:var(--eq-ink-2)" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6.5 10.5h11a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-11a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2z" />
      <path d="M8 10.5V8a4 4 0 0 1 8 0v2.5" />
      <path d="M12 14.5v2" />
    </svg>
  </li>
  <li style="display:flex;align-items:center;gap:8px;height:28px">
    <span>design-tokens</span>
  </li>
  <li style="display:flex;align-items:center;gap:8px;height:28px">
    <span>infra-terraform</span>
    <svg role="img" aria-label="Private" focusable="false" class="eq-icon" data-size="s" style="margin-inline-start:auto;color:var(--eq-ink-2)" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
      <path d="M6.5 10.5h11a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-11a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2z" />
      <path d="M8 10.5V8a4 4 0 0 1 8 0v2.5" />
      <path d="M12 14.5v2" />
    </svg>
  </li>
</ul>

Filled and large

filled turns a closed shape solid for an on state, soft gives it a wash; a number size draws any pixel size.

Code
import { Icon } from "@/components/equip/icon";

export default function Example() {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 16, alignItems: "center" }}>
      <Icon name="heart" size="l" filled={false} />
      <Icon name="heart" size="l" filled />
      <Icon name="star" size="l" filled="soft" />
      <Icon name="bookmark" size="l" filled />
      <Icon name="star" size={64} filled="soft" />
    </div>
  );
}
HTMLworks in any framework, with the part's CSS
<div style="display:flex;flex-wrap:wrap;gap:16px;align-items:center">
  <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" data-filled="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
    <path d="M12 7.15A4.6 4.6 0 1 0 4.18 11.54L12 20.15L19.82 11.54A4.6 4.6 0 1 0 12 7.15z" />
  </svg>
  <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" data-filled="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
    <path d="M12 7.15A4.6 4.6 0 1 0 4.18 11.54L12 20.15L19.82 11.54A4.6 4.6 0 1 0 12 7.15z" />
  </svg>
  <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" data-filled="soft" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
    <path d="M12 3.3L14.41 9.58L21.13 9.93L15.9 14.17L17.64 20.67L12 17L6.36 20.67L8.1 14.17L2.87 9.93L9.59 9.58z" />
  </svg>
  <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="l" data-filled="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
    <path d="M6 20.5V5.5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v15l-6-4.25z" />
  </svg>
  <svg aria-hidden="true" focusable="false" class="eq-icon" data-size="64" data-filled="soft" style="--_size:64px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
    <path d="M12 3.3L14.41 9.58L21.13 9.93L15.9 14.17L17.64 20.67L12 17L6.36 20.67L8.1 14.17L2.87 9.93L9.59 9.58z" />
  </svg>
</div>

Props

PropTypeDefaultWhat it does
nameIconNamenoneWhich icon to draw. The file also exports iconNames, the full list.
size"s" | "m" | "l" | numbernone16, 20 or 24px, or any number of pixels, large ones included. Left out, the icon is 1.25em and follows its text.
labelstringnoneNames the icon for screen readers. Without it the icon is decorative and hidden from them.
filledboolean | "soft"noneFills the shape with its own colour: true is solid, soft a light wash. Pass false rather than leaving it out when it toggles, so the fill fades.
...restComponentProps<"svg">noneEvery native svg attribute, including style, id and className.

Anatomy

root.eq-iconThe svg, a 24 unit grid with one path per stroke group.

Notes

  • Decorative by default: the svg has aria-hidden="true" and focusable="false", so a button or link must say what it does in its own text or aria-label.
  • With label the svg becomes role="img" with that aria-label; use it only when the icon is the only thing carrying the meaning.
  • Colour comes from currentColor, so an icon matches the text beside it and needs no tone prop.
  • Stroke width is read from --eq-icon-stroke in grid units, 1.75 by default; set it once to make every icon lighter or bolder.
  • Filled suits closed shapes such as heart, star and bookmark; on an open shape like an arrow it fills the gaps between strokes.
  • The stroke scales with the icon, the way a font's weight does, so small and large icons keep the same proportions.
  • A server component with no client JavaScript; the path data lives in the part file, so there is nothing to fetch.

Source

Two files, and they are the whole part. Open either to read it, copy it straight from its bar, or add the part to your loadout and install it with everything else you picked.

components/equip/icon.tsx367 lines
import type { ComponentProps, CSSProperties } from "react";
import "./icon.css";

/* Every icon is drawn on a 24 by 24 grid with 2px of room on each side, as strokes
   only, so one stroke width, colour and cap style apply to the whole set. Circles
   and rounded boxes are written with the two helpers below to keep the shapes on
   the same keylines: a 9 radius circle, a 16 square, an 18 by 14 box. */

/** A circle as a path: two half arcs. */
const o = (cx: number, cy: number, r: number) => `M${cx - r} ${cy}a${r} ${r} 0 1 0 ${r * 2} 0a${r} ${r} 0 1 0 ${-r * 2} 0`;

/** A rounded rectangle as a path, starting at the top edge. */
const box = (x: number, y: number, w: number, h: number, r: number) =>
  `M${x + r} ${y}h${w - 2 * r}a${r} ${r} 0 0 1 ${r} ${r}v${h - 2 * r}a${r} ${r} 0 0 1 ${-r} ${r}h${2 * r - w}a${r} ${r} 0 0 1 ${-r} ${-r}v${2 * r - h}a${r} ${r} 0 0 1 ${r} ${-r}z`;

const tray = "M4 15.5v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3";
const lens = "M2.5 12a11 11 0 0 1 19 0a11 11 0 0 1-19 0z";

const icons = {
  "arrow-up": ["M12 19.5v-15", "M6 10.5l6-6 6 6"],
  "arrow-down": ["M12 4.5v15", "M6 13.5l6 6 6-6"],
  "arrow-left": ["M19.5 12h-15", "M10.5 6l-6 6 6 6"],
  "arrow-right": ["M4.5 12h15", "M13.5 6l6 6-6 6"],
  "chevron-up": ["M5.5 15 12 8.5l6.5 6.5"],
  "chevron-down": ["M5.5 9 12 15.5 18.5 9"],
  "chevron-left": ["M15 5.5 8.5 12l6.5 6.5"],
  "chevron-right": ["M9 5.5 15.5 12 9 18.5"],
  check: ["M4.5 12.5l5 5 10-11"],
  close: ["M6 6l12 12M18 6 6 18"],
  plus: ["M12 4.5v15M4.5 12h15"],
  minus: ["M4.5 12h15"],
  search: [o(10.5, 10.5, 6.5), "M15.5 15.5l4.5 4.5"],
  menu: ["M4 6.5h16M4 12h16M4 17.5h16"],
  more: [o(5, 12, 1) + o(12, 12, 1) + o(19, 12, 1)],
  settings: [
    "M18.44 10.57L20.9 10.67A9 9 0 0 1 20.9 13.33L18.44 13.43A6.6 6.6 0 0 1 17.57 15.55L19.23 17.35A9 9 0 0 1 17.35 19.23L15.55 17.57A6.6 6.6 0 0 1 13.43 18.44L13.33 20.9A9 9 0 0 1 10.67 20.9L10.57 18.44A6.6 6.6 0 0 1 8.45 17.57L6.65 19.23A9 9 0 0 1 4.77 17.35L6.43 15.55A6.6 6.6 0 0 1 5.56 13.43L3.1 13.33A9 9 0 0 1 3.1 10.67L5.56 10.57A6.6 6.6 0 0 1 6.43 8.45L4.77 6.65A9 9 0 0 1 6.65 4.77L8.45 6.43A6.6 6.6 0 0 1 10.57 5.56L10.67 3.1A9 9 0 0 1 13.33 3.1L13.43 5.56A6.6 6.6 0 0 1 15.55 6.43L17.35 4.77A9 9 0 0 1 19.23 6.65L17.57 8.45A6.6 6.6 0 0 1 18.44 10.57z",
    o(12, 12, 2.75),
  ],
  user: [o(12, 7.25, 3.25), "M4.5 20.5V20a6 6 0 0 1 6-6h3a6 6 0 0 1 6 6v.5"],
  users: [
    o(9, 8, 3),
    "M3 20v-.5a5 5 0 0 1 5-5h2a5 5 0 0 1 5 5v.5",
    "M15.5 5.2a3 3 0 0 1 0 5.6M17.5 14.6a5 5 0 0 1 3.5 4.9v.5",
  ],
  home: ["M3.5 11 12 4l8.5 7", "M5.5 9.5V20h13V9.5", "M10 20v-5.5h4V20"],
  bell: ["M6 17v-6a6 6 0 0 1 12 0v6", "M4 17h16", "M10 20.5h4M12 3v2"],
  mail: [box(3, 5, 18, 14, 2), "M4 7l8 5.5L20 7"],
  calendar: [box(3.5, 5, 17, 15.5, 2), "M3.5 10h17", "M8 3v4M16 3v4"],
  clock: [o(12, 12, 9), "M12 7v5l3.5 2.5"],
  star: ["M12 3.3L14.41 9.58L21.13 9.93L15.9 14.17L17.64 20.67L12 17L6.36 20.67L8.1 14.17L2.87 9.93L9.59 9.58z"],
  heart: ["M12 7.15A4.6 4.6 0 1 0 4.18 11.54L12 20.15L19.82 11.54A4.6 4.6 0 1 0 12 7.15z"],
  bookmark: ["M6 20.5V5.5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v15l-6-4.25z"],
  trash: [
    "M4 6.5h16M9.5 6.5v-2a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v2",
    "M6 6.5l.9 12.6a1.5 1.5 0 0 0 1.5 1.4h7.2a1.5 1.5 0 0 0 1.5-1.4L18 6.5",
    "M10 10.5v6M14 10.5v6",
  ],
  edit: ["M15 4.5l4.5 4.5L9 19.5H4.5V15z", "M12.5 7l4.5 4.5"],
  copy: [box(8.5, 8.5, 12, 12, 2), "M15.5 8.5v-3a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h3"],
  download: ["M12 3.5v11", "M7.5 10.5 12 15l4.5-4.5", tray],
  upload: ["M12 15V4", "M7.5 8.5 12 4l4.5 4.5", tray],
  link: ["M9.5 16.5h-2a4.5 4.5 0 0 1 0-9h2", "M14.5 7.5h2a4.5 4.5 0 0 1 0 9h-2", "M8.5 12h7"],
  external: ["M19.5 13.5v5a2 2 0 0 1-2 2h-12a2 2 0 0 1-2-2v-12a2 2 0 0 1 2-2h5", "M14.5 3.5h6v6", "M20.5 3.5l-9 9"],
  eye: [lens, o(12, 12, 3)],
  "eye-off": [lens, o(12, 12, 3), "M4 4l16 16"],
  lock: [box(4.5, 10.5, 15, 10, 2), "M8 10.5V8a4 4 0 0 1 8 0v2.5", "M12 14.5v2"],
  filter: ["M4 6.5h16M7 12h10M10 17.5h4"],
  sort: ["M8 4v16M4.5 7.5 8 4l3.5 3.5", "M16 20V4M12.5 16.5 16 20l3.5-3.5"],
  refresh: ["M19 14.63A7.25 7.25 0 1 1 15.63 6.47", "M14.78 3.33L15.63 6.47L12.49 7.31"],
  info: [o(12, 12, 9), "M12 11.25v5.25", "M12 7.5v.01"],
  warning: ["M12 4 21 19.5H3z", "M12 9.5v3.5M12 16.75v.01"],
  error: ["M20.68 15.6L15.6 20.68L8.4 20.68L3.32 15.6L3.32 8.4L8.4 3.32L15.6 3.32L20.68 8.4z", "M9.25 9.25l5.5 5.5M14.75 9.25l-5.5 5.5"],
  help: [o(12, 12, 9), "M9.5 9.5a2.5 2.5 0 1 1 3.75 2.17c-.8.46-1.25.98-1.25 1.83", "M12 17.25v.01"],
  sun: [
    o(12, 12, 3.5),
    "M19 12h2.25M16.95 16.95l1.59 1.59M12 19v2.25M7.05 16.95l-1.59 1.59M5 12H2.75M7.05 7.05 5.46 5.46M12 5V2.75M16.95 7.05l1.59-1.59",
  ],
  moon: ["M20.75 12.17A8.5 8.5 0 1 1 11.31 3.55A6.75 6.75 0 0 0 20.75 12.17z"],
  folder: ["M3.5 18V6.5a2 2 0 0 1 2-2h4l2 2.5h7a2 2 0 0 1 2 2V18a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z"],
  file: ["M14 3.5H7.5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8z", "M14 3.5V8h4.5"],
  image: [box(3.5, 4.5, 17, 15, 2), o(15.5, 8.75, 1.75), "M4 17l4.5-4.5 6.5 6.5M13.5 16.5l2.5-2.5 4 4"],
  play: ["M7.5 4.5v15l12-7.5z"],
  pause: ["M8.5 5v14M15.5 5v14"],
  send: ["M20.5 3.5 3.5 10.5l7 3 3 7z", "M20.5 3.5l-10 10"],
  sparkle: ["M12 3Q13.4 10.6 21 12Q13.4 13.4 12 21Q10.6 13.4 3 12Q10.6 10.6 12 3z"],

  // Interface, navigation, editing and security
  "arrow-up-right": ["M6 18 18 6", "M9 6h9v9"],
  "arrow-up-left": ["M18 18 6 6", "M15 6H6v9"],
  "arrow-down-right": ["M6 6l12 12", "M18 9v9H9"],
  "arrow-down-left": ["M18 6 6 18", "M6 9v9h9"],
  "chevrons-left": ["M11.5 6.5 6 12l5.5 5.5", "M18 6.5 12.5 12l5.5 5.5"],
  "chevrons-right": ["M6 6.5l5.5 5.5L6 17.5", "M12.5 6.5 18 12l-5.5 5.5"],
  "chevrons-up": ["M6.5 11.5 12 6l5.5 5.5", "M6.5 18 12 12.5l5.5 5.5"],
  "chevrons-down": ["M6.5 6 12 11.5 17.5 6", "M6.5 12.5 12 18l5.5-5.5"],
  "caret-up": ["M6 15.25h12L12 8.75z"],
  "caret-down": ["M6 8.75h12L12 15.25z"],
  "caret-left": ["M15.25 6v12L8.75 12z"],
  "caret-right": ["M8.75 6v12l6.5-6z"],
  undo: ["M9 14 4.5 9.5 9 5", "M4.5 9.5h10a5 5 0 0 1 0 10H11"],
  redo: ["M15 14l4.5-4.5L15 5", "M19.5 9.5h-10a5 5 0 0 0 0 10H13"],
  expand: ["M14.5 3.5h6v6M20.5 3.5l-6 6", "M9.5 20.5h-6v-6M3.5 20.5l6-6"],
  collapse: ["M14 4v6h6M14 10l6.5-6.5", "M10 20v-6H4M10 14l-6.5 6.5"],
  maximize: ["M4 9V6a2 2 0 0 1 2-2h3", "M15 4h3a2 2 0 0 1 2 2v3", "M20 15v3a2 2 0 0 1-2 2h-3", "M9 20H6a2 2 0 0 1-2-2v-3"],
  minimize: ["M9 4v3a2 2 0 0 1-2 2H4", "M20 9h-3a2 2 0 0 1-2-2V4", "M15 20v-3a2 2 0 0 1 2-2h3", "M4 15h3a2 2 0 0 1 2 2v3"],
  move: ["M12 3v18M3 12h18", "M9 6l3-3 3 3M9 18l3 3 3-3", "M6 9l-3 3 3 3M18 9l3 3-3 3"],
  grip: [o(9, 6, 1) + o(9, 12, 1) + o(9, 18, 1) + o(15, 6, 1) + o(15, 12, 1) + o(15, 18, 1)],
  grid: [box(3.5, 3.5, 6.5, 6.5, 1.5) + box(14, 3.5, 6.5, 6.5, 1.5), box(3.5, 14, 6.5, 6.5, 1.5) + box(14, 14, 6.5, 6.5, 1.5)],
  list: ["M8.5 6.5h11.5M8.5 12h11.5M8.5 17.5h11.5", "M4 6.5h.01M4 12h.01M4 17.5h.01"],
  columns: [box(4, 4, 16, 16, 2), "M12 4v16"],
  rows: [box(4, 4, 16, 16, 2), "M4 12h16"],
  layout: [box(4, 4, 16, 16, 2), "M4 9.5h16", "M9.5 9.5V20"],
  sidebar: [box(3, 5, 18, 14, 2), "M9 5v14"],
  "panel-right": [box(3, 5, 18, 14, 2), "M15 5v14"],
  sliders: ["M4 6h9M17 6h3M4 12h3M11 12h9M4 18h8M16 18h4", o(15, 6, 2) + o(9, 12, 2) + o(14, 18, 2)],
  "check-circle": [o(12, 12, 9), "M8 12.5l2.75 2.75L16 9.5"],
  "close-circle": [o(12, 12, 9), "M9.25 9.25l5.5 5.5M14.75 9.25l-5.5 5.5"],
  "plus-circle": [o(12, 12, 9), "M12 8v8M8 12h8"],
  "minus-circle": [o(12, 12, 9), "M8 12h8"],
  "check-square": [box(4, 4, 16, 16, 2.5), "M8 12.5l2.75 2.75L16 9.5"],
  square: [box(4, 4, 16, 16, 2.5)],
  circle: [o(12, 12, 9)],
  "more-vertical": [o(12, 5, 1) + o(12, 12, 1) + o(12, 19, 1)],
  "log-in": ["M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4", "M3.5 12h11", "M10.5 8l4 4-4 4"],
  "log-out": ["M10 4H6a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h4", "M9.5 12h11", "M16.5 8l4 4-4 4"],
  "zoom-in": [o(10.5, 10.5, 6.5), "M15.5 15.5l4.5 4.5", "M10.5 8v5M8 10.5h5"],
  "zoom-out": [o(10.5, 10.5, 6.5), "M15.5 15.5l4.5 4.5", "M8 10.5h5"],
  pin: ["M9 3.5h6M10 3.5V9l-3 3.5h10L14 9V3.5", "M12 12.5v8"],
  tag: ["M4 4h7.5l8.5 8.5-7.5 7.5L4 11.5z", o(9, 9, 1.5)],
  hash: ["M10 4 8 20M16 4l-2 16", "M5 9h15M4 15h15"],
  at: [o(12, 12, 3.5), "M15.5 8v4.5a2.5 2.5 0 0 0 5 0V12a8.5 8.5 0 1 0-3.5 6.87"],
  key: [o(8, 16, 4), "M10.83 13.17l8.67-8.67", "M17 7l2.5 2.5M14 10l2 2"],
  shield: ["M12 3.5l7.5 3V12c0 4.5-3.2 7.6-7.5 9-4.3-1.4-7.5-4.5-7.5-9V6.5z"],
  "shield-check": ["M12 3.5l7.5 3V12c0 4.5-3.2 7.6-7.5 9-4.3-1.4-7.5-4.5-7.5-9V6.5z", "M8.75 12l2.25 2.25 4.25-4.5"],
  "lock-open": [box(4.5, 10.5, 15, 10, 2), "M8 10.5V8a4 4 0 0 1 7.75-1.4", "M12 14.5v2"],
  power: ["M12 3.5v8", "M6.86 6.37A8 8 0 1 0 17.14 6.37"],
  bolt: ["M13 3 5 13.5h6.5L11 21l8-10.5h-6.5z"],
  flag: ["M6 20.5v-17", "M6 4h12.5L16 8.5l2.5 4.5H6"],
  archive: [box(3, 4, 18, 4.5, 1), "M5 8.5V18a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8.5", "M10 12.5h4"],
  inbox: [box(3.5, 4.5, 17, 15, 2), "M3.5 13h4.5l1.5 2.5h5l1.5-2.5h4.5"],
  save: ["M3.5 5.5a2 2 0 0 1 2-2h10l5 5v10a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z", "M7.5 20.5v-6h9v6", "M8 3.5v4h6v-4"],
  print: ["M7 8V3.5h10V8", "M7 17H5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2", "M7 13.5h10v7H7z"],
  share: [o(17, 5.5, 2.5) + o(7, 12, 2.5) + o(17, 18.5, 2.5), "M9.1 10.64l5.8-3.78M9.1 13.36l5.8 3.78"],
  paperclip: ["M17.25 8v7.25a5.25 5.25 0 0 1-10.5 0V7a3.5 3.5 0 0 1 7 0v8a1.75 1.75 0 0 1-3.5 0V8.5"],
  scissors: [o(7, 17.5, 2.75) + o(17, 17.5, 2.75), "M8.58 15.25 17 4M15.42 15.25 7 4"],
  clipboard: ["M9 4.5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2h-2", box(9, 3, 6, 3.5, 1)],
  "clipboard-check": ["M9 4.5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-12a2 2 0 0 0-2-2h-2", box(9, 3, 6, 3.5, 1), "M9 13.5l2 2 4-4.5"],
  bold: ["M6.5 4h6a4 4 0 0 1 0 8h-6z", "M6.5 12h7a4 4 0 0 1 0 8h-7z"],
  italic: ["M10 4h8M6 20h8", "M14 4l-4 16"],
  underline: ["M7 4v6.5a5 5 0 0 0 10 0V4", "M5.5 20.5h13"],
  strikethrough: ["M16 7c-.5-1.8-2-3-4-3-2.3 0-4 1.4-4 3.5 0 2.3 2 3.5 4 4.5s4 2.2 4 4.5c0 2.1-1.7 3.5-4 3.5-2 0-3.5-1.2-4-3", "M4.5 12h15"],
  "align-left": ["M4 5.25h16M4 14.25h16", "M4 9.75h10M4 18.75h10"],
  "align-center": ["M4 5.25h16M4 14.25h16", "M7 9.75h10M7 18.75h10"],
  "align-right": ["M4 5.25h16M4 14.25h16", "M10 9.75h10M10 18.75h10"],
  "list-ordered": ["M11 7h9M11 16.75h9", "M4 5.5l1.75-1.25V9.5", "M4 15.25a1.75 1.75 0 1 1 3 1.25L4 19.5h3.5"],
  "list-checks": ["M4 7.5l2 2 3.5-4M4 16.5l2 2 3.5-4", "M13 7.5h7M13 16.5h7"],
  quote: ["M10 11H6.5a1 1 0 0 1-1-1V7.5a1 1 0 0 1 1-1H9a1 1 0 0 1 1 1V12c0 3-1.5 5-4.5 6", "M18.5 11H15a1 1 0 0 1-1-1V7.5a1 1 0 0 1 1-1h2.5a1 1 0 0 1 1 1V12c0 3-1.5 5-4.5 6"],
  code: ["M8.5 7 3.5 12l5 5", "M15.5 7l5 5-5 5", "M13.5 5l-3 14"],
  terminal: [box(3, 4.5, 18, 15, 2), "M7 9.5l3 2.5-3 2.5", "M12.5 15h4.5"],
  type: ["M5 7V4.5h14V7", "M12 4.5v15", "M9.5 19.5h5"],
  palette: ["M12 3a9 9 0 0 0 0 18c1.5 0 2-1 2-2v-.5a2 2 0 0 1 2-2h1.5a3.5 3.5 0 0 0 3.5-3.5C21 7 17 3 12 3z", "M7.5 12h.01M9 8h.01M13.5 7h.01M16.5 10h.01"],
  pen: ["M4 20l2-9 4-4 7 7-4 4z", o(10, 14, 1.5), "M4 20l4.94-4.94", "M12.5 4.5l7 7"],
  crop: ["M7 3v12a2 2 0 0 0 2 2h12", "M3 7h12a2 2 0 0 1 2 2v12"],
  layers: ["M12 3.5 21 8l-9 4.5L3 8z", "M3 12l9 4.5 9-4.5", "M3 16l9 4.5 9-4.5"],
  command: ["M9 9V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3z"],

  // Communication, media, devices, files, developer and data
  message: ["M6 4h12a2.5 2.5 0 0 1 2.5 2.5v8A2.5 2.5 0 0 1 18 17h-7l-4.5 3.5V17H6a2.5 2.5 0 0 1-2.5-2.5v-8A2.5 2.5 0 0 1 6 4z"],
  messages: ["M10 9h9a2 2 0 0 1 2 2v5.5a2 2 0 0 1-2 2h-.5V21L15 18.5h-5a2 2 0 0 1-2-2V11a2 2 0 0 1 2-2z", "M15.5 5.5V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2v2.5L8 13"],
  phone: ["M5 3.5h3.5l1.5 4.5-2.25 1.5a11 11 0 0 0 6.75 6.75L16 14l4.5 1.5V19a1.5 1.5 0 0 1-1.5 1.5A16 16 0 0 1 3.5 5 1.5 1.5 0 0 1 5 3.5z"],
  video: [box(3, 6, 12.5, 12, 2), "M15.5 10.5l5.5-3v9l-5.5-3"],
  camera: ["M3 8.5a2 2 0 0 1 2-2h2.5L9 4h6l1.5 2.5H19a2 2 0 0 1 2 2V18a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z", o(12, 13.25, 3.25)],
  mic: [box(9, 3, 6, 11, 3), "M5.5 11a6.5 6.5 0 0 0 13 0", "M12 17.5v3.5"],
  "mic-off": [box(9, 3, 6, 11, 3), "M5.5 11a6.5 6.5 0 0 0 13 0", "M12 17.5v3.5", "M4 4l16 16"],
  volume: ["M4 9.5h3l4.5-4v13l-4.5-4H4z", "M15 9a4 4 0 0 1 0 6M17.5 6.5a7.5 7.5 0 0 1 0 11"],
  "volume-off": ["M4 9.5h3l4.5-4v13l-4.5-4H4z", "M15.5 9.5l5 5M20.5 9.5l-5 5"],
  music: ["M9 17.5V5.5l11-2v12", o(6.5, 17.5, 2.5), o(17.5, 15.5, 2.5)],
  headphones: ["M4 16v-4a8 8 0 0 1 16 0v4", box(4, 13.5, 4, 6.5, 1.5), box(16, 13.5, 4, 6.5, 1.5)],
  "skip-forward": ["M5.5 5.5v13L15 12z", "M18.75 5.5v13"],
  "skip-back": ["M18.5 5.5v13L9 12z", "M5.25 5.5v13"],
  stop: [box(5.5, 5.5, 13, 13, 2)],
  record: [o(12, 12, 9), o(12, 12, 4)],
  repeat: ["M4 11.5v-2a3 3 0 0 1 3-3h13M17 3.5l3 3-3 3", "M20 12.5v2a3 3 0 0 1-3 3H4M7 14.5l-3 3 3 3"],
  shuffle: ["M4 7h3.5c4.5 0 4.5 10 9 10H20M4 17h3.5c4.5 0 4.5-10 9-10H20", "M17.5 4.5 20 7l-2.5 2.5M17.5 14.5 20 17l-2.5 2.5"],
  rss: [o(5.5, 18.5, 1), "M4.5 11.5a8 8 0 0 1 8 8", "M4.5 4.5a15 15 0 0 1 15 15"],
  wifi: ["M2.81 9.06a13 13 0 0 1 18.38 0M5.64 11.89a9 9 0 0 1 12.73 0M8.46 14.71a5 5 0 0 1 7.07 0", o(12, 18.25, 1)],
  "wifi-off": ["M2.81 9.06a13 13 0 0 1 18.38 0M5.64 11.89a9 9 0 0 1 12.73 0M8.46 14.71a5 5 0 0 1 7.07 0", o(12, 18.25, 1), "M4 4l16 16"],
  bluetooth: ["M7 7.5l10 9-5 4.5V3l5 4.5-10 9"],
  battery: [box(2.5, 6.5, 16.5, 11, 2.5), "M19 10h1.5a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1H19", "M6.5 10v4M10 10v4"],
  plug: ["M9 3v4.5M15 3v4.5", "M6 7.5h12v3a6 6 0 0 1-12 0z", "M12 16.5V21"],
  monitor: [box(2.5, 3.5, 19, 13, 2), "M12 16.5v4M8 20.5h8"],
  laptop: ["M4.5 15V5.5A1.5 1.5 0 0 1 6 4h12a1.5 1.5 0 0 1 1.5 1.5V15", "M2.75 18.5 4.5 15h15l1.75 3.5a1 1 0 0 1-.9 1.5H3.65a1 1 0 0 1-.9-1.5z"],
  smartphone: [box(6.5, 2.5, 11, 19, 2.5), "M11 18h2"],
  tablet: [box(4, 2.5, 16, 19, 2.5), "M11 18h2"],
  watch: [box(6, 6.5, 12, 11, 3), "M8.5 6.5 9.25 3h5.5l.75 3.5M8.5 17.5l.75 3.5h5.5l.75-3.5", "M12 10v2h1.75"],
  server: [box(3, 3, 18, 7.25, 2), box(3, 13.75, 18, 7.25, 2), "M7 6.63h.01M7 17.38h.01"],
  database: ["M4 5.5a8 2.5 0 1 0 16 0a8 2.5 0 1 0-16 0", "M4 5.5v13a8 2.5 0 0 0 16 0v-13", "M4 12a8 2.5 0 0 0 16 0"],
  cloud: ["M7.5 18.75A4 4 0 0 1 7 10.78A5.5 5.5 0 0 1 17.96 11.38A3.75 3.75 0 0 1 17 18.75z"],
  "cloud-upload": ["M7.5 16A4 4 0 0 1 7 8.03A5.5 5.5 0 0 1 17.96 8.63A3.75 3.75 0 0 1 17 16", "M12 21V10", "M9.5 12.5 12 10l2.5 2.5"],
  "cloud-download": ["M7.5 16A4 4 0 0 1 7 8.03A5.5 5.5 0 0 1 17.96 8.63A3.75 3.75 0 0 1 17 16", "M12 9.5v12", "M10 19.5l2 2 2-2"],
  cpu: [box(6, 6, 12, 12, 2), box(9.5, 9.5, 5, 5, 1), "M9.5 3v3M14.5 3v3M9.5 18v3M14.5 18v3M3 9.5h3M3 14.5h3M18 9.5h3M18 14.5h3"],
  "hard-drive": [box(2.5, 13.5, 19, 7, 2), "M3.09 14.09 5.6 5.3A2 2 0 0 1 7.5 4h9a2 2 0 0 1 1.9 1.3l2.51 8.79", "M6.5 17h.01M10 17h.01"],
  "git-branch": [o(6.5, 5.5, 2.5) + o(6.5, 18.5, 2.5) + "M6.5 8v8", o(17.5, 7, 2.5), "M17.5 9.5c0 4.5-11 3-11 6.5"],
  "git-commit": [o(12, 12, 3.5), "M2.5 12h6M15.5 12h6"],
  "git-merge": [o(6.5, 5.5, 2.5) + o(6.5, 18.5, 2.5) + "M6.5 8v8", o(17.5, 14, 2.5), "M6.5 8c0 4.5 4 6 8.5 6"],
  "pull-request": [o(6, 5.5, 2.5) + o(6, 18.5, 2.5) + "M6 8v8", o(18, 18.5, 2.5) + "M18 16V9a2.5 2.5 0 0 0-2.5-2.5H12", "M14.5 4 12 6.5 14.5 9"],
  bug: [box(7, 5.5, 10, 15, 5), "M7 11h10M12 11v9.5", "M9.5 6.17 8 3.75M14.5 6.17 16 3.75", "M7 14.5H3.5M17 14.5h3.5M7.6 17.87 5 20M16.4 17.87 19 20"],
  braces: ["M9 3.5H8a2 2 0 0 0-2 2v4A2.5 2.5 0 0 1 3.5 12 2.5 2.5 0 0 1 6 14.5v4a2 2 0 0 0 2 2h1", "M15 3.5h1a2 2 0 0 1 2 2v4a2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0-2.5 2.5v4a2 2 0 0 1-2 2h-1"],
  brackets: ["M9 4H5.5v16H9", "M15 4h3.5v16H15"],
  package: ["M12 3l8.5 4.5v9L12 21l-8.5-4.5v-9z", "M3.5 7.5 12 12l8.5-4.5M12 12v9", "M7.75 5.25l8.5 4.5"],
  box: ["M12 3l8.5 4.5v9L12 21l-8.5-4.5v-9z", "M3.5 7.5 12 12l8.5-4.5M12 12v9"],
  globe: [o(12, 12, 9), "M3 12h18", "M12 3c-2.5 2.5-3.75 5.5-3.75 9s1.25 6.5 3.75 9c2.5-2.5 3.75-5.5 3.75-9S14.5 5.5 12 3z"],
  unlink: ["M9.5 16.5h-2a4.5 4.5 0 0 1 0-9h2", "M14.5 7.5h2a4.5 4.5 0 0 1 0 9h-2", "M12 3v2M12 19v2"],
  "qr-code": [box(3, 3, 7, 7, 1.5), box(14, 3, 7, 7, 1.5), box(3, 14, 7, 7, 1.5), "M6.5 6.5h.01M17.5 6.5h.01M6.5 17.5h.01M14.5 14.5h.01M20.5 14.5h.01M17.5 17.5h.01M14.5 20.5h.01M20.5 20.5h.01"],
  barcode: ["M5 5v14M12 5v14M19 5v14", "M8.5 5v10M15.5 5v10"],
  "bar-chart": ["M3.5 20h17", "M7.5 20v-7.5M12 20V4M16.5 20V9.5"],
  "line-chart": ["M4 4v16h16", "M8 15l3.5-4 3 2.5L20 7"],
  "pie-chart": ["M11 5a8 8 0 1 0 8 8h-8z", "M14.5 3a6.5 6.5 0 0 1 6.5 6.5h-6.5z"],
  "trend-up": ["M3 17l6-6 4 4 8-8", "M15.5 7H21v5.5"],
  "trend-down": ["M3 7l6 6 4-4 8 8", "M15.5 17H21v-5.5"],
  activity: ["M2.5 12h4l3-7.5 5 15 3-7.5h4"],
  gauge: ["M4.21 19a9 9 0 1 1 15.58 0", "M12 14.5l3.5-4.5"],
  table: [box(3, 4, 18, 16, 2), "M3 10h18M3 15h18", "M9.5 10v10"],
  kanban: [box(3, 3, 18, 18, 2.5), "M7.5 7v8M12 7v4.5M16.5 7v10"],
  "file-text": ["M14 3.5H7.5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8zM14 3.5V8h4.5", "M9 12.5h6M9 16.5h4"],
  "file-plus": ["M14 3.5H7.5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8zM14 3.5V8h4.5", "M12 11v6M9 14h6"],
  "file-code": ["M14 3.5H7.5a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V8zM14 3.5V8h4.5", "M10.25 11 9 14l1.25 3M13.75 11 15 14l-1.25 3"],
  "folder-open": ["M3.5 18V6.5a2 2 0 0 1 2-2h4l2 2.5h6a2 2 0 0 1 2 2v2", "M3.5 18l2.3-5.6A2 2 0 0 1 7.65 11H20.5a1 1 0 0 1 .93 1.37l-2.4 6.4a2 2 0 0 1-1.87 1.23H5.5a2 2 0 0 1-2-2"],
  "folder-plus": ["M3.5 18V6.5a2 2 0 0 1 2-2h4l2 2.5h7a2 2 0 0 1 2 2V18a2 2 0 0 1-2 2h-13a2 2 0 0 1-2-2z", "M12 10.5v6M9 13.5h6"],
  book: ["M5 18V5.5a2 2 0 0 1 2-2h12V20H7a2 2 0 0 1 0-4h12", "M9 7.5h6"],
  "book-open": ["M12 6.5v14", "M12 6.5C10 5 7 4.5 3 4.5v13c4 0 7 .5 9 3", "M12 6.5c2-1.5 5-2 9-2v13c-4 0-7 .5-9 3"],
  notebook: [box(5.5, 2.5, 15, 19, 2), "M3.5 7h4M3.5 12h4M3.5 17h4", "M11 8h6M11 12h6"],
  newspaper: [box(3, 4, 18, 16, 2), "M6.5 8h11", "M6.5 12h4M6.5 16h4", box(14, 11.5, 3.5, 5, 0.5)],
  bot: [box(4, 8.5, 16, 12, 3), "M12 8.5V5", o(12, 4, 1), "M9 13v2M15 13v2"],
  brain: ["M12 5a3 3 0 0 0-5 .25 3 3 0 0 0-3 4.25 3.25 3.25 0 0 0 .25 5.5A3.25 3.25 0 0 0 8 19a2.25 2.25 0 0 0 4 0z", "M12 5a3 3 0 0 1 5 .25 3 3 0 0 1 3 4.25 3.25 3.25 0 0 1-.25 5.5A3.25 3.25 0 0 1 16 19a2.25 2.25 0 0 1-4 0"],
  sparkles: ["M10 5q1 6 7 7-6 1-7 7-1-6-7-7 6-1 7-7z", "M18 3q.4 2.1 2.5 2.5-2.1.4-2.5 2.5-.4-2.1-2.5-2.5 2.1-.4 2.5-2.5z", "M18.5 16.5v4M16.5 18.5h4"],
  wand: ["M4 20 14 10", "M18 3.5v5M15.5 6h5", "M20 12v3M18.5 13.5h3", "M11 3v2.5M9.75 4.25h2.5"],

  // Commerce, people, places, nature, health, time and tools
  cart: ["M2.5 4.5h2.25L6.75 15h11.5l2-7.5H5.4", o(8.5, 19.25, 1.25) + o(16.5, 19.25, 1.25)],
  bag: [box(4.5, 7.5, 15, 13, 2), "M9 10.5V6.5a3 3 0 0 1 6 0v4"],
  "credit-card": [box(3, 5, 18, 14, 2), "M3 9.5h18", "M6.5 15h3"],
  wallet: [box(3, 6.5, 18, 13, 2), "M5 6.5l10.6-3a1.5 1.5 0 0 1 1.9 1.45V6.5", "M21 10.5h-3.5a2 2 0 0 0 0 4H21"],
  coins: [o(9, 9, 5.5), "M14.47 9.53A5.5 5.5 0 1 1 9.53 14.47"],
  banknote: [box(2.5, 6, 19, 12, 2), o(12, 12, 2.75), "M6 12h.01M18 12h.01"],
  receipt: ["M5.5 20.5V5A1.5 1.5 0 0 1 7 3.5h10A1.5 1.5 0 0 1 18.5 5v15.5l-2.17-1.5-2.16 1.5-2.17-1.5-2.17 1.5-2.16-1.5z", "M9 8h6M9 11.5h6M9 15h3.5"],
  percent: ["M18.5 5.5l-13 13", o(7.5, 7.5, 2) + o(16.5, 16.5, 2)],
  gift: [box(3.5, 8, 17, 4, 1), "M5 12v7a1.5 1.5 0 0 0 1.5 1.5h11A1.5 1.5 0 0 0 19 19v-7", "M12 8v12.5", "M12 8C11 5.5 7.5 3.5 7.5 6c0 1.4 2 2 4.5 2s4.5-.6 4.5-2c0-2.5-3.5-.5-4.5 2"],
  store: ["M3.5 9.5 5 4.5h14l1.5 5a2.83 2.83 0 0 1-5.67 0 2.83 2.83 0 0 1-5.66 0 2.83 2.83 0 0 1-5.67 0z", "M5 12v6.5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V12", "M10 20.5V16h4v4.5"],
  truck: ["M5 17H3.5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1H13a1 1 0 0 1 1 1v11", "M14 9h3.5l4 4v3a1 1 0 0 1-1 1H19M9 17h6", o(7, 17, 2) + o(17, 17, 2)],
  building: ["M4.5 20.5V5A1.5 1.5 0 0 1 6 3.5h7A1.5 1.5 0 0 1 14.5 5v15.5", "M14.5 9.5h3.5a1.5 1.5 0 0 1 1.5 1.5v9.5", "M3 20.5h18", "M7.75 7.5h.01M11.25 7.5h.01M7.75 11h.01M11.25 11h.01M7.75 14.5h.01M11.25 14.5h.01M17 13h.01M17 16.5h.01"],
  bank: ["M3.5 9 12 4l8.5 5z", "M6 12.5V17M10 12.5V17M14 12.5V17M18 12.5V17", "M3 20.5h18"],
  briefcase: [box(3, 7, 18, 13, 2), "M9 7V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5V7", "M3 12.5h18"],
  map: ["M3.5 6.5 9 4l6 2.5L20.5 4v13.5L15 20l-6-2.5L3.5 20z", "M9 4v13.5M15 6.5V20"],
  "map-pin": ["M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z", o(12, 9.5, 2.5)],
  compass: [o(12, 12, 9), "M15.5 8.5l-2 5-5 2 2-5z"],
  navigation: ["M12 3.5 19 20l-7-4-7 4z"],
  plane: ["M12 3c.9 0 1.5 1 1.5 2.5v4l7 4.5v2l-7-2v4l2.25 1.75V21L12 20l-3.75 1v-1.25L10.5 18v-4l-7 2v-2l7-4.5v-4C10.5 4 11.1 3 12 3z"],
  car: ["M5 10.5l1.6-4.3A2 2 0 0 1 8.5 5h7a2 2 0 0 1 1.9 1.2l1.6 4.3", box(3, 10.5, 18, 6.5, 2), "M6 17v2M18 17v2", "M6.5 13.75h1M16.5 13.75h1"],
  bike: [o(6, 15.5, 3.5) + o(18, 15.5, 3.5), "M6 15.5 9.5 9h6M6 15.5h6l3.5-6.5", "M18 15.5 14.5 6.5h-2M8 9h1.5"],
  train: [box(5, 3, 14, 14.5, 3), "M5 10.5h14M12 3v7.5", "M8.5 14h.01M15.5 14h.01", "M8 17.5l-2 3M16 17.5l2 3"],
  ship: ["M3 14h18l-2.5 5h-13z", "M6.5 14V9.5h11V14", "M10 9.5v-4h4v4"],
  rocket: ["M12 2.5c3 2 4.5 5.5 4.5 9.5v4.5h-9V12c0-4 1.5-7.5 4.5-9.5z", "M7.5 12.5 5 15v3.5h2.5M16.5 12.5 19 15v3.5h-2.5", o(12, 9, 1.5), "M12 19.25v2"],
  anchor: [o(12, 5, 2), "M12 7v14M8.5 10.5h7", "M4.5 13.5a7.5 7.5 0 0 0 15 0", "M3 15l1.5-1.5L6 15M18 15l1.5-1.5L21 15"],
  "user-plus": [o(9, 8, 3), "M3 20v-.5a5 5 0 0 1 5-5h2a5 5 0 0 1 5 5v.5", "M18.5 8v6M15.5 11h6"],
  "user-minus": [o(9, 8, 3), "M3 20v-.5a5 5 0 0 1 5-5h2a5 5 0 0 1 5 5v.5", "M15.5 11h6"],
  "user-check": [o(9, 8, 3), "M3 20v-.5a5 5 0 0 1 5-5h2a5 5 0 0 1 5 5v.5", "M15.5 11l2 2 3.5-4"],
  "id-card": [box(3, 5, 18, 14, 2), o(8.5, 12, 2.5), "M14 10h3.5M14 14h3.5"],
  smile: [o(12, 12, 9), "M8.5 14.5a4 4 0 0 0 7 0", "M9 9.5h.01M15 9.5h.01"],
  frown: [o(12, 12, 9), "M8.5 16.5a4 4 0 0 1 7 0", "M9 9.5h.01M15 9.5h.01"],
  "thumbs-up": [box(3, 10.5, 4, 10, 1), "M7 11.5 10 5a1.8 1.8 0 0 1 3.4.8V10h4.8a2 2 0 0 1 2 2.35l-1.15 6.5a2 2 0 0 1-2 1.65H7"],
  "thumbs-down": [box(3, 3.5, 4, 10, 1), "M7 12.5 10 19a1.8 1.8 0 0 0 3.4-.8V14h4.8a2 2 0 0 0 2-2.35l-1.15-6.5a2 2 0 0 0-2-1.65H7"],
  award: [o(12, 9, 6), "M8.5 14l-1.5 7 5-2.5 5 2.5-1.5-7"],
  trophy: ["M7 4h10v5a5 5 0 0 1-10 0z", "M7 6H4.5v1.5A3 3 0 0 0 7 10.5M17 6h2.5v1.5A3 3 0 0 1 17 10.5", "M12 14v6.5M8 20.5h8"],
  crown: ["M4 16.5 3 6.5l5 4 4-6 4 6 5-4-1 10z", "M5 19.5h14"],
  target: [o(12, 12, 9), o(12, 12, 4.5), "M12 12h.01"],
  lightbulb: ["M9.5 17.5v-1c0-1.4-.6-2.2-1.5-3a6 6 0 1 1 8 0c-.9.8-1.5 1.6-1.5 3v1z", "M10 21h4"],
  flame: ["M12 21a6.5 6.5 0 0 0 6.5-6.5c0-4.5-3.5-6.5-4.5-11-2.5 2-3 4.5-3 7-1-.5-2-1.5-2.5-2.5-2 2-3 4-3 6.5A6.5 6.5 0 0 0 12 21z"],
  droplet: ["M12 3.5s6.5 6.8 6.5 11a6.5 6.5 0 0 1-13 0c0-4.2 6.5-11 6.5-11z"],
  leaf: ["M5 19C5 10 10 4.5 19.5 4.5 19.5 14 14 19 5 19z", "M4 20l9.5-9.5"],
  tree: ["M12 3 6 11h3l-4 6h14l-4-6h3z", "M12 17v4"],
  flower: ["M12 13.5c-3 0-5-2-5-5v-4l2.5 2L12 4l2.5 2.5L17 4.5v4c0 3-2 5-5 5z", "M12 13.5v7", "M12 20.5c0-2.5-2-4.5-5-4.5 0 2.5 2 4.5 5 4.5zM12 20.5c0-2.5 2-4.5 5-4.5 0 2.5-2 4.5-5 4.5z"],
  "cloud-rain": ["M7.25 14.5A3.5 3.5 0 0 1 7.21 7.5A5.5 5.5 0 0 1 17.98 8.54A3 3 0 0 1 17.5 14.5z", "M8 17.5l-1 3M12 17.5l-1 3M16 17.5l-1 3"],
  snowflake: ["M12 3v18M19.79 7.5 4.21 16.5M19.79 16.5 4.21 7.5", "M14.1 3.5 12 5.6 9.9 3.5M20.41 9.57l-2.87-.77.77-2.87M18.31 18.07l-.77-2.87 2.87-.77M9.9 20.5l2.1-2.1 2.1 2.1M3.59 14.43l2.87.77-.77 2.87M5.69 5.93l.77 2.87-2.87.77"],
  wind: ["M3 10h10a2.5 2.5 0 1 0-2.5-2.5", "M3 14h15.5a2.5 2.5 0 1 1-2.5 2.5", "M3 18.5h8"],
  umbrella: ["M3 12a9 9 0 0 1 18 0a3 3 0 0 0-6 0a3 3 0 0 0-6 0a3 3 0 0 0-6 0z", "M12 9v9.5a2 2 0 0 1-4 0"],
  thermometer: ["M11.5 13.83V5a2 2 0 0 0-4 0v8.83a3.75 3.75 0 1 0 4 0z", "M15 5h3.5M15 8.5h3.5M15 12h3.5"],
  mountain: ["M2.5 19 9.5 5.5l5 9.5 2.5-4 4.5 8z", "M7.2 10l2.3 1.5 2.3-1.5"],
  "heart-pulse": ["M12 7.15A4.6 4.6 0 1 0 4.18 11.54L12 20.15L19.82 11.54A4.6 4.6 0 1 0 12 7.15z", "M2.5 12.5h5l1.5-3 3 6 1.5-3h8"],
  pill: ["M17.48 12.88A4.5 4.5 0 0 0 11.12 6.52L6.52 11.12A4.5 4.5 0 0 0 12.88 17.48z", "M15.18 15.18 8.82 8.82"],
  stethoscope: ["M5.5 3.5H4v6a4.5 4.5 0 0 0 9 0v-6h-1.5", "M8.5 14v1a5 5 0 0 0 10 0v-2.5", o(18.5, 10.5, 2)],
  "first-aid": [box(3, 7, 18, 13, 2), "M9 7V5.5A1.5 1.5 0 0 1 10.5 4h3A1.5 1.5 0 0 1 15 5.5V7", "M12 10.5v6M9 13.5h6"],
  "graduation-cap": ["M12 4.5 2.5 9.5l9.5 5 9.5-5z", "M6.5 11.6V16c0 1.5 2.5 3 5.5 3s5.5-1.5 5.5-3v-4.4", "M21.5 9.5V15"],
  coffee: ["M3.5 9h13v6a5 5 0 0 1-5 5h-3a5 5 0 0 1-5-5z", "M16.5 11H18a2.5 2.5 0 0 1 0 5h-1.5", "M8 3.5V6M12 3.5V6"],
  utensils: ["M5.5 3v5a2.5 2.5 0 0 0 5 0V3", "M8 10.5V21", "M18.5 21V3C16 4.5 15 7 15 10.5V14h3.5"],
  bed: ["M3 5.5v14M3 16h18v3.5", "M10 16v-5.5h8.5A2.5 2.5 0 0 1 21 13v3", o(6.5, 12.25, 1.5)],
  dumbbell: [box(5, 6.5, 4, 11, 1.5) + box(15, 6.5, 4, 11, 1.5), "M9 12h6", "M2.5 10v4M21.5 10v4"],
  gamepad: ["M7.5 6.5h9a4 4 0 0 1 3.9 3.2l.9 5a2.5 2.5 0 0 1-4.3 2.1L15 15H9l-2 1.8a2.5 2.5 0 0 1-4.3-2.1l.9-5A4 4 0 0 1 7.5 6.5z", "M7.5 9.5V13M5.75 11.25h3.5", "M15.5 10h.01M17.5 12.5h.01"],
  dice: [box(4, 4, 16, 16, 3), "M8.5 8.5h.01M15.5 8.5h.01M12 12h.01M8.5 15.5h.01M15.5 15.5h.01"],
  puzzle: ["M3.5 7.5h4.75a2.25 2.25 0 1 1 3.5 0h4.75v4.75a2.25 2.25 0 1 1 0 3.5v4.75h-13z"],
  ticket: ["M5 5.5h14A1.5 1.5 0 0 1 20.5 7v2.5a2.5 2.5 0 0 0 0 5V17a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 17v-2.5a2.5 2.5 0 0 0 0-5V7A1.5 1.5 0 0 1 5 5.5z", "M14.5 9v1.5M14.5 13.5V15"],
  film: [box(3.5, 3.5, 17, 17, 2), "M7.5 3.5v17M16.5 3.5v17", "M3.5 8h4M3.5 12h4M3.5 16h4M16.5 8h4M16.5 12h4M16.5 16h4"],
  tv: [box(3, 7, 18, 11.5, 2), "M8.5 3.5 12 7l3.5-3.5", "M9 21h6"],
  megaphone: ["M3.5 10.5v3A1.5 1.5 0 0 0 5 15h2.5l8.5 4.5v-15L7.5 9H5a1.5 1.5 0 0 0-1.5 1.5z", "M7.5 15l1.5 5", "M19.5 9.5a3.5 3.5 0 0 1 0 5"],
  hourglass: ["M6.5 3.5h11M6.5 20.5h11", "M7.5 3.5V6c0 2 1.5 3.5 4.5 6-3 2.5-4.5 4-4.5 6v2.5M16.5 3.5V6c0 2-1.5 3.5-4.5 6 3 2.5 4.5 4 4.5 6v2.5"],
  timer: [o(12, 13.5, 7.5), "M10 3h4M12 3v3", "M12 13.5V10", "M18.5 6.5 20 5"],
  alarm: [o(12, 13, 7), "M12 9.5V13l2.5 2", "M3.5 6l3-2.5M20.5 6l-3-2.5", "M7 19.5l-1.5 1.5M17 19.5l1.5 1.5"],
  history: ["M3.5 12a8.5 8.5 0 1 0 2.49-6.01", "M3.5 4v3.5H7", "M12 7.5V12l3 2"],
  "calendar-check": [box(3.5, 5, 17, 15.5, 2), "M3.5 10h17", "M8 3v4M16 3v4", "M9 15l2 2 4-4"],
  "calendar-plus": [box(3.5, 5, 17, 15.5, 2), "M3.5 10h17", "M8 3v4M16 3v4", "M12 13v5M9.5 15.5h5"],
  infinity: ["M12 12c-1.5-2-3-3.5-5-3.5a3.5 3.5 0 0 0 0 7c2 0 3.5-1.5 5-3.5s3-3.5 5-3.5a3.5 3.5 0 0 1 0 7c-2 0-3.5-1.5-5-3.5z"],
  accessibility: [o(12, 5, 1.75), "M5 9l7 1.5L19 9", "M12 10.5V14l-3 6.5M12 14l3 6.5"],
  languages: ["M3 5.5h8M7 3.5v2", "M5 5.5c.5 3 2.5 5.5 6 7M9.5 5.5c-.5 3-2.5 5.5-6 7", "M12.5 20.5l4-9 4 9M14 17.5h5"],
  magnet: ["M5 4.5h4v8a3 3 0 0 0 6 0v-8h4v8a7 7 0 0 1-14 0z", "M5 8.5h4M15 8.5h4"],
  scale: ["M12 3.5v17M8 20.5h8M5.5 7h13", "M2.5 14.5 5.5 7l3 7.5a3 3 0 0 1-6 0z", "M15.5 14.5 18.5 7l3 7.5a3 3 0 0 1-6 0z"],
  gavel: ["M14.13 7.06 10.94 3.87 3.87 10.94l3.19 3.19z", "M10.59 10.59 18 18", "M12.5 20.5h8"],
  recycle: ["M13.1 5.16l5.54 9.6M15.5 13.92l3.14.84.85-3.14M18.24 17.88H7.16M9.46 15.58l-2.3 2.3 2.3 2.3M4.66 15.97l5.54-9.6M11.04 9.51l-.84-3.14-3.14.84"],
  "life-buoy": [o(12, 12, 9), o(12, 12, 4), "M5.64 5.64l3.53 3.53M14.83 9.17l3.53-3.53M14.83 14.83l3.53 3.53M9.17 14.83l-3.53 3.53"],
  brush: ["M19.5 4.5l-7 7", "M10.5 11l2.5 2.5", "M10 13c-2.5 0-3.5 1.5-3.5 3.5 0 1.5-1 2.5-3 3.5 4 1 7.5 0 8.5-2.5.8-2-.5-3.5-2-4.5z"],
  ruler: [box(2.5, 7.5, 19, 9, 1.5), "M6.75 7.5V11M10.25 7.5v2M13.75 7.5V11M17.25 7.5v2"],
  wrench: ["M19.17 7.31 16.77 9.71 14.29 7.23 16.69 4.83A4.5 4.5 0 0 0 10.83 10.69L4.92 16.6A1.75 1.75 0 0 0 7.4 19.08l5.91-5.91a4.5 4.5 0 0 0 5.86-5.86z"],
  hammer: ["M8.31 4.64c2.47-.36 4.6.35 6.36 2.12l5.31 5.3a1 1 0 0 1 0 1.42l-2.13 2.12a1 1 0 0 1-1.41 0l-5.3-5.31C9.37 8.53 8.31 6.76 8.31 4.64z", "M11.14 10.29l-6.72 6.72a1.5 1.5 0 0 0 2.12 2.12l6.72-6.71"],
} satisfies Record<string, string[]>;

export type IconName = keyof typeof icons;

/** Every icon name, in the order the set is drawn. Handy for a picker or a test. */
export const iconNames = Object.keys(icons) as IconName[];

export type IconProps = Omit<ComponentProps<"svg">, "name"> & {
  /** Which icon to draw. */
  name: IconName;
  /** 16, 20 or 24px, or any number of pixels. Leave it out to follow the text: 1.25em. */
  size?: "s" | "m" | "l" | number;
  /** Names the icon for screen readers. Without it the icon is decorative and hidden. */
  label?: string;
  /**
   * Fills the shape with its own colour: true is solid, "soft" a light wash. Pass false
   * rather than leaving it out when it toggles, so the fill fades in and out.
   */
  filled?: boolean | "soft";
};

export function Icon({ name, size, label, filled, className, style, ...rest }: IconProps) {
  return (
    <svg
      aria-hidden={label ? undefined : "true"}
      role={label ? "img" : undefined}
      aria-label={label}
      focusable="false"
      {...rest}
      className={["eq-icon", className].filter(Boolean).join(" ")}
      data-size={size}
      data-filled={filled === undefined ? undefined : String(filled)}
      style={typeof size === "number" ? ({ "--_size": `${size}px`, ...style } as CSSProperties) : style}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      {icons[name].map((d, i) => (
        <path key={i} d={d} />
      ))}
    </svg>
  );
}
components/equip/icon.css52 lines
@layer equip {
  .eq-icon {
    --_size: 1.25em;

    display: inline-block;
    flex: none;
    width: var(--_size);
    height: var(--_size);
    /* Centres a 1.25em icon on the capitals of the text it sits in. A flex row ignores it. */
    vertical-align: -0.275em;
    /* In units of the 24 grid, so the stroke grows with the icon the way a font's weight
       does: 1.75 is about 1.5px at 20px, the library's line weight. A non-scaling stroke
       would keep 1.5px at every size, which clogs a 12px icon and looks frail at 32px.
       Set --eq-icon-stroke once to make every icon lighter or bolder. */
    stroke-width: var(--eq-icon-stroke, 1.75);
    /* A heavier stroke may reach past the 2px padding; let it show rather than clip. */
    overflow: visible;
  }

  /* An explicit size beats any parent that sizes its svg children, such as Button. */
  .eq-icon[data-size] {
    width: var(--_size);
    height: var(--_size);
  }

  .eq-icon[data-size="s"] {
    --_size: 16px;
  }

  .eq-icon[data-size="m"] {
    --_size: 20px;
  }

  .eq-icon[data-size="l"] {
    --_size: 24px;
  }

  /* Filled, for a toggle such as a saved heart, a starred row or a bookmark. Only set
     when the prop is given, so an ordinary icon keeps fill="none". */
  .eq-icon[data-filled] {
    fill: transparent;
    transition: fill var(--eq-dur) var(--eq-ease);
  }

  .eq-icon[data-filled="true"] {
    fill: currentColor;
  }

  .eq-icon[data-filled="soft"] {
    fill: color-mix(in srgb, currentColor 22%, transparent);
  }
}

EqUIp is in beta: free for non-commercial use, no warranty, and things can change. Terms

Nothing picked yet. Press A on a part, or use the plus on the board, and the install command builds here.

Loading the index.

Loading the index