<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>App icon directions — DataTools</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--ink: #1c1917;
--ink-secondary: #57534e;
--ink-tertiary: #a8a29e;
--bg: #fafaf7;
--surface: #ffffff;
--border: #e7e5dc;
--accent: #c2410c;
--accent-fill: #fef4ed;
--pick: #15803d;
--pick-fill: #dcfce7;
--font-sans: "Geist", -apple-system, BlinkMacSystemFont, sans-serif;
--font-display: "Fraunces", Georgia, serif;
--font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font-sans);
color: var(--ink);
background: var(--bg);
font-size: 14px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.page {
max-width: 1100px;
margin: 0 auto;
padding: 56px 32px 96px;
}
.page-header {
margin-bottom: 48px;
padding-bottom: 28px;
border-bottom: 1px solid var(--border);
}
.eyebrow {
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent);
font-weight: 500;
margin-bottom: 12px;
}
.page-title {
font-family: var(--font-display);
font-size: 36px;
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1.1;
margin: 0 0 14px;
font-variation-settings: "opsz" 144;
}
.page-intro {
font-size: 15px;
color: var(--ink-secondary);
max-width: 64ch;
margin: 0;
}
/* Test surfaces strip — shows icon at multiple sizes / backgrounds */
.test-surfaces {
margin-top: 18px;
padding: 14px 16px;
background: var(--surface);
border: 1px dashed var(--border);
border-radius: 10px;
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.test-surfaces-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ink-tertiary);
font-weight: 500;
}
.ts-row {
display: flex;
align-items: center;
gap: 10px;
}
.ts-bg-light, .ts-bg-dark, .ts-bg-photo {
border-radius: 8px;
padding: 6px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.ts-bg-light { background: #f5f4ef; }
.ts-bg-dark { background: #1c1917; }
.ts-bg-photo {
background: linear-gradient(135deg, #84cc16 0%, #0891b2 50%, #c2410c 100%);
}
.ts-size {
font-family: var(--font-mono);
font-size: 10px;
color: var(--ink-tertiary);
width: 28px;
text-align: center;
}
.ts-bg-dark + .ts-size, .ts-bg-dark .ts-size { color: var(--ink-tertiary); }
/* Grid */
.icon-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 18px;
margin-bottom: 32px;
}
.icon-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 24px 22px 20px;
position: relative;
display: flex;
flex-direction: column;
}
.icon-card.is-pick {
border-color: rgba(21, 128, 61, 0.35);
box-shadow: 0 0 0 3px rgba(21, 128, 61, 0.06);
}
.icon-card-head {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.icon-number {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-tertiary);
font-weight: 500;
letter-spacing: 0.04em;
}
.icon-name {
font-size: 14px;
font-weight: 500;
color: var(--ink);
}
.pick-badge {
display: inline-flex;
align-items: center;
padding: 3px 9px;
background: var(--pick-fill);
color: var(--pick);
border-radius: 999px;
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.02em;
margin-left: auto;
}
/* Hero icon — full size display */
.icon-hero {
display: flex;
align-items: center;
justify-content: center;
height: 180px;
background: #f5f4ef;
border-radius: 12px;
margin-bottom: 12px;
}
.icon-128 {
width: 128px;
height: 128px;
border-radius: 28px;
display: grid;
place-items: center;
box-shadow: 0 8px 24px rgba(28,25,23,0.08), 0 2px 6px rgba(28,25,23,0.06);
}
.icon-128 svg { width: 84px; height: 84px; display: block; }
/* Multi-size strip */
.icon-sizes {
display: flex;
align-items: center;
justify-content: space-around;
gap: 12px;
padding: 14px 12px;
background: #f8f7f3;
border-radius: 10px;
margin-bottom: 14px;
}
.icon-sizes .icon-mini {
border-radius: 9px;
display: grid;
place-items: center;
flex-shrink: 0;
}
.icon-sizes .ic-64 { width: 64px; height: 64px; border-radius: 14px; }
.icon-sizes .ic-48 { width: 48px; height: 48px; border-radius: 11px; }
.icon-sizes .ic-32 { width: 32px; height: 32px; border-radius: 8px; }
.icon-sizes .ic-16 { width: 16px; height: 16px; border-radius: 4px; }
.icon-sizes .ic-64 svg { width: 42px; height: 42px; }
.icon-sizes .ic-48 svg { width: 32px; height: 32px; }
.icon-sizes .ic-32 svg { width: 21px; height: 21px; }
.icon-sizes .ic-16 svg { width: 11px; height: 11px; }
.icon-sizes-label {
font-family: var(--font-mono);
font-size: 10px;
color: var(--ink-tertiary);
text-align: center;
margin-top: 4px;
}
.size-col { display: flex; flex-direction: column; align-items: center; }
.icon-note {
font-size: 13px;
color: var(--ink-secondary);
margin: 0;
padding-top: 12px;
border-top: 1px solid var(--border);
line-height: 1.5;
}
.icon-note strong { font-weight: 500; color: var(--ink); }
.icon-tags {
display: flex;
gap: 6px;
margin-top: 8px;
flex-wrap: wrap;
}
.tag {
font-size: 10.5px;
font-family: var(--font-mono);
color: var(--ink-tertiary);
padding: 2px 7px;
background: #f8f7f3;
border-radius: 999px;
letter-spacing: 0.02em;
}
/* ───────── Icon-specific backgrounds ───────── */
/* 01 Broom */
.bg-broom {
background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%);
}
/* 02 Sparkle table */
.bg-sparkle {
background: linear-gradient(135deg, #0891b2 0%, #155e75 100%);
}
/* 03 Letter D */
.bg-letterD {
background: var(--ink);
}
/* 04 Stacked rows */
.bg-stack {
background: linear-gradient(135deg, #c2410c 0%, #7c2d12 100%);
}
/* 05 Funnel */
.bg-funnel {
background: linear-gradient(135deg, #15803d 0%, #14532d 100%);
}
/* 06 Grid + check */
.bg-gridcheck {
background: linear-gradient(135deg, #fef4ed 0%, #fed7aa 100%);
}
.bg-gridcheck svg { color: #9a3412; }
/* 07 Sieve / sift */
.bg-sieve {
background: linear-gradient(135deg, #1c1917 0%, #292524 100%);
}
/* 08 D monogram serif */
.bg-dserif {
background: linear-gradient(135deg, #fafaf7 0%, #e7e5dc 100%);
border: 1px solid var(--border);
}
/* 09 Magnifier on data */
.bg-mag {
background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);
}
/* 10 Data flow */
.bg-flow {
background: linear-gradient(135deg, #7c2d12 0%, #431407 100%);
}
/* 11 Cube unfolded */
.bg-cube {
background: linear-gradient(135deg, #fef4ed 0%, #fdba74 100%);
}
.bg-cube svg { color: #7c2d12; }
/* 12 Sweep arc */
.bg-sweep {
background: linear-gradient(135deg, #c2410c 0%, #fed7aa 100%);
}
/* Recap section */
.recap {
margin-top: 32px;
padding: 28px 32px;
background: var(--accent-fill);
border-radius: 14px;
border: 1px solid rgba(194, 65, 12, 0.15);
}
.recap-title {
font-family: var(--font-display);
font-weight: 500;
font-size: 20px;
letter-spacing: -0.015em;
margin: 0 0 12px;
color: #7c2d12;
font-variation-settings: "opsz" 72;
}
.recap p {
font-size: 13.5px;
color: #7c2d12;
margin: 0 0 8px;
line-height: 1.6;
}
.recap p:last-child { margin-bottom: 0; }
.recap strong { font-weight: 600; }
@media (max-width: 640px) {
.page { padding: 32px 18px 64px; }
.icon-card { padding: 18px; }
.icon-hero { height: 140px; }
.icon-128 { width: 96px; height: 96px; }
.icon-128 svg { width: 60px; height: 60px; }
}
</style>
</head>
<body>
<main class="page">
<header class="page-header">
<div class="eyebrow">App icon directions</div>
<h1 class="page-title">Twelve directions for the DataTools icon</h1>
<p class="page-intro">Each shown at 128px (hero) and 64/48/32/16px (sizes strip). The 16px column is the truth-teller — if it doesn't read at favicon size, it fails. Top 3 picks flagged. Ordered roughly by fit for this product.</p>
</header>
<div class="icon-grid">
<!-- ════════════════════════════════════════════════════════════
01 — BROOM (sweep)
════════════════════════════════════════════════════════════ -->
<article class="icon-card is-pick">
<div class="icon-card-head">
<span class="icon-number">01</span>
<span class="icon-name">Sweep broom</span>
<span class="pick-badge">Top pick</span>
</div>
<div class="icon-hero">
<div class="icon-128 bg-broom">
<svg viewBox="0 0 64 64" fill="none" stroke="#fef4ed" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M44 12L52 20"/>
<path d="M38 18L46 26L26 46L18 38Z" fill="#fed7aa" stroke="#fef4ed"/>
<path d="M18 38L10 50" stroke-width="3.5"/>
<path d="M22 42L14 50" stroke-width="2.5" opacity="0.7"/>
<path d="M14 34L6 46" stroke-width="2.5" opacity="0.7"/>
</svg>
</div>
</div>
<div class="icon-sizes">
<div class="size-col">
<div class="icon-mini ic-64 bg-broom"><svg viewBox="0 0 64 64" fill="none" stroke="#fef4ed" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M44 12L52 20"/><path d="M38 18L46 26L26 46L18 38Z" fill="#fed7aa" stroke="#fef4ed"/><path d="M18 38L10 50"/></svg></div>
<span class="icon-sizes-label">64</span>
</div>
<div class="size-col">
<div class="icon-mini ic-48 bg-broom"><svg viewBox="0 0 64 64" fill="none" stroke="#fef4ed" stroke-width="4.5" stroke-linecap="round" stroke-linejoin="round"><path d="M44 12L52 20"/><path d="M38 18L46 26L26 46L18 38Z" fill="#fed7aa" stroke="#fef4ed"/><path d="M18 38L10 50"/></svg></div>
<span class="icon-sizes-label">48</span>
</div>
<div class="size-col">
<div class="icon-mini ic-32 bg-broom"><svg viewBox="0 0 64 64" fill="none" stroke="#fef4ed" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round"><path d="M38 18L46 26L26 46L18 38Z" fill="#fed7aa" stroke="#fef4ed"/><path d="M18 38L10 50"/></svg></div>
<span class="icon-sizes-label">32</span>
</div>
<div class="size-col">
<div class="icon-mini ic-16 bg-broom"><svg viewBox="0 0 64 64" fill="none" stroke="#fef4ed" stroke-width="7" stroke-linecap="round" stroke-linejoin="round"><path d="M38 18L46 26L26 46L18 38Z" fill="#fed7aa" stroke="#fef4ed"/></svg></div>
<span class="icon-sizes-label">16</span>
</div>
</div>
<p class="icon-note"><strong>Direct connection to the product story.</strong> Your README already uses the broom emoji 🧹. Reads as "cleaning" instantly, even at 16px. Risk: too literal — verges on emoji territory. Mitigated by the gradient backplate and the geometric stroke treatment.</p>
<div class="icon-tags"><span class="tag">literal</span><span class="tag">memorable</span><span class="tag">on-brand</span></div>
</article>
<!-- ════════════════════════════════════════════════════════════
02 — SPARKLE TABLE
════════════════════════════════════════════════════════════ -->
<article class="icon-card is-pick">
<div class="icon-card-head">
<span class="icon-number">02</span>
<span class="icon-name">Cleaned table</span>
<span class="pick-badge">Top pick</span>
</div>
<div class="icon-hero">
<div class="icon-128 bg-sparkle">
<svg viewBox="0 0 64 64" fill="none">
<rect x="10" y="14" width="44" height="36" rx="4" fill="none" stroke="#cffafe" stroke-width="3"/>
<line x1="10" y1="24" x2="54" y2="24" stroke="#cffafe" stroke-width="2.5"/>
<line x1="26" y1="14" x2="26" y2="50" stroke="#cffafe" stroke-width="2.5"/>
<line x1="42" y1="14" x2="42" y2="50" stroke="#cffafe" stroke-width="2.5"/>
<line x1="10" y1="37" x2="54" y2="37" stroke="#cffafe" stroke-width="2.5"/>
<path d="M44 6L46 10L50 12L46 14L44 18L42 14L38 12L42 10Z" fill="#fef9c3"/>
<path d="M55 22L56 25L59 26L56 27L55 30L54 27L51 26L54 25Z" fill="#fef9c3"/>
</svg>
</div>
</div>
<div class="icon-sizes">
<div class="size-col">
<div class="icon-mini ic-64 bg-sparkle"><svg viewBox="0 0 64 64" fill="none"><rect x="10" y="14" width="44" height="36" rx="4" fill="none" stroke="#cffafe" stroke-width="3.5"/><line x1="10" y1="24" x2="54" y2="24" stroke="#cffafe" stroke-width="3"/><line x1="26" y1="14" x2="26" y2="50" stroke="#cffafe" stroke-width="3"/><line x1="42" y1="14" x2="42" y2="50" stroke="#cffafe" stroke-width="3"/><line x1="10" y1="37" x2="54" y2="37" stroke="#cffafe" stroke-width="3"/><path d="M44 6L46 10L50 12L46 14L44 18L42 14L38 12L42 10Z" fill="#fef9c3"/></svg></div>
<span class="icon-sizes-label">64</span>
</div>
<div class="size-col">
<div class="icon-mini ic-48 bg-sparkle"><svg viewBox="0 0 64 64" fill="none"><rect x="10" y="14" width="44" height="36" rx="4" fill="none" stroke="#cffafe" stroke-width="4"/><line x1="26" y1="14" x2="26" y2="50" stroke="#cffafe" stroke-width="3.5"/><line x1="42" y1="14" x2="42" y2="50" stroke="#cffafe" stroke-width="3.5"/><line x1="10" y1="32" x2="54" y2="32" stroke="#cffafe" stroke-width="3.5"/><path d="M44 6L46 10L50 12L46 14L44 18L42 14L38 12L42 10Z" fill="#fef9c3"/></svg></div>
<span class="icon-sizes-label">48</span>
</div>
<div class="size-col">
<div class="icon-mini ic-32 bg-sparkle"><svg viewBox="0 0 64 64" fill="none"><rect x="12" y="18" width="40" height="32" rx="4" fill="none" stroke="#cffafe" stroke-width="5"/><line x1="32" y1="18" x2="32" y2="50" stroke="#cffafe" stroke-width="5"/><line x1="12" y1="34" x2="52" y2="34" stroke="#cffafe" stroke-width="5"/><path d="M48 6L50 10L54 12L50 14L48 18L46 14L42 12L46 10Z" fill="#fef9c3"/></svg></div>
<span class="icon-sizes-label">32</span>
</div>
<div class="size-col">
<div class="icon-mini ic-16 bg-sparkle"><svg viewBox="0 0 64 64" fill="none"><rect x="16" y="20" width="32" height="28" rx="3" fill="none" stroke="#cffafe" stroke-width="7"/><path d="M50 6L52 12L58 14L52 16L50 22L48 16L42 14L48 12Z" fill="#fef9c3"/></svg></div>
<span class="icon-sizes-label">16</span>
</div>
</div>
<p class="icon-note"><strong>Literally shows the product output:</strong> a clean table, sparkle = "we cleaned this." Conveys "data tool" without ambiguity. The sparkle motif is increasingly the AI-tool default though, so it may read more "AI-adjacent" than you want.</p>
<div class="icon-tags"><span class="tag">descriptive</span><span class="tag">universal</span><span class="tag">slight-trend-risk</span></div>
</article>
<!-- ════════════════════════════════════════════════════════════
03 — LETTER D (Geist)
════════════════════════════════════════════════════════════ -->
<article class="icon-card is-pick">
<div class="icon-card-head">
<span class="icon-number">03</span>
<span class="icon-name">Letter D (sans)</span>
<span class="pick-badge">Top pick</span>
</div>
<div class="icon-hero">
<div class="icon-128 bg-letterD">
<span style="font-family: var(--font-sans); font-weight: 700; font-size: 84px; color: #fef4ed; letter-spacing: -0.04em; line-height: 1;">D</span>
</div>
</div>
<div class="icon-sizes">
<div class="size-col">
<div class="icon-mini ic-64 bg-letterD"><span style="font-family: var(--font-sans); font-weight: 700; font-size: 42px; color: #fef4ed; letter-spacing: -0.04em; line-height: 1;">D</span></div>
<span class="icon-sizes-label">64</span>
</div>
<div class="size-col">
<div class="icon-mini ic-48 bg-letterD"><span style="font-family: var(--font-sans); font-weight: 700; font-size: 32px; color: #fef4ed; letter-spacing: -0.04em; line-height: 1;">D</span></div>
<span class="icon-sizes-label">48</span>
</div>
<div class="size-col">
<div class="icon-mini ic-32 bg-letterD"><span style="font-family: var(--font-sans); font-weight: 700; font-size: 21px; color: #fef4ed; letter-spacing: -0.04em; line-height: 1;">D</span></div>
<span class="icon-sizes-label">32</span>
</div>
<div class="size-col">
<div class="icon-mini ic-16 bg-letterD"><span style="font-family: var(--font-sans); font-weight: 700; font-size: 11px; color: #fef4ed; letter-spacing: -0.04em; line-height: 1;">D</span></div>
<span class="icon-sizes-label">16</span>
</div>
</div>
<p class="icon-note"><strong>Wordmark as icon.</strong> The "D" already lives in your sidebar — extracting it as the full app icon is the lowest-risk, highest-consistency move. Ink-on-cream matches your color tokens. Looks deliberate, not decorative. <strong>This is what Linear, Vercel, and Notion do.</strong></p>
<div class="icon-tags"><span class="tag">wordmark</span><span class="tag">consistent</span><span class="tag">scalable</span></div>
</article>
<!-- ════════════════════════════════════════════════════════════
04 — STACKED ROWS
════════════════════════════════════════════════════════════ -->
<article class="icon-card">
<div class="icon-card-head">
<span class="icon-number">04</span>
<span class="icon-name">Stacked rows</span>
</div>
<div class="icon-hero">
<div class="icon-128 bg-stack">
<svg viewBox="0 0 64 64" fill="none">
<rect x="10" y="14" width="44" height="8" rx="2" fill="#fef4ed"/>
<rect x="10" y="26" width="36" height="8" rx="2" fill="#fed7aa"/>
<rect x="10" y="38" width="44" height="8" rx="2" fill="#fef4ed"/>
<circle cx="50" cy="30" r="6" fill="#fef4ed"/>
<path d="M47 30L49 32L53 28" stroke="#7c2d12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>
</div>
</div>
<div class="icon-sizes">
<div class="size-col">
<div class="icon-mini ic-64 bg-stack"><svg viewBox="0 0 64 64" fill="none"><rect x="10" y="14" width="44" height="8" rx="2" fill="#fef4ed"/><rect x="10" y="26" width="36" height="8" rx="2" fill="#fed7aa"/><rect x="10" y="38" width="44" height="8" rx="2" fill="#fef4ed"/><circle cx="50" cy="30" r="6" fill="#fef4ed"/></svg></div>
<span class="icon-sizes-label">64</span>
</div>
<div class="size-col">
<div class="icon-mini ic-48 bg-stack"><svg viewBox="0 0 64 64" fill="none"><rect x="10" y="14" width="44" height="8" rx="2" fill="#fef4ed"/><rect x="10" y="26" width="36" height="8" rx="2" fill="#fed7aa"/><rect x="10" y="38" width="44" height="8" rx="2" fill="#fef4ed"/></svg></div>
<span class="icon-sizes-label">48</span>
</div>
<div class="size-col">
<div class="icon-mini ic-32 bg-stack"><svg viewBox="0 0 64 64" fill="none"><rect x="10" y="14" width="44" height="10" rx="2" fill="#fef4ed"/><rect x="10" y="28" width="44" height="10" rx="2" fill="#fed7aa"/><rect x="10" y="42" width="32" height="10" rx="2" fill="#fef4ed"/></svg></div>
<span class="icon-sizes-label">32</span>
</div>
<div class="size-col">
<div class="icon-mini ic-16 bg-stack"><svg viewBox="0 0 64 64" fill="none"><rect x="10" y="16" width="44" height="10" rx="2" fill="#fef4ed"/><rect x="10" y="30" width="44" height="10" rx="2" fill="#fed7aa"/><rect x="10" y="44" width="44" height="10" rx="2" fill="#fef4ed"/></svg></div>
<span class="icon-sizes-label">16</span>
</div>
</div>
<p class="icon-note">Rows of data with a check on one. Clear "data + verified" reading. The check disappears at 16px so the meaning shifts — reads as generic "list" or "rows" small. Acceptable, but loses specificity at favicon size.</p>
<div class="icon-tags"><span class="tag">descriptive</span><span class="tag">loses-at-16px</span></div>
</article>
<!-- ════════════════════════════════════════════════════════════
05 — FUNNEL
════════════════════════════════════════════════════════════ -->
<article class="icon-card">
<div class="icon-card-head">
<span class="icon-number">05</span>
<span class="icon-name">Filter funnel</span>
</div>
<div class="icon-hero">
<div class="icon-128 bg-funnel">
<svg viewBox="0 0 64 64" fill="none">
<path d="M10 14H54L40 32V50L24 50V32L10 14Z" fill="#dcfce7" stroke="#dcfce7" stroke-width="2" stroke-linejoin="round"/>
<circle cx="16" cy="20" r="1.5" fill="#14532d"/>
<circle cx="22" cy="20" r="1.5" fill="#14532d"/>
<circle cx="28" cy="20" r="1.5" fill="#14532d"/>
<circle cx="36" cy="20" r="1.5" fill="#14532d"/>
<circle cx="42" cy="20" r="1.5" fill="#14532d"/>
<circle cx="48" cy="20" r="1.5" fill="#14532d"/>
<circle cx="30" cy="42" r="1.5" fill="#14532d"/>
<circle cx="34" cy="42" r="1.5" fill="#14532d"/>
</svg>
</div>
</div>
<div class="icon-sizes">
<div class="size-col">
<div class="icon-mini ic-64 bg-funnel"><svg viewBox="0 0 64 64" fill="none"><path d="M10 14H54L40 32V50L24 50V32L10 14Z" fill="#dcfce7"/><circle cx="20" cy="20" r="2" fill="#14532d"/><circle cx="32" cy="20" r="2" fill="#14532d"/><circle cx="44" cy="20" r="2" fill="#14532d"/></svg></div>
<span class="icon-sizes-label">64</span>
</div>
<div class="size-col">
<div class="icon-mini ic-48 bg-funnel"><svg viewBox="0 0 64 64" fill="none"><path d="M10 14H54L40 32V50L24 50V32L10 14Z" fill="#dcfce7"/></svg></div>
<span class="icon-sizes-label">48</span>
</div>
<div class="size-col">
<div class="icon-mini ic-32 bg-funnel"><svg viewBox="0 0 64 64" fill="none"><path d="M10 14H54L40 32V50L24 50V32L10 14Z" fill="#dcfce7"/></svg></div>
<span class="icon-sizes-label">32</span>
</div>
<div class="size-col">
<div class="icon-mini ic-16 bg-funnel"><svg viewBox="0 0 64 64" fill="none"><path d="M10 14H54L40 32V50L24 50V32L10 14Z" fill="#dcfce7"/></svg></div>
<span class="icon-sizes-label">16</span>
</div>
</div>
<p class="icon-note">Funnel = filtering = cleaning. Conceptually accurate but the funnel icon is owned by analytics tools (Mixpanel, Amplitude). Risk of category confusion. The green palette also doesn't connect to your warm-editorial direction.</p>
<div class="icon-tags"><span class="tag">category-collision</span><span class="tag">off-brand-color</span></div>
</article>
<!-- ════════════════════════════════════════════════════════════
06 — GRID + CHECK
════════════════════════════════════════════════════════════ -->
<article class="icon-card">
<div class="icon-card-head">
<span class="icon-number">06</span>
<span class="icon-name">Grid + check</span>
</div>
<div class="icon-hero">
<div class="icon-128 bg-gridcheck">
<svg viewBox="0 0 64 64" fill="none">
<rect x="10" y="10" width="14" height="14" rx="3" fill="#9a3412"/>
<rect x="28" y="10" width="14" height="14" rx="3" fill="#9a3412"/>
<rect x="10" y="28" width="14" height="14" rx="3" fill="#9a3412" opacity="0.4"/>
<rect x="28" y="28" width="14" height="14" rx="3" fill="#9a3412"/>
<circle cx="48" cy="44" r="14" fill="#9a3412"/>
<path d="M42 44L46 48L54 40" stroke="#fef4ed" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>
</div>
</div>
<div class="icon-sizes">
<div class="size-col">
<div class="icon-mini ic-64 bg-gridcheck"><svg viewBox="0 0 64 64" fill="none"><rect x="10" y="10" width="14" height="14" rx="3" fill="#9a3412"/><rect x="28" y="10" width="14" height="14" rx="3" fill="#9a3412"/><rect x="10" y="28" width="14" height="14" rx="3" fill="#9a3412" opacity="0.4"/><rect x="28" y="28" width="14" height="14" rx="3" fill="#9a3412"/><circle cx="48" cy="44" r="14" fill="#9a3412"/><path d="M42 44L46 48L54 40" stroke="#fef4ed" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
<span class="icon-sizes-label">64</span>
</div>
<div class="size-col">
<div class="icon-mini ic-48 bg-gridcheck"><svg viewBox="0 0 64 64" fill="none"><rect x="10" y="10" width="14" height="14" rx="3" fill="#9a3412"/><rect x="28" y="10" width="14" height="14" rx="3" fill="#9a3412"/><rect x="10" y="28" width="14" height="14" rx="3" fill="#9a3412" opacity="0.4"/><rect x="28" y="28" width="14" height="14" rx="3" fill="#9a3412"/><circle cx="48" cy="44" r="14" fill="#9a3412"/><path d="M42 44L46 48L54 40" stroke="#fef4ed" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
<span class="icon-sizes-label">48</span>
</div>
<div class="size-col">
<div class="icon-mini ic-32 bg-gridcheck"><svg viewBox="0 0 64 64" fill="none"><rect x="8" y="8" width="18" height="18" rx="3" fill="#9a3412"/><rect x="30" y="8" width="18" height="18" rx="3" fill="#9a3412"/><rect x="8" y="30" width="18" height="18" rx="3" fill="#9a3412" opacity="0.4"/><circle cx="42" cy="42" r="14" fill="#9a3412"/><path d="M36 42L40 46L48 38" stroke="#fef4ed" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
<span class="icon-sizes-label">32</span>
</div>
<div class="size-col">
<div class="icon-mini ic-16 bg-gridcheck"><svg viewBox="0 0 64 64" fill="none"><circle cx="32" cy="32" r="22" fill="#9a3412"/><path d="M22 32L29 39L42 24" stroke="#fef4ed" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg></div>
<span class="icon-sizes-label">16</span>
</div>
</div>
<p class="icon-note">Cells of data with one "validated." Composition is too busy — three elements competing at small sizes. Falls back to just a checkmark at 16px, which is generic. Skip unless you specifically want the cells-of-data motif.</p>
<div class="icon-tags"><span class="tag">too-busy</span><span class="tag">degrades-at-16px</span></div>
</article>
<!-- ════════════════════════════════════════════════════════════
07 — SIEVE
════════════════════════════════════════════════════════════ -->
<article class="icon-card">
<div class="icon-card-head">
<span class="icon-number">07</span>
<span class="icon-name">Sift / sieve</span>
</div>
<div class="icon-hero">
<div class="icon-128 bg-sieve">
<svg viewBox="0 0 64 64" fill="none">
<path d="M14 18C14 14 18 12 22 12H42C46 12 50 14 50 18V22C50 30 42 36 32 36C22 36 14 30 14 22Z" fill="none" stroke="#fed7aa" stroke-width="3" stroke-linejoin="round"/>
<line x1="20" y1="18" x2="44" y2="18" stroke="#fed7aa" stroke-width="2"/>
<line x1="18" y1="24" x2="46" y2="24" stroke="#fed7aa" stroke-width="2"/>
<line x1="22" y1="30" x2="42" y2="30" stroke="#fed7aa" stroke-width="2"/>
<circle cx="28" cy="46" r="2" fill="#fed7aa"/>
<circle cx="36" cy="50" r="2" fill="#fed7aa"/>
<circle cx="30" cy="54" r="2" fill="#fed7aa"/>
<line x1="22" y1="36" x2="20" y2="42" stroke="#fed7aa" stroke-width="1.5" stroke-linecap="round"/>
<line x1="32" y1="36" x2="32" y2="42" stroke="#fed7aa" stroke-width="1.5" stroke-linecap="round"/>
<line x1="42" y1="36" x2="44" y2="42" stroke="#fed7aa" stroke-width="1.5" stroke-linecap="round"/>
</svg>
</div>
</div>
<div class="icon-sizes">
<div class="size-col">
<div class="icon-mini ic-64 bg-sieve"><svg viewBox="0 0 64 64" fill="none"><path d="M14 18C14 14 18 12 22 12H42C46 12 50 14 50 18V22C50 30 42 36 32 36C22 36 14 30 14 22Z" fill="none" stroke="#fed7aa" stroke-width="4"/><line x1="20" y1="20" x2="44" y2="20" stroke="#fed7aa" stroke-width="2.5"/><line x1="22" y1="28" x2="42" y2="28" stroke="#fed7aa" stroke-width="2.5"/><circle cx="30" cy="48" r="2" fill="#fed7aa"/><circle cx="36" cy="54" r="2" fill="#fed7aa"/></svg></div>
<span class="icon-sizes-label">64</span>
</div>
<div class="size-col">
<div class="icon-mini ic-48 bg-sieve"><svg viewBox="0 0 64 64" fill="none"><path d="M14 18C14 14 18 12 22 12H42C46 12 50 14 50 18V22C50 30 42 36 32 36C22 36 14 30 14 22Z" fill="none" stroke="#fed7aa" stroke-width="5"/><line x1="22" y1="22" x2="42" y2="22" stroke="#fed7aa" stroke-width="3"/></svg></div>
<span class="icon-sizes-label">48</span>
</div>
<div class="size-col">
<div class="icon-mini ic-32 bg-sieve"><svg viewBox="0 0 64 64" fill="none"><path d="M14 18C14 14 18 12 22 12H42C46 12 50 14 50 18V22C50 30 42 36 32 36C22 36 14 30 14 22Z" fill="none" stroke="#fed7aa" stroke-width="6"/></svg></div>
<span class="icon-sizes-label">32</span>
</div>
<div class="size-col">
<div class="icon-mini ic-16 bg-sieve"><svg viewBox="0 0 64 64" fill="none"><path d="M14 22C14 16 22 14 32 14C42 14 50 16 50 22C50 32 42 38 32 38C22 38 14 32 14 22Z" fill="none" stroke="#fed7aa" stroke-width="8"/></svg></div>
<span class="icon-sizes-label">16</span>
</div>
</div>
<p class="icon-note">Sieve = separating clean from dirty. Conceptually strong, visually weak. Reads as "bowl" or "U-shape" at small sizes. Requires explanation. Not recommended.</p>
<div class="icon-tags"><span class="tag">conceptually-right</span><span class="tag">reads-poorly</span></div>
</article>
<!-- ════════════════════════════════════════════════════════════
08 — D SERIF (Fraunces)
════════════════════════════════════════════════════════════ -->
<article class="icon-card">
<div class="icon-card-head">
<span class="icon-number">08</span>
<span class="icon-name">Letter D (serif)</span>
</div>
<div class="icon-hero">
<div class="icon-128 bg-dserif">
<span style="font-family: var(--font-display); font-weight: 600; font-size: 96px; color: #1c1917; letter-spacing: -0.03em; line-height: 1; font-variation-settings: 'opsz' 144;">D</span>
</div>
</div>
<div class="icon-sizes">
<div class="size-col">
<div class="icon-mini ic-64 bg-dserif"><span style="font-family: var(--font-display); font-weight: 600; font-size: 48px; color: #1c1917; letter-spacing: -0.03em; line-height: 1; font-variation-settings: 'opsz' 96;">D</span></div>
<span class="icon-sizes-label">64</span>
</div>
<div class="size-col">
<div class="icon-mini ic-48 bg-dserif"><span style="font-family: var(--font-display); font-weight: 600; font-size: 36px; color: #1c1917; letter-spacing: -0.03em; line-height: 1; font-variation-settings: 'opsz' 72;">D</span></div>
<span class="icon-sizes-label">48</span>
</div>
<div class="size-col">
<div class="icon-mini ic-32 bg-dserif"><span style="font-family: var(--font-display); font-weight: 600; font-size: 24px; color: #1c1917; letter-spacing: -0.03em; line-height: 1; font-variation-settings: 'opsz' 48;">D</span></div>
<span class="icon-sizes-label">32</span>
</div>
<div class="size-col">
<div class="icon-mini ic-16 bg-dserif"><span style="font-family: var(--font-display); font-weight: 600; font-size: 13px; color: #1c1917; letter-spacing: -0.03em; line-height: 1; font-variation-settings: 'opsz' 24;">D</span></div>
<span class="icon-sizes-label">16</span>
</div>
</div>
<p class="icon-note">Fraunces "D" on cream. Editorial, distinctive, premium. Loses contrast at 16px (cream-on-cream desktop wallpapers vanish). Better as a wordmark in marketing than as an OS icon. Pick if you're going Fraunces direction and want full brand consistency.</p>
<div class="icon-tags"><span class="tag">editorial</span><span class="tag">low-contrast-risk</span></div>
</article>
<!-- ════════════════════════════════════════════════════════════
09 — MAGNIFIER ON DATA
════════════════════════════════════════════════════════════ -->
<article class="icon-card">
<div class="icon-card-head">
<span class="icon-number">09</span>
<span class="icon-name">Inspect / magnify</span>
</div>
<div class="icon-hero">
<div class="icon-128 bg-mag">
<svg viewBox="0 0 64 64" fill="none">
<rect x="10" y="14" width="34" height="34" rx="4" fill="#fed7aa" opacity="0.4"/>
<line x1="14" y1="22" x2="40" y2="22" stroke="#fef4ed" stroke-width="2"/>
<line x1="14" y1="30" x2="40" y2="30" stroke="#fef4ed" stroke-width="2"/>
<line x1="14" y1="38" x2="40" y2="38" stroke="#fef4ed" stroke-width="2"/>
<circle cx="40" cy="40" r="14" fill="#fef4ed" stroke="#fef4ed" stroke-width="3"/>
<circle cx="40" cy="40" r="9" fill="none" stroke="#c2410c" stroke-width="3"/>
<line x1="48" y1="48" x2="56" y2="56" stroke="#fef4ed" stroke-width="4" stroke-linecap="round"/>
</svg>
</div>
</div>
<div class="icon-sizes">
<div class="size-col">
<div class="icon-mini ic-64 bg-mag"><svg viewBox="0 0 64 64" fill="none"><rect x="10" y="14" width="34" height="34" rx="4" fill="#fed7aa" opacity="0.4"/><line x1="14" y1="24" x2="40" y2="24" stroke="#fef4ed" stroke-width="2.5"/><line x1="14" y1="34" x2="40" y2="34" stroke="#fef4ed" stroke-width="2.5"/><circle cx="40" cy="40" r="14" fill="#fef4ed" stroke="#fef4ed" stroke-width="3"/><circle cx="40" cy="40" r="9" fill="none" stroke="#c2410c" stroke-width="3"/><line x1="48" y1="48" x2="56" y2="56" stroke="#fef4ed" stroke-width="5" stroke-linecap="round"/></svg></div>
<span class="icon-sizes-label">64</span>
</div>
<div class="size-col">
<div class="icon-mini ic-48 bg-mag"><svg viewBox="0 0 64 64" fill="none"><circle cx="32" cy="30" r="18" fill="none" stroke="#fef4ed" stroke-width="6"/><line x1="46" y1="44" x2="56" y2="54" stroke="#fef4ed" stroke-width="6" stroke-linecap="round"/></svg></div>
<span class="icon-sizes-label">48</span>
</div>
<div class="size-col">
<div class="icon-mini ic-32 bg-mag"><svg viewBox="0 0 64 64" fill="none"><circle cx="30" cy="28" r="18" fill="none" stroke="#fef4ed" stroke-width="7"/><line x1="44" y1="42" x2="54" y2="52" stroke="#fef4ed" stroke-width="7" stroke-linecap="round"/></svg></div>
<span class="icon-sizes-label">32</span>
</div>
<div class="size-col">
<div class="icon-mini ic-16 bg-mag"><svg viewBox="0 0 64 64" fill="none"><circle cx="28" cy="28" r="18" fill="none" stroke="#fef4ed" stroke-width="9"/><line x1="42" y1="42" x2="52" y2="52" stroke="#fef4ed" stroke-width="9" stroke-linecap="round"/></svg></div>
<span class="icon-sizes-label">16</span>
</div>
</div>
<p class="icon-note">Magnifier + data rows. Degrades into "just a magnifying glass" at 16px — which means it reads as "search" not "data cleaning." Wrong category signal at the small sizes that matter most.</p>
<div class="icon-tags"><span class="tag">degrades-wrong</span><span class="tag">reads-as-search</span></div>
</article>
<!-- ════════════════════════════════════════════════════════════
10 — DATA FLOW
════════════════════════════════════════════════════════════ -->
<article class="icon-card">
<div class="icon-card-head">
<span class="icon-number">10</span>
<span class="icon-name">Flow / pipeline</span>
</div>
<div class="icon-hero">
<div class="icon-128 bg-flow">
<svg viewBox="0 0 64 64" fill="none">
<circle cx="14" cy="20" r="6" fill="#fed7aa"/>
<circle cx="14" cy="44" r="6" fill="#fed7aa" opacity="0.6"/>
<path d="M22 24Q32 24 32 32Q32 40 22 40" stroke="#fed7aa" stroke-width="2.5" fill="none" stroke-linecap="round"/>
<path d="M22 16Q32 16 32 32" stroke="#fed7aa" stroke-width="2.5" fill="none" stroke-linecap="round" opacity="0.5"/>
<rect x="32" y="26" width="16" height="12" rx="2" fill="#fef4ed"/>
<circle cx="54" cy="32" r="6" fill="#fef4ed"/>
<path d="M51 32L53 34L57 30" stroke="#7c2d12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>
</div>
</div>
<div class="icon-sizes">
<div class="size-col">
<div class="icon-mini ic-64 bg-flow"><svg viewBox="0 0 64 64" fill="none"><circle cx="14" cy="20" r="6" fill="#fed7aa"/><circle cx="14" cy="44" r="6" fill="#fed7aa"/><rect x="30" y="26" width="16" height="12" rx="2" fill="#fef4ed"/><circle cx="54" cy="32" r="6" fill="#fef4ed"/></svg></div>
<span class="icon-sizes-label">64</span>
</div>
<div class="size-col">
<div class="icon-mini ic-48 bg-flow"><svg viewBox="0 0 64 64" fill="none"><circle cx="14" cy="20" r="6" fill="#fed7aa"/><circle cx="14" cy="44" r="6" fill="#fed7aa"/><circle cx="50" cy="32" r="6" fill="#fef4ed"/></svg></div>
<span class="icon-sizes-label">48</span>
</div>
<div class="size-col">
<div class="icon-mini ic-32 bg-flow"><svg viewBox="0 0 64 64" fill="none"><circle cx="16" cy="22" r="8" fill="#fed7aa"/><circle cx="48" cy="42" r="8" fill="#fef4ed"/></svg></div>
<span class="icon-sizes-label">32</span>
</div>
<div class="size-col">
<div class="icon-mini ic-16 bg-flow"><svg viewBox="0 0 64 64" fill="none"><circle cx="20" cy="32" r="10" fill="#fed7aa"/><circle cx="44" cy="32" r="10" fill="#fef4ed"/></svg></div>
<span class="icon-sizes-label">16</span>
</div>
</div>
<p class="icon-note">Many inputs → cleaning step → clean output. Pipeline metaphor. Too much information at small sizes; degrades to "two dots." Better as an explainer diagram than as an app icon.</p>
<div class="icon-tags"><span class="tag">conceptual</span><span class="tag">too-detailed</span></div>
</article>
<!-- ════════════════════════════════════════════════════════════
11 — CUBE / GEOMETRIC
════════════════════════════════════════════════════════════ -->
<article class="icon-card">
<div class="icon-card-head">
<span class="icon-number">11</span>
<span class="icon-name">Stacked cube</span>
</div>
<div class="icon-hero">
<div class="icon-128 bg-cube">
<svg viewBox="0 0 64 64" fill="none">
<path d="M32 12L52 22V42L32 52L12 42V22Z" fill="#fdba74" stroke="#7c2d12" stroke-width="2.5" stroke-linejoin="round"/>
<path d="M32 12L52 22L32 32L12 22Z" fill="#fed7aa" stroke="#7c2d12" stroke-width="2.5" stroke-linejoin="round"/>
<line x1="32" y1="32" x2="32" y2="52" stroke="#7c2d12" stroke-width="2.5"/>
</svg>
</div>
</div>
<div class="icon-sizes">
<div class="size-col">
<div class="icon-mini ic-64 bg-cube"><svg viewBox="0 0 64 64" fill="none"><path d="M32 12L52 22V42L32 52L12 42V22Z" fill="#fdba74" stroke="#7c2d12" stroke-width="3" stroke-linejoin="round"/><path d="M32 12L52 22L32 32L12 22Z" fill="#fed7aa" stroke="#7c2d12" stroke-width="3" stroke-linejoin="round"/><line x1="32" y1="32" x2="32" y2="52" stroke="#7c2d12" stroke-width="3"/></svg></div>
<span class="icon-sizes-label">64</span>
</div>
<div class="size-col">
<div class="icon-mini ic-48 bg-cube"><svg viewBox="0 0 64 64" fill="none"><path d="M32 12L52 22V42L32 52L12 42V22Z" fill="#fdba74" stroke="#7c2d12" stroke-width="3.5" stroke-linejoin="round"/><path d="M32 12L52 22L32 32L12 22Z" fill="#fed7aa" stroke="#7c2d12" stroke-width="3.5" stroke-linejoin="round"/></svg></div>
<span class="icon-sizes-label">48</span>
</div>
<div class="size-col">
<div class="icon-mini ic-32 bg-cube"><svg viewBox="0 0 64 64" fill="none"><path d="M32 12L52 22V42L32 52L12 42V22Z" fill="#fdba74" stroke="#7c2d12" stroke-width="4.5" stroke-linejoin="round"/></svg></div>
<span class="icon-sizes-label">32</span>
</div>
<div class="size-col">
<div class="icon-mini ic-16 bg-cube"><svg viewBox="0 0 64 64" fill="none"><path d="M32 10L54 22V42L32 54L10 42V22Z" fill="#fdba74" stroke="#7c2d12" stroke-width="7" stroke-linejoin="round"/></svg></div>
<span class="icon-sizes-label">16</span>
</div>
</div>
<p class="icon-note">Abstract hex/cube. Reads as "tech tool" or "database" but not specifically data cleaning. Generic. Already used by too many products (CockroachDB, several blockchain logos). Skip.</p>
<div class="icon-tags"><span class="tag">generic</span><span class="tag">collision-risk</span></div>
</article>
<!-- ════════════════════════════════════════════════════════════
12 — SWEEP ARC
════════════════════════════════════════════════════════════ -->
<article class="icon-card">
<div class="icon-card-head">
<span class="icon-number">12</span>
<span class="icon-name">Sweep arc</span>
</div>
<div class="icon-hero">
<div class="icon-128 bg-sweep">
<svg viewBox="0 0 64 64" fill="none">
<path d="M12 48C12 28 28 12 48 12" stroke="#7c2d12" stroke-width="5" stroke-linecap="round" fill="none"/>
<circle cx="14" cy="46" r="3" fill="#7c2d12" opacity="0.5"/>
<circle cx="20" cy="44" r="2.5" fill="#7c2d12" opacity="0.4"/>
<circle cx="26" cy="40" r="2" fill="#7c2d12" opacity="0.3"/>
<circle cx="48" cy="12" r="6" fill="#7c2d12"/>
<circle cx="48" cy="12" r="2.5" fill="#fed7aa"/>
</svg>
</div>
</div>
<div class="icon-sizes">
<div class="size-col">
<div class="icon-mini ic-64 bg-sweep"><svg viewBox="0 0 64 64" fill="none"><path d="M12 48C12 28 28 12 48 12" stroke="#7c2d12" stroke-width="6" stroke-linecap="round" fill="none"/><circle cx="48" cy="12" r="6" fill="#7c2d12"/></svg></div>
<span class="icon-sizes-label">64</span>
</div>
<div class="size-col">
<div class="icon-mini ic-48 bg-sweep"><svg viewBox="0 0 64 64" fill="none"><path d="M12 48C12 28 28 12 48 12" stroke="#7c2d12" stroke-width="7" stroke-linecap="round" fill="none"/><circle cx="48" cy="12" r="6" fill="#7c2d12"/></svg></div>
<span class="icon-sizes-label">48</span>
</div>
<div class="size-col">
<div class="icon-mini ic-32 bg-sweep"><svg viewBox="0 0 64 64" fill="none"><path d="M12 48C12 28 28 12 48 12" stroke="#7c2d12" stroke-width="9" stroke-linecap="round" fill="none"/></svg></div>
<span class="icon-sizes-label">32</span>
</div>
<div class="size-col">
<div class="icon-mini ic-16 bg-sweep"><svg viewBox="0 0 64 64" fill="none"><path d="M12 48C12 28 28 12 48 12" stroke="#7c2d12" stroke-width="12" stroke-linecap="round" fill="none"/></svg></div>
<span class="icon-sizes-label">16</span>
</div>
</div>
<p class="icon-note">Arc + trailing particles = motion of cleaning. Most abstract option, most differentiated. Risk: too abstract to communicate "data tool" without context. Works well at 16px because the arc shape is preserved.</p>
<div class="icon-tags"><span class="tag">abstract</span><span class="tag">differentiated</span></div>
</article>
</div>
<aside class="recap">
<h2 class="recap-title">If you have ten seconds</h2>
<p><strong>Pick 03 (Letter D, Geist).</strong> Lowest risk, highest consistency, scales perfectly, makes your sidebar mark and your OS icon the same asset. This is the operationally correct answer.</p>
<p><strong>Pick 01 (Broom)</strong> if you want personality and the slight emoji-association doesn't bother you. It's already half-implemented (the README emoji).</p>
<p><strong>Pick 02 (Sparkle table)</strong> if you want the icon to say what the product does at a glance, even to a buyer who has never heard of you. Accept the AI-tool aesthetic risk.</p>
<p style="margin-top:14px;border-top:1px solid rgba(124,45,18,0.2);padding-top:14px;">Avoid all the rest. They either degrade poorly at 16px, collide with existing product categories (funnel = analytics, magnifier = search, cube = database), or are too abstract to communicate anything.</p>
</aside>
</main>
</body>
</html>