Icon Set

Consistent family of icons used across an interface.

html

<ul class="icon-set icon-set--outline" style="--icon-color:#241430;--icon-size:28px;">
  <li class="icon-set__item">
    <svg class="icon-set__svg" viewBox="0 0 24 24" width="28" height="28"><circle cx="12" cy="12" r="9"/><path d="M9 12l2 2 4-4"/></svg>
    <span class="icon-set__label">Done</span>
  </li>
  <li class="icon-set__item">
    <svg class="icon-set__svg" viewBox="0 0 24 24" width="28" height="28"><rect x="4" y="4" width="16" height="16" rx="3"/><path d="M8 12h8"/></svg>
    <span class="icon-set__label">Menu</span>
  </li>
  <li class="icon-set__item">
    <svg class="icon-set__svg" viewBox="0 0 24 24" width="28" height="28"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>
    <span class="icon-set__label">Star</span>
  </li>
  <li class="icon-set__item">
    <svg class="icon-set__svg" viewBox="0 0 24 24" width="28" height="28"><path d="M4 19V6a2 2 0 0 1 2-2h9l5 5v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/><path d="M14 4v5h5"/></svg>
    <span class="icon-set__label">File</span>
  </li>
</ul>
<style>
.icon-set { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; max-width: 360px; font: 11px/1.4 system-ui, sans-serif; color: #241430; }
.icon-set__item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.icon-set__svg { fill: none; stroke: var(--icon-color); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-set--filled .icon-set__svg { fill: var(--icon-color); stroke: none; }
.icon-set--duotone .icon-set__svg { fill: var(--icon-color); fill-opacity: .25; stroke: var(--icon-color); stroke-width: 1.4; }
.icon-set__label { color: #24143099; }
</style>

tailwind

<ul class="icon-set-tw icon-set-tw--outline flex gap-5 list-none m-0 p-0 max-w-[360px] font-sans text-[11px] text-[#241430]" style="--icon-color:#241430;--icon-size:28px;">
  <li class="flex flex-col items-center gap-1.5">
    <svg class="icon-set-tw__svg" viewBox="0 0 24 24" width="28" height="28"><circle cx="12" cy="12" r="9"/><path d="M9 12l2 2 4-4"/></svg>
    <span class="text-[#241430]/60">Done</span>
  </li>
  <li class="flex flex-col items-center gap-1.5">
    <svg class="icon-set-tw__svg" viewBox="0 0 24 24" width="28" height="28"><rect x="4" y="4" width="16" height="16" rx="3"/><path d="M8 12h8"/></svg>
    <span class="text-[#241430]/60">Menu</span>
  </li>
  <li class="flex flex-col items-center gap-1.5">
    <svg class="icon-set-tw__svg" viewBox="0 0 24 24" width="28" height="28"><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>
    <span class="text-[#241430]/60">Star</span>
  </li>
  <li class="flex flex-col items-center gap-1.5">
    <svg class="icon-set-tw__svg" viewBox="0 0 24 24" width="28" height="28"><path d="M4 19V6a2 2 0 0 1 2-2h9l5 5v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"/><path d="M14 4v5h5"/></svg>
    <span class="text-[#241430]/60">File</span>
  </li>
</ul>
<style>
.icon-set-tw__svg { fill: none; stroke: var(--icon-color); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-set-tw--filled .icon-set-tw__svg { fill: var(--icon-color); stroke: none; }
.icon-set-tw--duotone .icon-set-tw__svg { fill: var(--icon-color); fill-opacity: .25; stroke: var(--icon-color); stroke-width: 1.4; }
</style>

react

export function IconSet({
  iconStyle = "outline",
  color = "#241430",
  size = 28,
  labels = true,
}) {
  const svgProps = iconStyle === "filled"
    ? { fill: color, stroke: "none" }
    : iconStyle === "duotone"
      ? { fill: color, fillOpacity: 0.25, stroke: color, strokeWidth: 1.4 }
      : { fill: "none", stroke: color, strokeWidth: 1.7 };
  const icons = [
    { label: "Done", path: <><circle cx="12" cy="12" r="9" /><path d="M9 12l2 2 4-4" /></> },
    { label: "Menu", path: <><rect x="4" y="4" width="16" height="16" rx="3" /><path d="M8 12h8" /></> },
    { label: "Star", path: <path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" /> },
    { label: "File", path: <><path d="M4 19V6a2 2 0 0 1 2-2h9l5 5v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z" /><path d="M14 4v5h5" /></> },
  ];
  return (
    <ul style={{ display: "flex", gap: 20, listStyle: "none", margin: 0, padding: 0, maxWidth: 360, font: "11px/1.4 system-ui, sans-serif", color: "#241430" }}>
      {icons.map((icon) => (
        <li key={icon.label} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
          <svg viewBox="0 0 24 24" width={size} height={size} strokeLinecap="round" strokeLinejoin="round" {...svgProps}>
            {icon.path}
          </svg>
          {labels && <span style={{ color: "#24143099" }}>{icon.label}</span>}
        </li>
      ))}
    </ul>
  );
}