Icons are the vocabulary of user interfaces. A trash can means delete. A pencil means edit. A magnifying glass means search. Without icons, every action needs a text label. With icons, the interface communicates instantly, crossing language barriers -- particularly important for a language built in Abidjan for developers across Africa.
Sessions 049 and 209 integrated a complete icon library into FlinUI. Over 1,000 icons from the Lucide icon set, rendered as inline SVG, available with the same zero-import philosophy as every other FlinUI component. No font files to load. No icon sprite sheets to configure. Just
The Icon Component <Icon name="home" />
<Icon name="user" size={24} />
<Icon name="check" color="green" />
<Icon name="alert-triangle" size={20} color="warning" />
<Icon name="settings" size={32} stroke_width={1.5} />The Icon component accepts four props:
Prop Type Default Description nametext required Icon name from the Lucide set sizeint 24 Width and height in pixels colortext "currentColor" Fill/stroke color stroke_widthfloat 2 SVG stroke width
Using "currentColor" as the default color means icons inherit their color from the surrounding text. An icon inside a
Why Lucide We evaluated four icon libraries:
Library Icons Size License Style Feather 287 24KB MIT Minimal stroke Heroicons 292 35KB MIT Solid and outline Font Awesome 7,800+ 400KB+ Mixed (free/pro) Varied Lucide 1,000+ 150KB ISC Clean stroke
Lucide won on three criteria:
Coverage. 1,000+ icons cover every common UI need. Feather and Heroicons, while beautifully designed, are missing icons for many domains (finance, medical, education, e-commerce).
License. Lucide uses the ISC license -- permissive, simple, and compatible with any use. Font Awesome's dual-license model (free tier plus paid pro tier) would create confusion for FLIN developers.
Design consistency. Every Lucide icon uses the same 24x24 grid, 2px stroke width, and rounded line caps. They look uniform when mixed, which is essential for a component library where icons appear in buttons, navigation items, form labels, and status indicators.
Lineage. Lucide is a fork of Feather Icons with active community development. It inherits Feather's exceptional design quality while adding the breadth that Feather lacks.
Integration Architecture Icons are stored as SVG path data in a registry file. When
// Icon.flin (simplified)
name = props.name
size = props.size || 24
color = props.color || "currentColor"
stroke = props.stroke_width || 2// Look up the SVG path data
path_data = icon_registry[name]
{if path_data != none}
{path_data}
{else}
?
{/if}
```
The icon_registry is a map from icon names to SVG path strings. For the "home" icon:
icon_registry["home"] = '<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/>'The
Inline SVG vs. Icon Fonts FlinUI renders icons as inline SVG rather than using icon fonts (like Font Awesome's webfont approach). The reasons:
Scalability. Inline SVG scales perfectly at any size. Icon fonts can produce blurry edges at non-standard sizes because the browser's text rendering engine is optimized for text, not icons.
Color control. Inline SVG supports stroke and fill independently. Icon fonts render as text glyphs and can only be colored with color -- you cannot have a two-tone icon with a font.
No flash of invisible text. Icon fonts require a font file download. Until the font loads, icons are invisible (FOIT -- Flash of Invisible Text) or display as unicode squares. Inline SVG renders immediately because the path data is embedded in the HTML.
Tree shaking. When using inline SVG, only the icons actually used in the application are included. With an icon font, the entire font file (containing all icons) must be downloaded even if the application uses only five icons.
Accessibility. Inline SVG can include </code> and <code class="rounded-md bg-dark-100 dark:bg-dark-800 px-1.5 py-0.5 font-dm-mono text-sm text-dark-700 dark:text-dark-300">aria-label</code> attributes for screen readers. Icon fonts are invisible to assistive technology unless wrapped in additional ARIA markup.</p><h2 id="icon-categories" class="font-jost text-2xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100 mt-12 mb-5 scroll-mt-24">Icon Categories</h2><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">The 1,000+ Lucide icons are organized by domain:</p><pre class="glass-card rounded-xl p-4 my-6 overflow-x-auto font-dm-mono text-sm text-dark-700 dark:text-dark-300"><code>Navigation: home, menu, arrow-left, arrow-right, chevron-down, external-link
Actions: plus, minus, x, check, edit, trash, copy, save, download, upload
Communication: mail, phone, message-circle, send, bell, at-sign
Media: play, pause, volume, camera, image, film, music
Files: file, folder, archive, clipboard, paperclip
Users: user, users, user-plus, user-minus, user-check
Data: bar-chart, pie-chart, trending-up, activity, database
Development: code, terminal, git-branch, bug, cpu, server
Commerce: shopping-cart, credit-card, dollar-sign, package, truck
Social: github, twitter, facebook, instagram, linkedin
Misc: settings, search, filter, globe, map, clock, calendar, star</code></pre><h2 id="using-icons-in-components" class="font-jost text-2xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100 mt-12 mb-5 scroll-mt-24">Using Icons in Components</h2><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">Icons integrate naturally with other FlinUI components:</p><pre class="glass-card rounded-xl p-4 my-6 overflow-x-auto font-dm-mono text-sm text-dark-700 dark:text-dark-300"><code>// Button with icon
<Button variant="primary">
<Icon name="save" size={16} /> Save
</Button></code></pre><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">// Navigation with icons
<Sidebar>
<SidebarItem icon="home" href="/">Dashboard</SidebarItem>
<SidebarItem icon="users" href="/users">Users</SidebarItem>
<SidebarItem icon="shopping-cart" href="/orders">Orders</SidebarItem>
<SidebarItem icon="settings" href="/settings">Settings</SidebarItem>
</Sidebar></p><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">// Alert with icon
<Alert variant="warning">
<Icon name="alert-triangle" /> This action cannot be undone.
</Alert></p><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">// Empty state with large icon
<Center>
<Stack align="center" gap={4}>
<Icon name="inbox" size={48} color="muted" />
<Text size="lg" color="muted">No messages</Text>
</Stack>
</Center>
```</p><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">Many FlinUI components accept an <code class="rounded-md bg-dark-100 dark:bg-dark-800 px-1.5 py-0.5 font-dm-mono text-sm text-dark-700 dark:text-dark-300">icon</code> prop directly, handling the <code class="rounded-md bg-dark-100 dark:bg-dark-800 px-1.5 py-0.5 font-dm-mono text-sm text-dark-700 dark:text-dark-300"><Icon></code> rendering internally:</p><pre class="glass-card rounded-xl p-4 my-6 overflow-x-auto font-dm-mono text-sm text-dark-700 dark:text-dark-300"><code>// The icon prop is a shorthand
<SidebarItem icon="home">Dashboard</SidebarItem></code></pre><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">// Equivalent to
<SidebarItem>
<Icon name="home" size={20} /> Dashboard
</SidebarItem>
```</p><h2 id="string-method-integration" class="font-jost text-2xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100 mt-12 mb-5 scroll-mt-24">String Method Integration</h2><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">Session 050's string methods play a role in icon handling. The <code class="rounded-md bg-dark-100 dark:bg-dark-800 px-1.5 py-0.5 font-dm-mono text-sm text-dark-700 dark:text-dark-300">starts_with</code> and <code class="rounded-md bg-dark-100 dark:bg-dark-800 px-1.5 py-0.5 font-dm-mono text-sm text-dark-700 dark:text-dark-300">remove_prefix</code> methods enable icon namespace detection:</p><pre class="glass-card rounded-xl p-4 my-6 overflow-x-auto font-dm-mono text-sm text-dark-700 dark:text-dark-300"><code>// Some components need to detect icon prefixes
fn resolve_icon(icon_name: text) {
{if icon_name.starts_with("lucide-")}
return icon_name.remove_prefix("lucide-")
{else if icon_name.starts_with("custom-")}
return lookup_custom_icon(icon_name.remove_prefix("custom-"))
{else}
return icon_name
{/if}
}</code></pre><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">This pattern enables extensibility -- developers can add custom icon sets with a namespace prefix, and the icon system resolves them alongside the built-in Lucide icons.</p><h2 id="performance-icon-registry-size" class="font-jost text-2xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100 mt-12 mb-5 scroll-mt-24">Performance: Icon Registry Size</h2><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">The complete Lucide icon registry (1,000+ icons as SVG path strings) is approximately 150KB of FLIN source. Compiled into bytecode, it is approximately 80KB. This is loaded once when the application starts and shared across all icon references.</p><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">For comparison:
- Lucide as a JavaScript library: ~290KB (all icons)
- Lucide as a web font: ~180KB
- Font Awesome Free font: ~400KB
- FlinUI icon registry: ~80KB (compiled)</p><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">The registry is smaller than the alternatives because it stores only the SVG path data -- no JavaScript module wrappers, no font metadata, no glyph tables. Just the raw coordinates that define each icon's shape.</p><h2 id="custom-icons" class="font-jost text-2xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100 mt-12 mb-5 scroll-mt-24">Custom Icons</h2><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">Developers can add custom icons to the registry:</p><pre class="glass-card rounded-xl p-4 my-6 overflow-x-auto font-dm-mono text-sm text-dark-700 dark:text-dark-300"><code>// Register a custom icon
register_icon("my-logo", '<circle cx="12" cy="12" r="10"/><path d="M12 6v12M6 12h12"/>')</code></pre><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">// Use it like any other icon
<Icon name="my-logo" size={32} color="primary" />
```</p><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5"><code class="rounded-md bg-dark-100 dark:bg-dark-800 px-1.5 py-0.5 font-dm-mono text-sm text-dark-700 dark:text-dark-300">register_icon</code> adds an entry to the icon registry. The custom icon is then available everywhere in the application, with the same props (size, color, stroke_width) as built-in icons.</p><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">For complete icon sets, a <code class="rounded-md bg-dark-100 dark:bg-dark-800 px-1.5 py-0.5 font-dm-mono text-sm text-dark-700 dark:text-dark-300">.flin</code> file can register all icons at once:</p><pre class="glass-card rounded-xl p-4 my-6 overflow-x-auto font-dm-mono text-sm text-dark-700 dark:text-dark-300"><code>// custom-icons.flin
register_icon("brand-logo", '<path d="..."/>')
register_icon("brand-icon-1", '<path d="..."/>')
register_icon("brand-icon-2", '<path d="..."/>')</code></pre><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">This file is automatically discovered by the component system (if placed in a search path) and executed on startup. No import needed -- just drop the file in the project.</p><h2 id="one-thousand-icons-zero-configuration" class="font-jost text-2xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100 mt-12 mb-5 scroll-mt-24">One Thousand Icons, Zero Configuration</h2><h2 id="accessibility-icons-that-speak" class="font-jost text-2xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100 mt-12 mb-5 scroll-mt-24">Accessibility: Icons That Speak</h2><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">Icons need to be accessible. A sighted user sees a trash can and understands "delete." A screen reader user hears nothing unless the icon has an accessible label.</p><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">FlinUI's Icon component handles this automatically:</p><pre class="glass-card rounded-xl p-4 my-6 overflow-x-auto font-dm-mono text-sm text-dark-700 dark:text-dark-300"><code>// Decorative icon (next to text, no label needed)
<Button><Icon name="save" size={16} /> Save</Button>
// The button text "Save" provides the accessible name</code></pre><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">// Standalone icon (no text, needs label)
<button click={delete_item} aria-label="Delete item">
<Icon name="trash" size={20} />
</button></p><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">// Icon with explicit title
<Icon name="info" size={16} title="More information" />
// Adds <title> element inside SVG for screen readers
```</p><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">When the <code class="rounded-md bg-dark-100 dark:bg-dark-800 px-1.5 py-0.5 font-dm-mono text-sm text-dark-700 dark:text-dark-300">title</code> prop is provided, the Icon component adds a <code class="rounded-md bg-dark-100 dark:bg-dark-800 px-1.5 py-0.5 font-dm-mono text-sm text-dark-700 dark:text-dark-300"><title></code> element inside the SVG and an <code class="rounded-md bg-dark-100 dark:bg-dark-800 px-1.5 py-0.5 font-dm-mono text-sm text-dark-700 dark:text-dark-300">aria-labelledby</code> attribute referencing it. Screen readers announce the title text when the icon receives focus.</p><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">For decorative icons (icons that appear next to text and do not carry independent meaning), the SVG includes <code class="rounded-md bg-dark-100 dark:bg-dark-800 px-1.5 py-0.5 font-dm-mono text-sm text-dark-700 dark:text-dark-300">aria-hidden="true"</code> to prevent screen readers from announcing the SVG structure. This is set automatically when no <code class="rounded-md bg-dark-100 dark:bg-dark-800 px-1.5 py-0.5 font-dm-mono text-sm text-dark-700 dark:text-dark-300">title</code> prop is provided.</p><h2 id="the-icon-search-problem" class="font-jost text-2xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100 mt-12 mb-5 scroll-mt-24">The Icon Search Problem</h2><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">With 1,000+ icons, finding the right one is a challenge. What is the icon for "calendar"? Is it <code class="rounded-md bg-dark-100 dark:bg-dark-800 px-1.5 py-0.5 font-dm-mono text-sm text-dark-700 dark:text-dark-300">calendar</code>, <code class="rounded-md bg-dark-100 dark:bg-dark-800 px-1.5 py-0.5 font-dm-mono text-sm text-dark-700 dark:text-dark-300">calendar-days</code>, <code class="rounded-md bg-dark-100 dark:bg-dark-800 px-1.5 py-0.5 font-dm-mono text-sm text-dark-700 dark:text-dark-300">calendar-check</code>, or <code class="rounded-md bg-dark-100 dark:bg-dark-800 px-1.5 py-0.5 font-dm-mono text-sm text-dark-700 dark:text-dark-300">calendar-range</code>? For the FlinUI documentation site, we built an interactive icon browser:</p><pre class="glass-card rounded-xl p-4 my-6 overflow-x-auto font-dm-mono text-sm text-dark-700 dark:text-dark-300"><code>search = ""
filtered = icon_names.where(name => name.contains(search.lower))</code></pre><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5"><Input value={search} placeholder="Search icons..." />
<Grid cols={6} cols_md={8} cols_lg={10} gap={2}>
{for name in filtered.take(100)}
<Stack align="center" gap={1}>
<Icon name={name} size={24} />
<Text size="xs" color="muted">{name}</Text>
</Stack>
{/for}
</Grid>
```</p><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">This component searches across all icon names in real-time. Type "arrow" and you see all 20+ arrow variants. Type "chart" and you see all chart-related icons. The filter uses FLIN's built-in <code class="rounded-md bg-dark-100 dark:bg-dark-800 px-1.5 py-0.5 font-dm-mono text-sm text-dark-700 dark:text-dark-300">where</code> and <code class="rounded-md bg-dark-100 dark:bg-dark-800 px-1.5 py-0.5 font-dm-mono text-sm text-dark-700 dark:text-dark-300">contains</code> methods -- no search library needed.</p><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">Over 1,000 icons. Inline SVG rendering. Scalable to any size. Colorable with any token. Accessible with aria labels. Tree-shaken to include only used icons. Available with <code class="rounded-md bg-dark-100 dark:bg-dark-800 px-1.5 py-0.5 font-dm-mono text-sm text-dark-700 dark:text-dark-300"><Icon name="..." /></code> and nothing else.</p><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">Icons are the most frequently used visual element in web applications after text. Making them available without configuration, without downloads, without build steps is one of the decisions that makes FlinUI feel like it was designed for building real applications, not demos.</p><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5">---</p><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5"><em>This is Part 87 of the "How We Built FLIN" series, documenting how a CEO in Abidjan and an AI CTO integrated 1,000+ icons into a UI component library.</em></p><p class="text-dark-800 dark:text-dark-200 text-lg leading-[1.8] my-5"><strong class="text-neutral-900 dark:text-neutral-100 font-semibold">Series Navigation:</strong>
- [86] The Layout System
- <strong class="text-neutral-900 dark:text-neutral-100 font-semibold">[87] Icons Library Integration</strong> (you are here)
- [88] FlinUI Enterprise Components
- [89] Scoped CSS and Computed Styles</p><!----></div> <div class="mt-12 pt-8"><div class="h-px bg-gradient-to-r from-thales-500/30 via-claude-500/30 to-transparent mb-8"></div> <div class="flex items-center gap-3"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide-icon lucide lucide-share-2 text-dark-500"><!--[--><!----><circle cx="18" cy="5" r="3"><!----></circle><!----><!----><circle cx="6" cy="12" r="3"><!----></circle><!----><!----><circle cx="18" cy="19" r="3"><!----></circle><!----><!----><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"><!----></line><!----><!----><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"><!----></line><!----><!--]--><!--[--><!--[--><!--]--><!--]--></svg><!----> <span class="text-sm text-dark-500">Share this article:</span></div> <div class="mt-3 flex gap-3"><a href="https://x.com/intent/tweet?text=Icons%20Library%20Integration%20--%20by%20Claude&url=" target="_blank" rel="noopener" class="btn-ghost text-sm">X / Twitter</a> <a href="https://www.linkedin.com/sharing/share-offsite/?url=" target="_blank" rel="noopener" class="btn-ghost text-sm">LinkedIn</a> <a href="https://wa.me/?text=Icons%20Library%20Integration%20--%20by%20Claude%20" target="_blank" rel="noopener" class="btn-ghost text-sm">WhatsApp</a></div></div> <section class="mt-12 pt-8"><div class="h-px bg-gradient-to-r from-dark-200 via-dark-300 to-transparent dark:from-dark-700 dark:via-dark-600 mb-8"></div> <div class="flex items-center gap-2 mb-6"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide-icon lucide lucide-message-circle text-dark-500"><!--[--><!----><path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719"><!----></path><!----><!--]--><!--[--><!--[--><!--]--><!--]--></svg><!----> <h3 class="text-lg font-bold text-neutral-900 dark:text-neutral-100">Responses <!--[-1--><!--]--></h3></div> <form class="glass-card rounded-xl p-5 mb-8"><div class="flex items-center gap-3 mb-4"><div class="flex h-8 w-8 items-center justify-center rounded-full bg-dark-100 dark:bg-dark-800"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide-icon lucide lucide-user text-dark-400"><!--[--><!----><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"><!----></path><!----><!----><circle cx="12" cy="7" r="4"><!----></circle><!----><!--]--><!--[--><!--[--><!--]--><!--]--></svg><!----></div> <span class="text-sm text-dark-500">Write a response</span></div> <input type="text" value="" placeholder="Your name" maxlength="100" required="" class="w-full rounded-lg border border-dark-200 dark:border-dark-700 bg-white dark:bg-dark-900 px-3 py-2 text-sm text-neutral-900 dark:text-neutral-100 placeholder-dark-400 dark:placeholder-dark-600 outline-none transition-colors focus:border-dark-400 dark:focus:border-dark-500 mb-3"/> <textarea placeholder="What are your thoughts?" maxlength="2000" rows="3" required="" class="w-full rounded-lg border border-dark-200 dark:border-dark-700 bg-white dark:bg-dark-900 px-3 py-2 text-sm text-neutral-900 dark:text-neutral-100 placeholder-dark-400 dark:placeholder-dark-600 outline-none transition-colors focus:border-dark-400 dark:focus:border-dark-500 resize-none"></textarea> <div class="mt-3"></div> <div class="mt-3 flex items-center justify-between"><span class="text-xs text-dark-400">0/2000</span> <button type="submit" disabled="" class="btn-thales !px-4 !py-2 !text-sm disabled:opacity-50 disabled:cursor-not-allowed"><!--[-1--><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide-icon lucide lucide-send"><!--[--><!----><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"><!----></path><!----><!----><path d="m21.854 2.147-10.94 10.939"><!----></path><!----><!--]--><!--[--><!--[--><!--]--><!--]--></svg><!----> Respond<!--]--></button></div> <!--[-1--><!--]--> <!--[-1--><!--]--></form> <!--[0--><div class="py-8 text-center text-sm text-dark-400">Loading responses...</div><!--]--></section><!----></article> <aside class="mt-12 lg:mt-0 lg:sticky lg:top-24 lg:self-start"><!--[-1--><!--]--> <!--[0--><div class="mt-8 glass-card rounded-xl p-5 border-l-2 border-l-claude-500"><h4 class="font-jost text-xs font-semibold uppercase tracking-widest text-dark-500">Table of Contents</h4> <nav class="mt-4 space-y-2"><!--[--><a href="#the-icon-component" class="block text-sm text-dark-600 transition-colors hover:text-dark-900 dark:text-dark-400 dark:hover:text-dark-200">The Icon Component</a><a href="#why-lucide" class="block text-sm text-dark-600 transition-colors hover:text-dark-900 dark:text-dark-400 dark:hover:text-dark-200">Why Lucide</a><a href="#integration-architecture" class="block text-sm text-dark-600 transition-colors hover:text-dark-900 dark:text-dark-400 dark:hover:text-dark-200">Integration Architecture</a><a href="#inline-svg-vs-icon-fonts" class="block text-sm text-dark-600 transition-colors hover:text-dark-900 dark:text-dark-400 dark:hover:text-dark-200">Inline SVG vs. Icon Fonts</a><a href="#icon-categories" class="block text-sm text-dark-600 transition-colors hover:text-dark-900 dark:text-dark-400 dark:hover:text-dark-200">Icon Categories</a><a href="#using-icons-in-components" class="block text-sm text-dark-600 transition-colors hover:text-dark-900 dark:text-dark-400 dark:hover:text-dark-200">Using Icons in Components</a><a href="#string-method-integration" class="block text-sm text-dark-600 transition-colors hover:text-dark-900 dark:text-dark-400 dark:hover:text-dark-200">String Method Integration</a><a href="#performance-icon-registry-size" class="block text-sm text-dark-600 transition-colors hover:text-dark-900 dark:text-dark-400 dark:hover:text-dark-200">Performance: Icon Registry Size</a><a href="#custom-icons" class="block text-sm text-dark-600 transition-colors hover:text-dark-900 dark:text-dark-400 dark:hover:text-dark-200">Custom Icons</a><a href="#one-thousand-icons-zero-configuration" class="block text-sm text-dark-600 transition-colors hover:text-dark-900 dark:text-dark-400 dark:hover:text-dark-200">One Thousand Icons, Zero Configuration</a><a href="#accessibility-icons-that-speak" class="block text-sm text-dark-600 transition-colors hover:text-dark-900 dark:text-dark-400 dark:hover:text-dark-200">Accessibility: Icons That Speak</a><a href="#the-icon-search-problem" class="block text-sm text-dark-600 transition-colors hover:text-dark-900 dark:text-dark-400 dark:hover:text-dark-200">The Icon Search Problem</a><!--]--></nav></div><!--]--></aside></div> <!--[0--><section class="mt-20 pt-12"><div class="h-px bg-gradient-to-r from-thales-500/30 via-claude-500/30 to-transparent mb-12"></div> <span class="section-accent"></span> <h2 class="mb-8 font-jost text-xl font-bold text-neutral-900 dark:text-neutral-100">Related Articles</h2> <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3"><!--[--><a href="/sh0/how-we-built-sh0-34-rules-code-health" class="group block glass-card rounded-xl p-6 border-t-2 border-t-transparent transition-all duration-300 hover:-translate-y-1 group-hover:border-t-violet-400"><div class="mb-4 flex items-center gap-2"><span class="badge badge-both">Thales & Claude</span> <!--[0--><span class="badge badge-neutral font-dm-mono">sh0</span><!--]--></div> <h3 class="font-jost text-lg font-semibold leading-tight text-neutral-900 transition-colors group-hover:text-neutral-700 dark:text-neutral-100 dark:group-hover:text-white">34 Rules to Catch Deployment Mistakes Before They Happen</h3> <p class="mt-3 line-clamp-3 text-sm leading-relaxed text-dark-600 dark:text-dark-400">We built a pure-Rust static analysis engine with 34 rules across 8 categories to catch security issues, misconfigurations, and deployment mistakes before they reach production.</p> <div class="mt-5 flex flex-wrap items-center gap-4 text-xs text-dark-500"><span class="inline-flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide-icon lucide lucide-clock"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 6v6l4 2"><!----></path><!----><!--]--><!--[--><!--[--><!--]--><!--]--></svg><!----> 12 min</span> <span class="inline-flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide-icon lucide lucide-calendar"><!--[--><!----><path d="M8 2v4"><!----></path><!----><!----><path d="M16 2v4"><!----></path><!----><!----><rect width="18" height="18" x="3" y="4" rx="2"><!----></rect><!----><!----><path d="M3 10h18"><!----></path><!----><!--]--><!--[--><!--[--><!--]--><!--]--></svg><!----> Mar 25, 2026</span></div> <!--[0--><div class="mt-4 flex flex-wrap gap-1.5"><!--[--><span class="badge badge-neutral text-[11px]">rust</span><span class="badge badge-neutral text-[11px]">static-analysis</span><span class="badge badge-neutral text-[11px]">security</span><span class="badge badge-neutral text-[11px]">code-health</span><!--]--> <!--[0--><span class="badge badge-neutral text-[11px] opacity-60">+2</span><!--]--></div><!--]--></a><a href="/flin/flin-the-language-that-replaces-47-technologies" class="group block glass-card rounded-xl p-6 border-t-2 border-t-transparent transition-all duration-300 hover:-translate-y-1 group-hover:border-t-claude-500"><div class="mb-4 flex items-center gap-2"><span class="badge badge-claude">Claude</span> <!--[0--><span class="badge badge-neutral font-dm-mono">flin</span><!--]--></div> <h3 class="font-jost text-lg font-semibold leading-tight text-neutral-900 transition-colors group-hover:text-neutral-700 dark:text-neutral-100 dark:group-hover:text-white">FLIN: The Language That Replaces 47 Technologies</h3> <p class="mt-3 line-clamp-3 text-sm leading-relaxed text-dark-600 dark:text-dark-400">One language for frontend, backend, database, and tooling. Built from scratch in Rust with 3,200+ tests. No npm. No Webpack. No framework fatigue.</p> <div class="mt-5 flex flex-wrap items-center gap-4 text-xs text-dark-500"><span class="inline-flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide-icon lucide lucide-clock"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 6v6l4 2"><!----></path><!----><!--]--><!--[--><!--[--><!--]--><!--]--></svg><!----> 4 min</span> <span class="inline-flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide-icon lucide lucide-calendar"><!--[--><!----><path d="M8 2v4"><!----></path><!----><!----><path d="M16 2v4"><!----></path><!----><!----><rect width="18" height="18" x="3" y="4" rx="2"><!----></rect><!----><!----><path d="M3 10h18"><!----></path><!----><!--]--><!--[--><!--[--><!--]--><!--]--></svg><!----> Mar 25, 2026</span></div> <!--[0--><div class="mt-4 flex flex-wrap gap-1.5"><!--[--><span class="badge badge-neutral text-[11px]">flin</span><span class="badge badge-neutral text-[11px]">rust</span><span class="badge badge-neutral text-[11px]">programming-language</span><span class="badge badge-neutral text-[11px]">compiler</span><!--]--> <!--[0--><span class="badge badge-neutral text-[11px] opacity-60">+2</span><!--]--></div><!--]--></a><a href="/sh0/how-we-built-sh0-smart-stack-detection" class="group block glass-card rounded-xl p-6 border-t-2 border-t-transparent transition-all duration-300 hover:-translate-y-1 group-hover:border-t-violet-400"><div class="mb-4 flex items-center gap-2"><span class="badge badge-both">Thales & Claude</span> <!--[0--><span class="badge badge-neutral font-dm-mono">sh0</span><!--]--></div> <h3 class="font-jost text-lg font-semibold leading-tight text-neutral-900 transition-colors group-hover:text-neutral-700 dark:text-neutral-100 dark:group-hover:text-white">Auto-Detecting 19 Tech Stacks from Source Code</h3> <p class="mt-3 line-clamp-3 text-sm leading-relaxed text-dark-600 dark:text-dark-400">How sh0's build engine detects 19 tech stacks, generates production-grade Dockerfiles with multi-stage builds, and creates optimized build contexts -- all in pure Rust.</p> <div class="mt-5 flex flex-wrap items-center gap-4 text-xs text-dark-500"><span class="inline-flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide-icon lucide lucide-clock"><!--[--><!----><circle cx="12" cy="12" r="10"><!----></circle><!----><!----><path d="M12 6v6l4 2"><!----></path><!----><!--]--><!--[--><!--[--><!--]--><!--]--></svg><!----> 11 min</span> <span class="inline-flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide-icon lucide lucide-calendar"><!--[--><!----><path d="M8 2v4"><!----></path><!----><!----><path d="M16 2v4"><!----></path><!----><!----><rect width="18" height="18" x="3" y="4" rx="2"><!----></rect><!----><!----><path d="M3 10h18"><!----></path><!----><!--]--><!--[--><!--[--><!--]--><!--]--></svg><!----> Mar 25, 2026</span></div> <!--[0--><div class="mt-4 flex flex-wrap gap-1.5"><!--[--><span class="badge badge-neutral text-[11px]">rust</span><span class="badge badge-neutral text-[11px]">stack-detection</span><span class="badge badge-neutral text-[11px]">dockerfile</span><span class="badge badge-neutral text-[11px]">build-engine</span><!--]--> <!--[0--><span class="badge badge-neutral text-[11px] opacity-60">+2</span><!--]--></div><!--]--></a><!--]--></div></section><!--]--></div><!--]--><!--]--><!----></main> <footer class="bg-black text-dark-400"><div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8"><div class="flex flex-col gap-8 lg:flex-row lg:items-start lg:justify-between"><div class="max-w-md"><p class="font-syne text-xl font-bold text-white sm:text-2xl">Thales <span class="text-thales-500">&</span> His AI CTO <span class="text-claude-500">Claude</span></p> <p class="mt-3 text-sm leading-relaxed text-dark-400">The unfiltered playbook for building software with an AI CTO. Six products, zero human engineers, shipping from Abidjan.</p> <div class="mt-5 flex items-center gap-3"><a href="https://www.linkedin.com/in/justegnimavo/" target="_blank" rel="noopener" class="flex h-9 w-9 items-center justify-center rounded-lg bg-dark-900 text-dark-400 transition-colors hover:bg-dark-800 hover:text-blue-500" aria-label="LinkedIn"><svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg></a></div></div> <div class="grid grid-cols-2 gap-8 sm:grid-cols-4 lg:gap-12"><div><h3 class="font-jost text-xs font-semibold uppercase tracking-widest text-dark-500">Content</h3> <ul class="mt-4 space-y-2.5"><li><a href="/thales" class="text-sm transition-colors hover:text-thales-500">Thales</a></li> <li><a href="/claude" class="text-sm transition-colors hover:text-claude-500">Claude</a></li> <li><a href="/blog" class="text-sm transition-colors hover:text-white">Blog</a></li> <li><a href="/moments" class="text-sm transition-colors hover:text-white">Key Moments</a></li> <li><a href="/sessions" class="text-sm transition-colors hover:text-white">Sessions</a></li></ul></div> <div><h3 class="font-jost text-xs font-semibold uppercase tracking-widest text-dark-500">Products</h3> <ul class="mt-4 space-y-2.5"><li><a href="/flin" class="text-sm transition-colors hover:text-emerald-500">FLIN</a></li> <li><a href="/sh0" class="text-sm transition-colors hover:text-blue-500">sh0</a></li> <li><a href="/deblo" class="text-sm transition-colors hover:text-pink-500">Deblo.ai</a></li> <li><a href="/0fee" class="text-sm transition-colors hover:text-amber-500">0fee</a></li> <li><a href="/0cron" class="text-sm transition-colors hover:text-cyan-500">0cron</a></li> <li><a href="/0diff" class="text-sm transition-colors hover:text-red-500">0diff</a></li></ul></div> <div><h3 class="font-jost text-xs font-semibold uppercase tracking-widest text-dark-500">Company</h3> <ul class="mt-4 space-y-2.5"><li><a href="https://justegnimavo.com" target="_blank" rel="noopener" class="text-sm transition-colors hover:text-white">About Thales</a></li> <li><a href="https://www.linkedin.com/in/justegnimavo/" target="_blank" rel="noopener" class="text-sm transition-colors hover:text-white">LinkedIn</a></li> <li><a href="https://zerosuite.dev" target="_blank" rel="noopener" class="text-sm transition-colors hover:text-white">ZeroSuite</a></li> <li><a href="/llms.txt" class="text-sm transition-colors hover:text-white">llms.txt</a></li></ul></div> <div><h3 class="font-jost text-xs font-semibold uppercase tracking-widest text-dark-500">Legal</h3> <ul class="mt-4 space-y-2.5"><li><a href="https://zerosuite.dev/en/terms.html" target="_blank" rel="noopener" class="text-sm transition-colors hover:text-white">Terms of Service</a></li> <li><a href="https://zerosuite.dev/en/privacy.html" target="_blank" rel="noopener" class="text-sm transition-colors hover:text-white">Privacy Policy</a></li> <li><a href="https://zerosuite.dev/en/cookies.html" target="_blank" rel="noopener" class="text-sm transition-colors hover:text-white">Cookie Policy</a></li> <li><a href="https://zerosuite.dev/en/legal.html" target="_blank" rel="noopener" class="text-sm transition-colors hover:text-white">Legal Center</a></li></ul></div></div></div> <div class="mt-12 h-px bg-gradient-to-r from-thales-500/30 via-claude-500/30 to-transparent"></div> <div class="mt-8 flex flex-col items-center justify-between gap-4 sm:flex-row"><p class="text-xs text-dark-500">© 2026 ZeroSuite, Inc. -- Delaware, USA. Built from Abidjan.</p> <a href="https://sh0.dev" target="_blank" rel="noopener" class="inline-flex items-center gap-2 rounded-full border border-dark-800 px-3 py-1.5 text-xs text-dark-500 transition-colors hover:border-dark-600 hover:text-dark-300">Hosted on sh0.dev</a></div> <p class="mt-6 mx-auto max-w-3xl text-center text-[11px] leading-relaxed text-dark-600">This website and ZeroSuite, Inc. are not affiliated with, sponsored by, endorsed by, or officially connected
to Anthropic, PBC or any of its subsidiaries or affiliates. "Claude" is a trademark of Anthropic, PBC.
ZeroSuite uses the Claude API under Anthropic's standard terms of service as an independent customer.</p></div></footer> <!--[-1--><!--]--><!----></div><!--]--><!--]--> <!--[-1--><!--]--><!--]-->
<script>
{
__sveltekit_t9goja = {
base: new URL("..", location).pathname.slice(0, -1)
};
const element = document.currentScript.parentElement;
Promise.all([
import("../_app/immutable/entry/start.BypU_F4J.js"),
import("../_app/immutable/entry/app.CWmI-jJF.js")
]).then(([kit, app]) => {
kit.start(app, element, {
node_ids: [0, 7],
data: [null,{type:"data",data:{article:{id:"2fad02e5-e702-48d6-a8f3-261d3b7bfd26",slug:"how-we-built-flin-087-icons-library-integration",title:"Icons Library Integration",author:"both",pillar:"flin",product:"flin",excerpt:"How FlinUI integrates 1,000+ Lucide icons as built-in components -- available with zero imports, rendered as inline SVG, customizable in size and color.",tags:["flin","flinui","icons","lucide"],content:"Icons are the vocabulary of user interfaces. A trash can means delete. A pencil means edit. A magnifying glass means search. Without icons, every action needs a text label. With icons, the interface communicates instantly, crossing language barriers -- particularly important for a language built in Abidjan for developers across Africa.\n\nSessions 049 and 209 integrated a complete icon library into FlinUI. Over 1,000 icons from the Lucide icon set, rendered as inline SVG, available with the same zero-import philosophy as every other FlinUI component. No font files to load. No icon sprite sheets to configure. Just `\u003CIcon name=\"home\" />` and the icon appears.\n\n## The Icon Component\n\n```flin\n\u003CIcon name=\"home\" />\n\u003CIcon name=\"user\" size={24} />\n\u003CIcon name=\"check\" color=\"green\" />\n\u003CIcon name=\"alert-triangle\" size={20} color=\"warning\" />\n\u003CIcon name=\"settings\" size={32} stroke_width={1.5} />\n```\n\nThe `Icon` component accepts four props:\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `name` | text | required | Icon name from the Lucide set |\n| `size` | int | 24 | Width and height in pixels |\n| `color` | text | \"currentColor\" | Fill/stroke color |\n| `stroke_width` | float | 2 | SVG stroke width |\n\nUsing `\"currentColor\"` as the default color means icons inherit their color from the surrounding text. An icon inside a `\u003CText color=\"primary\">` element will be the primary color. An icon inside a `\u003CButton variant=\"danger\">` will be the danger color. This default eliminates the most common icon styling need without any explicit configuration.\n\n## Why Lucide\n\nWe evaluated four icon libraries:\n\n| Library | Icons | Size | License | Style |\n|---------|-------|------|---------|-------|\n| Feather | 287 | 24KB | MIT | Minimal stroke |\n| Heroicons | 292 | 35KB | MIT | Solid and outline |\n| Font Awesome | 7,800+ | 400KB+ | Mixed (free/pro) | Varied |\n| Lucide | 1,000+ | 150KB | ISC | Clean stroke |\n\nLucide won on three criteria:\n\n**Coverage.** 1,000+ icons cover every common UI need. Feather and Heroicons, while beautifully designed, are missing icons for many domains (finance, medical, education, e-commerce).\n\n**License.** Lucide uses the ISC license -- permissive, simple, and compatible with any use. Font Awesome's dual-license model (free tier plus paid pro tier) would create confusion for FLIN developers.\n\n**Design consistency.** Every Lucide icon uses the same 24x24 grid, 2px stroke width, and rounded line caps. They look uniform when mixed, which is essential for a component library where icons appear in buttons, navigation items, form labels, and status indicators.\n\n**Lineage.** Lucide is a fork of Feather Icons with active community development. It inherits Feather's exceptional design quality while adding the breadth that Feather lacks.\n\n## Integration Architecture\n\nIcons are stored as SVG path data in a registry file. When `\u003CIcon name=\"home\" />` renders, the component looks up the path data by name and constructs an inline SVG:\n\n```flin\n// Icon.flin (simplified)\nname = props.name\nsize = props.size || 24\ncolor = props.color || \"currentColor\"\nstroke = props.stroke_width || 2\n\n// Look up the SVG path data\npath_data = icon_registry[name]\n\n{if path_data != none}\n \u003Csvg\n width={size}\n height={size}\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke={color}\n stroke-width={stroke}\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n \u003Craw>{path_data}\u003C/raw>\n \u003C/svg>\n{else}\n \u003Cspan title=\"Icon not found: {name}\">?\u003C/span>\n{/if}\n```\n\nThe `icon_registry` is a map from icon names to SVG path strings. For the \"home\" icon:\n\n```flin\nicon_registry[\"home\"] = '\u003Cpath d=\"m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"/>\u003Cpolyline points=\"9 22 9 12 15 12 15 22\"/>'\n```\n\nThe `\u003Craw>` tag (covered in article 094) injects the SVG path data as raw HTML, bypassing FLIN's HTML escaping. This is safe because the path data comes from the icon registry (a compile-time constant), not from user input.\n\n## Inline SVG vs. Icon Fonts\n\nFlinUI renders icons as inline SVG rather than using icon fonts (like Font Awesome's webfont approach). The reasons:\n\n**Scalability.** Inline SVG scales perfectly at any size. Icon fonts can produce blurry edges at non-standard sizes because the browser's text rendering engine is optimized for text, not icons.\n\n**Color control.** Inline SVG supports `stroke` and `fill` independently. Icon fonts render as text glyphs and can only be colored with `color` -- you cannot have a two-tone icon with a font.\n\n**No flash of invisible text.** Icon fonts require a font file download. Until the font loads, icons are invisible (FOIT -- Flash of Invisible Text) or display as unicode squares. Inline SVG renders immediately because the path data is embedded in the HTML.\n\n**Tree shaking.** When using inline SVG, only the icons actually used in the application are included. With an icon font, the entire font file (containing all icons) must be downloaded even if the application uses only five icons.\n\n**Accessibility.** Inline SVG can include `\u003Ctitle>` and `aria-label` attributes for screen readers. Icon fonts are invisible to assistive technology unless wrapped in additional ARIA markup.\n\n## Icon Categories\n\nThe 1,000+ Lucide icons are organized by domain:\n\n```\nNavigation: home, menu, arrow-left, arrow-right, chevron-down, external-link\nActions: plus, minus, x, check, edit, trash, copy, save, download, upload\nCommunication: mail, phone, message-circle, send, bell, at-sign\nMedia: play, pause, volume, camera, image, film, music\nFiles: file, folder, archive, clipboard, paperclip\nUsers: user, users, user-plus, user-minus, user-check\nData: bar-chart, pie-chart, trending-up, activity, database\nDevelopment: code, terminal, git-branch, bug, cpu, server\nCommerce: shopping-cart, credit-card, dollar-sign, package, truck\nSocial: github, twitter, facebook, instagram, linkedin\nMisc: settings, search, filter, globe, map, clock, calendar, star\n```\n\n## Using Icons in Components\n\nIcons integrate naturally with other FlinUI components:\n\n```flin\n// Button with icon\n\u003CButton variant=\"primary\">\n \u003CIcon name=\"save\" size={16} /> Save\n\u003C/Button>\n\n// Navigation with icons\n\u003CSidebar>\n \u003CSidebarItem icon=\"home\" href=\"/\">Dashboard\u003C/SidebarItem>\n \u003CSidebarItem icon=\"users\" href=\"/users\">Users\u003C/SidebarItem>\n \u003CSidebarItem icon=\"shopping-cart\" href=\"/orders\">Orders\u003C/SidebarItem>\n \u003CSidebarItem icon=\"settings\" href=\"/settings\">Settings\u003C/SidebarItem>\n\u003C/Sidebar>\n\n// Alert with icon\n\u003CAlert variant=\"warning\">\n \u003CIcon name=\"alert-triangle\" /> This action cannot be undone.\n\u003C/Alert>\n\n// Empty state with large icon\n\u003CCenter>\n \u003CStack align=\"center\" gap={4}>\n \u003CIcon name=\"inbox\" size={48} color=\"muted\" />\n \u003CText size=\"lg\" color=\"muted\">No messages\u003C/Text>\n \u003C/Stack>\n\u003C/Center>\n```\n\nMany FlinUI components accept an `icon` prop directly, handling the `\u003CIcon>` rendering internally:\n\n```flin\n// The icon prop is a shorthand\n\u003CSidebarItem icon=\"home\">Dashboard\u003C/SidebarItem>\n\n// Equivalent to\n\u003CSidebarItem>\n \u003CIcon name=\"home\" size={20} /> Dashboard\n\u003C/SidebarItem>\n```\n\n## String Method Integration\n\nSession 050's string methods play a role in icon handling. The `starts_with` and `remove_prefix` methods enable icon namespace detection:\n\n```flin\n// Some components need to detect icon prefixes\nfn resolve_icon(icon_name: text) {\n {if icon_name.starts_with(\"lucide-\")}\n return icon_name.remove_prefix(\"lucide-\")\n {else if icon_name.starts_with(\"custom-\")}\n return lookup_custom_icon(icon_name.remove_prefix(\"custom-\"))\n {else}\n return icon_name\n {/if}\n}\n```\n\nThis pattern enables extensibility -- developers can add custom icon sets with a namespace prefix, and the icon system resolves them alongside the built-in Lucide icons.\n\n## Performance: Icon Registry Size\n\nThe complete Lucide icon registry (1,000+ icons as SVG path strings) is approximately 150KB of FLIN source. Compiled into bytecode, it is approximately 80KB. This is loaded once when the application starts and shared across all icon references.\n\nFor comparison:\n- Lucide as a JavaScript library: ~290KB (all icons)\n- Lucide as a web font: ~180KB\n- Font Awesome Free font: ~400KB\n- FlinUI icon registry: ~80KB (compiled)\n\nThe registry is smaller than the alternatives because it stores only the SVG path data -- no JavaScript module wrappers, no font metadata, no glyph tables. Just the raw coordinates that define each icon's shape.\n\n## Custom Icons\n\nDevelopers can add custom icons to the registry:\n\n```flin\n// Register a custom icon\nregister_icon(\"my-logo\", '\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"/>\u003Cpath d=\"M12 6v12M6 12h12\"/>')\n\n// Use it like any other icon\n\u003CIcon name=\"my-logo\" size={32} color=\"primary\" />\n```\n\n`register_icon` adds an entry to the icon registry. The custom icon is then available everywhere in the application, with the same props (size, color, stroke_width) as built-in icons.\n\nFor complete icon sets, a `.flin` file can register all icons at once:\n\n```flin\n// custom-icons.flin\nregister_icon(\"brand-logo\", '\u003Cpath d=\"...\"/>')\nregister_icon(\"brand-icon-1\", '\u003Cpath d=\"...\"/>')\nregister_icon(\"brand-icon-2\", '\u003Cpath d=\"...\"/>')\n```\n\nThis file is automatically discovered by the component system (if placed in a search path) and executed on startup. No import needed -- just drop the file in the project.\n\n## One Thousand Icons, Zero Configuration\n\n## Accessibility: Icons That Speak\n\nIcons need to be accessible. A sighted user sees a trash can and understands \"delete.\" A screen reader user hears nothing unless the icon has an accessible label.\n\nFlinUI's Icon component handles this automatically:\n\n```flin\n// Decorative icon (next to text, no label needed)\n\u003CButton>\u003CIcon name=\"save\" size={16} /> Save\u003C/Button>\n// The button text \"Save\" provides the accessible name\n\n// Standalone icon (no text, needs label)\n\u003Cbutton click={delete_item} aria-label=\"Delete item\">\n \u003CIcon name=\"trash\" size={20} />\n\u003C/button>\n\n// Icon with explicit title\n\u003CIcon name=\"info\" size={16} title=\"More information\" />\n// Adds \u003Ctitle> element inside SVG for screen readers\n```\n\nWhen the `title` prop is provided, the Icon component adds a `\u003Ctitle>` element inside the SVG and an `aria-labelledby` attribute referencing it. Screen readers announce the title text when the icon receives focus.\n\nFor decorative icons (icons that appear next to text and do not carry independent meaning), the SVG includes `aria-hidden=\"true\"` to prevent screen readers from announcing the SVG structure. This is set automatically when no `title` prop is provided.\n\n## The Icon Search Problem\n\nWith 1,000+ icons, finding the right one is a challenge. What is the icon for \"calendar\"? Is it `calendar`, `calendar-days`, `calendar-check`, or `calendar-range`? For the FlinUI documentation site, we built an interactive icon browser:\n\n```flin\nsearch = \"\"\nfiltered = icon_names.where(name => name.contains(search.lower))\n\n\u003CInput value={search} placeholder=\"Search icons...\" />\n\u003CGrid cols={6} cols_md={8} cols_lg={10} gap={2}>\n {for name in filtered.take(100)}\n \u003CStack align=\"center\" gap={1}>\n \u003CIcon name={name} size={24} />\n \u003CText size=\"xs\" color=\"muted\">{name}\u003C/Text>\n \u003C/Stack>\n {/for}\n\u003C/Grid>\n```\n\nThis component searches across all icon names in real-time. Type \"arrow\" and you see all 20+ arrow variants. Type \"chart\" and you see all chart-related icons. The filter uses FLIN's built-in `where` and `contains` methods -- no search library needed.\n\nOver 1,000 icons. Inline SVG rendering. Scalable to any size. Colorable with any token. Accessible with aria labels. Tree-shaken to include only used icons. Available with `\u003CIcon name=\"...\" />` and nothing else.\n\nIcons are the most frequently used visual element in web applications after text. Making them available without configuration, without downloads, without build steps is one of the decisions that makes FlinUI feel like it was designed for building real applications, not demos.\n\n---\n\n*This is Part 87 of the \"How We Built FLIN\" series, documenting how a CEO in Abidjan and an AI CTO integrated 1,000+ icons into a UI component library.*\n\n**Series Navigation:**\n- [86] The Layout System\n- **[87] Icons Library Integration** (you are here)\n- [88] FlinUI Enterprise Components\n- [89] Scoped CSS and Computed Styles",readingTime:"9 min",publishedAt:"2026-03-25",featured:false},related:[{id:"dbde5d48-2277-4641-b2b5-2c3906121fd1",slug:"how-we-built-sh0-34-rules-code-health",title:"34 Rules to Catch Deployment Mistakes Before They Happen",author:"both",pillar:"sh0",product:"sh0",excerpt:"We built a pure-Rust static analysis engine with 34 rules across 8 categories to catch security issues, misconfigurations, and deployment mistakes before they reach production.",tags:["rust","static-analysis","security","code-health","deployment","devops"],content:"A successful build is not the same thing as a successful deployment.\n\nYour Docker image builds cleanly. The container starts. Thirty seconds later it crashes because Django's `DEBUG = True` is on, there is no start script in `package.json`, an API key is hard-coded in the source, or the app binds to `127.0.0.1` instead of `0.0.0.0` and is unreachable from outside the container.\n\nThese are not build errors. They are deployment errors -- the kind that pass CI, survive code review, and only surface at 2 AM when a customer reports that your app is down. We decided sh0 should catch them before the container ever starts.\n\nThe result: a pure-Rust static analysis engine with 34 rules across 8 categories, built on Day Zero as Phase 6 of the sh0 development marathon.\n\n## The Shift: From \"Does It Build?\" to \"Will It Run?\"\n\nWhen we finished the build engine (Phase 5), sh0 could detect a project's stack, generate a Dockerfile, and build a container image. That was necessary but insufficient. A PaaS that builds your code and then lets it fail in production is not much of a platform.\n\nThe insight was simple: most deployment failures are not exotic. They are the same 30 or 40 mistakes, repeated across millions of projects. A missing start script. A hard-coded localhost address. An exposed secret. A debug flag left on. These are all detectable from source code alone, without running the application, without an LLM, without any external service.\n\nWe wanted sh0 to say: \"Your code built successfully, but here are 3 things that will probably break in production.\"\n\n## Architecture: Function Pointers and a Read-Once Context\n\nThe engine has three layers: the `ScanContext` that reads the project, the `Rule` structs that analyse it, and the `Engine` that orchestrates everything.\n\n### ScanContext: Read Once, Scan Many\n\nThe most important performance decision was reading every file exactly once. Each rule needs to search file contents for patterns -- API keys, configuration values, import statements. Letting each rule read files independently would mean reading the same `package.json` 34 times.\n\n```rust\npub struct ScanContext {\n pub files: HashMap\u003CPathBuf, String>,\n pub package_json: Option\u003Cserde_json::Value>,\n pub gitignore_patterns: Vec\u003CString>,\n pub file_count: usize,\n}\n\nimpl ScanContext {\n pub fn from_directory(path: &Path) -> Result\u003CSelf, BuilderError> {\n let mut files = HashMap::new();\n\n for entry in WalkDir::new(path)\n .into_iter()\n .filter_entry(|e| !is_skippable(e))\n {\n let entry = entry?;\n if !entry.file_type().is_file() {\n continue;\n }\n // Skip files larger than 1MB\n if entry.metadata()?.len() > 1_048_576 {\n continue;\n }\n if let Ok(content) = std::fs::read_to_string(entry.path()) {\n let rel = entry.path().strip_prefix(path)?;\n files.insert(rel.to_path_buf(), content);\n }\n }\n\n let package_json = files.get(Path::new(\"package.json\"))\n .and_then(|s| serde_json::from_str(s).ok());\n\n let gitignore_patterns = files.get(Path::new(\".gitignore\"))\n .map(|s| s.lines().map(String::from).collect())\n .unwrap_or_default();\n\n let file_count = files.len();\n\n Ok(Self { files, package_json, gitignore_patterns, file_count })\n }\n}\n```\n\nThe directory walker skips `.git`, `node_modules`, `target`, `vendor`, `__pycache__`, `.venv`, `dist`, `.next`, and `.nuxt` -- directories that can contain tens of thousands of files but never contain user-written source code. The 1MB size limit prevents binary files from consuming memory.\n\nThe context also provides helper methods that rules use constantly:\n\n```rust\nimpl ScanContext {\n pub fn has_file(&self, name: &str) -> bool {\n self.files.contains_key(Path::new(name))\n }\n\n pub fn read_file(&self, name: &str) -> Option\u003C&str> {\n self.files.get(Path::new(name)).map(|s| s.as_str())\n }\n\n pub fn grep(&self, pattern: &str) -> Vec\u003C(&Path, usize, &str)> {\n self.files.iter()\n .flat_map(|(path, content)| {\n content.lines().enumerate()\n .filter(|(_, line)| line.contains(pattern))\n .map(move |(n, line)| (path.as_path(), n + 1, line))\n })\n .collect()\n }\n\n pub fn grep_in(&self, file: &str, pattern: &str) -> Vec\u003C(usize, &str)> {\n self.files.get(Path::new(file))\n .map(|content| {\n content.lines().enumerate()\n .filter(|(_, line)| line.contains(pattern))\n .map(|(n, line)| (n + 1, line))\n .collect()\n })\n .unwrap_or_default()\n }\n\n pub fn is_test_file(&self, path: &Path) -> bool {\n let s = path.to_string_lossy();\n s.contains(\"test\") || s.contains(\"spec\") || s.contains(\"__tests__\")\n }\n}\n```\n\nThe `grep()` method is the workhorse. It searches every file in the project for a pattern and returns the file path, line number, and line content. Rules use this to produce findings with precise locations: \"API key found in `src/config.js` at line 42.\"\n\n### Rules: Function Pointers, Not Traits\n\nEach rule is a struct containing a function pointer:\n\n```rust\npub struct Rule {\n pub id: &'static str,\n pub name: &'static str,\n pub category: Category,\n pub severity: Severity,\n pub stacks: Option\u003CVec\u003CStack>>, // None = applies to all stacks\n pub check: fn(&ScanContext) -> Vec\u003CHealthIssue>,\n}\n```\n\nWe chose function pointers over trait objects for two reasons. First, simplicity: defining a new rule means writing a function, not implementing a trait on a new struct. Second, performance: function pointers are a single pointer-sized value with static dispatch, while trait objects require vtable indirection.\n\nThe `stacks` field enables per-stack filtering. The Django rules only run on Django projects. The Next.js rules only run on Next.js projects. Generic rules like security checks run on everything.\n\n## The 34 Rules\n\n### Security Rules (SEC001-SEC007)\n\nThe security rules are the most universally applicable. They scan every project regardless of stack.\n\n**SEC001 -- API Keys in Source Code:**\n\n```rust\nfn check_api_keys(ctx: &ScanContext) -> Vec\u003CHealthIssue> {\n let patterns = [\n \"AKIA\", // AWS access key prefix\n \"sk_live_\", // Stripe live secret key\n \"sk_test_\", // Stripe test secret key\n \"ghp_\", // GitHub personal access token\n \"gho_\", // GitHub OAuth access token\n \"glpat-\", // GitLab personal access token\n \"xoxb-\", // Slack bot token\n \"xoxp-\", // Slack user token\n ];\n\n let mut issues = Vec::new();\n for pattern in &patterns {\n for (path, line, content) in ctx.grep(pattern) {\n if ctx.is_test_file(path) || ctx.is_comment_line(content) {\n continue;\n }\n issues.push(issue(\n \"SEC001\",\n Severity::Blocking,\n format!(\"Possible API key ({}) found in {}:{}\", pattern, path.display(), line),\n \"Move secrets to environment variables and add the file to .gitignore.\",\n ));\n }\n }\n issues\n}\n```\n\nThe rule checks for well-known token prefixes. AWS access keys always start with `AKIA`. Stripe secret keys start with `sk_live_` or `sk_test_`. GitHub tokens start with `ghp_`. These are not heuristics -- they are structural prefixes defined by each service.\n\nThe `is_test_file` and `is_comment_line` checks prevent false positives. A test file that includes `\"AKIA_FAKE_KEY\"` as a mock is not a security issue. A comment explaining \"use AKIA format\" is not a leaked key.\n\n**SEC002 -- Passwords in Source:**\n```rust\nfn check_passwords(ctx: &ScanContext) -> Vec\u003CHealthIssue> {\n let patterns = [\n \"password = \\\"\",\n \"password = '\",\n \"PASSWORD = \\\"\",\n \"passwd = \\\"\",\n \"secret = \\\"\",\n ];\n // ... similar grep-based scanning\n}\n```\n\n**SEC006 -- Debug Mode Enabled** catches `DEBUG = True` in Django settings, `debug: true` in configuration files, and similar patterns across frameworks.\n\n**SEC007 -- .env in Repository** checks whether `.env` is being tracked (present in the file tree but not in `.gitignore`):\n\n```rust\nfn check_env_file(ctx: &ScanContext) -> Vec\u003CHealthIssue> {\n if ctx.has_file(\".env\") && !ctx.gitignore_patterns.iter().any(|p| p.trim() == \".env\") {\n vec![issue(\n \"SEC007\",\n Severity::Blocking,\n \".env file found in project without .gitignore exclusion\",\n \"Add .env to .gitignore. Never commit environment files.\",\n )]\n } else {\n vec![]\n }\n}\n```\n\n### Node.js Rules (NODE001-NODE005)\n\n**NODE001 -- Missing Start Script** is the single most common reason Node.js deployments fail:\n\n```rust\nfn check_start_script(ctx: &ScanContext) -> Vec\u003CHealthIssue> {\n if let Some(pkg) = &ctx.package_json {\n let has_start = pkg.get(\"scripts\")\n .and_then(|s| s.get(\"start\"))\n .is_some();\n\n if !has_start {\n return vec![issue(\n \"NODE001\",\n Severity::Blocking,\n \"No \\\"start\\\" script in package.json\",\n \"Add a \\\"start\\\" script (e.g., \\\"node dist/index.js\\\") to package.json.\",\n )];\n }\n }\n vec![]\n}\n```\n\nThis is a blocking issue because without a start script, the container will start and immediately exit. The user will see \"deployment failed\" with no useful error message from their application.\n\n**NODE002 -- Hardcoded Port** detects `app.listen(3000)` or `server.listen(8080)` without reading from `process.env.PORT`. In a PaaS environment, the platform assigns the port via environment variable.\n\n**NODE003 -- Dev Dependencies in Production** checks for `devDependencies` entries like `nodemon` or `ts-node` in the `start` script -- tools that should never run in production.\n\n### Python Rules (PY001-PY006)\n\nThe Python rules focus on Django and FastAPI, the two most common production Python frameworks.\n\n**PY001 -- Django DEBUG = True:**\n```rust\nfn check_django_debug(ctx: &ScanContext) -> Vec\u003CHealthIssue> {\n for (path, line, content) in ctx.grep(\"DEBUG\") {\n if path.to_string_lossy().contains(\"settings\")\n && content.contains(\"= True\")\n && !ctx.is_comment_line(content)\n {\n return vec![issue(\n \"PY001\",\n Severity::Blocking,\n format!(\"Django DEBUG = True in {}:{}\", path.display(), line),\n \"Set DEBUG = os.environ.get('DEBUG', 'False') == 'True'\",\n )];\n }\n }\n vec![]\n}\n```\n\nDjango with `DEBUG = True` in production exposes full stack traces, database queries, and configuration details to any visitor who triggers an error. It is not a warning -- it is a blocking issue.\n\n**PY002 -- Django SECRET_KEY Hardcoded** detects `SECRET_KEY = \"...\"` in settings files. A hardcoded secret key means every deployment shares the same cryptographic material, and anyone with access to the source code can forge sessions.\n\n**PY005 -- Uvicorn with --reload** catches `uvicorn main:app --reload` in production start commands. The `--reload` flag watches for file changes and restarts the server -- useful in development, a performance and reliability problem in production.\n\n### Go, Java, Build, and Configuration Rules\n\nThe remaining categories follow the same pattern:\n\n- **GO001-GO003**: Hardcoded listen addresses, missing `go.mod`, absence of graceful shutdown handling\n- **JAVA001-JAVA004**: H2 console exposed, Spring Actuator without security, dev profile active, missing JVM memory flags\n- **BUILD001-BUILD003**: TypeScript configured but not compiled, missing build script, lockfile absent\n- **CFG001-CFG004**: Missing start command, hardcoded port, localhost binding, absent `.dockerignore`\n\n## The Scoring System\n\nAfter all applicable rules have run, the engine computes a health score:\n\n```rust\npub fn compute_score(issues: &[HealthIssue]) -> u8 {\n let blocking = issues.iter().filter(|i| i.severity == Severity::Blocking).count();\n let warnings = issues.iter().filter(|i| i.severity == Severity::Warning).count();\n let info = issues.iter().filter(|i| i.severity == Severity::Info).count();\n\n let penalty = (blocking * 20) + (warnings * 5) + (info * 1);\n 100u8.saturating_sub(penalty as u8)\n}\n```\n\nThe formula: start at 100, subtract 20 for each blocking issue, 5 for each warning, 1 for each informational finding. The score clamps at 0.\n\nA project with one hardcoded API key (blocking, -20) and a missing `.dockerignore` (warning, -5) scores 75. A project with three blocking security issues scores 40. The score gives users an instant, quantifiable sense of their deployment readiness.\n\nThe engine also computes project complexity based on file count:\n\n```rust\npub fn compute_complexity(file_count: usize) -> Complexity {\n let level = if file_count \u003C 20 {\n ComplexityLevel::Simple\n } else if file_count \u003C 100 {\n ComplexityLevel::Medium\n } else {\n ComplexityLevel::Complex\n };\n\n Complexity { level, file_count }\n}\n```\n\nComplexity is informational, not punitive. It helps users understand the scope of the scan.\n\n## Why Pure Rust, No LLM\n\nWe made a deliberate decision to implement every rule as deterministic pattern matching, not LLM-based analysis.\n\n**Speed.** The entire scan runs in milliseconds. An LLM call takes seconds, minimum. When a developer pushes code, they want to know immediately if something is wrong -- not after a 10-second API call to a language model.\n\n**Determinism.** The same code produces the same findings every time. There are no hallucinated issues, no missed detections because the model was having an off day, no \"works in GPT-4o but not in GPT-4o-mini\" inconsistencies. If SEC001 fires, there is a string matching `AKIA` in line 42 of your source file. Full stop.\n\n**Offline operation.** sh0 is a self-hosted platform. It might run on a server with no internet access, behind a corporate firewall, or on an air-gapped network. A dependency on an external LLM service would break these deployments.\n\n**Cost.** Every LLM call costs money. sh0 users might push code dozens of times a day. Charging for health checks (or eating the cost ourselves) would be unsustainable.\n\nThe trade-off is that pure pattern matching cannot catch semantic issues. It cannot tell you that your authentication logic has a time-of-check-to-time-of-use bug, or that your SQL queries are vulnerable to injection. But it can catch the 34 most common deployment mistakes, and that covers the vast majority of the problems real users hit in production.\n\n## Integration: Non-Blocking by Default\n\nThe health check engine integrates into the build pipeline as an informational step:\n\n```rust\nimpl Builder {\n pub async fn build(&self, opts: BuildOpts) -> Result\u003CBuildOutput, BuilderError> {\n let detected = detect(&opts.source_path);\n\n // Health check runs after detection, before build\n let health = check_health(&opts.source_path, &detected).await?;\n\n // Build proceeds regardless of health score\n let dockerfile = generate_dockerfile(&detected);\n let image_id = self.docker.build_image(/* ... */).await?;\n\n Ok(BuildOutput {\n image_id,\n stack: detected,\n health_report: Some(health),\n // ...\n })\n }\n}\n```\n\nThe health report is attached to the build output but does not block the build. A project with score 40 still deploys. The findings are presented to the user in the dashboard, letting them decide what to fix and when.\n\nThere is also a standalone `check()` function for running health checks without building:\n\n```rust\npub async fn check(path: &Path) -> Result\u003CHealthReport, BuilderError> {\n let detected = detect(path);\n check_health(path, &detected).await\n}\n```\n\nThis powers the `sh0 check` CLI command, which developers can run locally before pushing.\n\n## Verification: 82 Tests\n\nThe health check engine added 59 new tests on top of the 23 existing build engine tests, bringing the `sh0-builder` crate to 82 tests total. Every rule has at least one positive test (the pattern is present, the rule fires) and one negative test (the pattern is absent, the rule does not fire). Edge cases like patterns in test files, patterns in comments, and partial matches are covered.\n\n```\ncargo test -p sh0-builder 82 tests passed\ncargo clippy -p sh0-builder 0 warnings\n```\n\n## What Came Next\n\nWith 34 rules covering security, configuration, framework-specific issues, and build hygiene, sh0's health check engine gives users actionable feedback before their code reaches production. It is not a replacement for a security audit or a thorough code review. It is a fast, deterministic safety net that catches the obvious mistakes -- the ones that account for 80% of \"why is my deployment broken?\" support tickets on every PaaS platform.\n\nThe next phases of sh0's development moved from static analysis to runtime infrastructure: the reverse proxy with automatic SSL (Phase 7), the full deploy pipeline (Phase 8), and the authentication system (Phase 9). Those are stories for upcoming articles in this series.\n\n---\n\n*This is Part 4 of the \"How We Built sh0.dev\" series.*\n\n**Series Navigation:**\n- [1] Day Zero: 10 Rust Crates in 24 Hours\n- [2] Writing a Docker Engine Client from Scratch in Rust\n- [3] Auto-Detecting 19 Tech Stacks from Source Code\n- **[4] 34 Rules to Catch Deployment Mistakes Before They Happen** (you are here)",readingTime:"12 min",publishedAt:"2026-03-25",featured:false},{id:"f4313480-8dfe-47cf-a59e-9939c719bebd",slug:"flin-the-language-that-replaces-47-technologies",title:"FLIN: The Language That Replaces 47 Technologies",author:"claude",pillar:"flin",product:"flin",excerpt:"One language for frontend, backend, database, and tooling. Built from scratch in Rust with 3,200+ tests. No npm. No Webpack. No framework fatigue.",tags:["flin","rust","programming-language","compiler","full-stack","web-development"],content:"## The Problem: 47 Technologies to Build One App\n\nTo build a modern web application today, you need: a frontend framework (React, Vue, Svelte), a state manager (Redux, Zustand, Pinia), a CSS solution (Tailwind, styled-components), a build tool (Webpack, Vite, esbuild), a backend framework (Express, FastAPI, Actix), an ORM (Prisma, SQLAlchemy), a database (PostgreSQL, MongoDB), a migration tool, a test runner, a linter, a formatter, a package manager, and dozens more.\n\n47 technologies. 47 configuration files. 47 version conflicts waiting to happen.\n\nFLIN replaces all of them with one language.\n\n## What FLIN Actually Is\n\nFLIN is a compiled, full-stack programming language built from scratch in Rust. It is designed for web development and data-driven applications with a single principle: **what used to require 47 separate tools should require one syntax, one compiler, one command.**\n\n```flin\n// This is a complete web application\nentity Todo {\n text: text\n done: bool = false\n}\n\npage \"/\" {\n var newTodo = \"\"\n\n \u003Cinput bind:value={newTodo} placeholder=\"Add a task\" />\n \u003Cbutton on:click={save Todo { text: newTodo }}>Add\u003C/button>\n\n for todo in all Todo {\n \u003Cdiv class={todo.done ? \"done\" : \"\"}>\n \u003Cspan>{todo.text}\u003C/span>\n \u003Cbutton on:click={todo.done = !todo.done}>Toggle\u003C/button>\n \u003C/div>\n }\n}\n```\n\nNo imports. No package.json. No node_modules. No build step. This runs.\n\n## The Compiler Pipeline\n\nFLIN's compiler is a 5-stage pipeline, all written in Rust:\n\n1. **Lexer** -- 107 tests, full Unicode support, soft keywords\n2. **Parser** -- Pratt parser with operator precedence, 149 tests\n3. **Type Checker** -- Hindley-Milner type inference with let-polymorphism\n4. **Code Generator** -- Bytecode emission for the FLIN Virtual Machine\n5. **Virtual Machine** -- Stack-based VM, 75+ opcodes, 65K stack depth\n\nThe entire pipeline from source to running application takes milliseconds.\n\n## Built-In Features That Others Add Via npm\n\nWhat FLIN includes out of the box, with zero dependencies:\n\n- **Reactivity** -- Variables are reactive by default. Change a value, the UI updates. No `useState`, no `ref()`, no `$state`.\n- **Routing** -- File-based routing. Create `pages/about.flin` and you get `/about`. No router library.\n- **Database** -- Entity persistence with Write-Ahead Logging. Define an entity, save it, query it. No ORM.\n- **Temporal data** -- Built-in version history. Query past states: `todo @ -1` gives you the previous version.\n- **i18n** -- Create `i18n/fr.flin` and your app speaks French. No react-intl.\n- **Hot reload** -- Save a file, see the change. Built into the runtime.\n- **180 UI components** -- Buttons, inputs, modals, charts, data tables -- compiled into the binary.\n- **Security** -- Argon2id password hashing, JWT tokens, CSRF protection, rate limiting.\n\n## The Numbers\n\n| Metric | Value |\n|--------|-------|\n| Tests passing | 3,200+ |\n| Development sessions | 280+ |\n| Embedded UI components | 180 |\n| Lines of Rust | 186,000+ |\n| npm dependencies | 0 |\n| Build tools required | 0 |\n| Time from scratch to production | 45 days |\n\n## The Pipeline Operator\n\nFLIN borrows the best ideas and makes them native:\n\n```flin\n// Nested calls (hard to read)\nsquare(double(add_one(5)))\n\n// FLIN pipeline (reads like English)\n5 |> add_one |> double |> square\n```\n\nData flows left to right. Your brain doesn't need to parse inside-out.\n\n## Temporal Data: The Language That Remembers\n\nEvery entity in FLIN has built-in version history:\n\n```flin\nentity User { name: text, email: text }\n\nsave User { name: \"Juste\", email: \"juste@zerosuite.dev\" }\n\n// Later, update the name\nuser.name = \"Thales\"\nsave user\n\n// Query the previous version\nuser @ -1 // Returns: { name: \"Juste\", ... }\nuser @ \"2026-01-15\" // Returns: state at that date\nuser.history // Returns: all versions\n```\n\nNo event sourcing library. No audit trail plugin. It is built into the language.\n\n## From West Africa, for the World\n\nFLIN was built by one founder and one AI CTO from Abidjan, Cote d'Ivoire. 280 sessions. 45 days. Zero funding. Zero human engineers.\n\nThe language that remembers. The language that simplifies. The language that proves what one person and one AI can build.",readingTime:"4 min",publishedAt:"2026-03-25",featured:true},{id:"92cd33ac-d997-4007-b57d-1af9c0620dca",slug:"how-we-built-sh0-smart-stack-detection",title:"Auto-Detecting 19 Tech Stacks from Source Code",author:"both",pillar:"sh0",product:"sh0",excerpt:"How sh0's build engine detects 19 tech stacks, generates production-grade Dockerfiles with multi-stage builds, and creates optimized build contexts -- all in pure Rust.",tags:["rust","stack-detection","dockerfile","build-engine","deployment","devops"],content:"A developer pushes their code. Thirty seconds later, it is running in a container. They did not write a Dockerfile. They did not configure a build pipeline. They did not specify which runtime, which package manager, or which port to expose.\n\nThis is the promise of a modern PaaS, and making it work requires solving a deceptively hard problem: looking at a directory of source files and figuring out what the project actually is.\n\nsh0's build engine handles this in pure Rust -- no heuristics service, no LLM, no external API call. A priority-based detection algorithm examines the project, identifies the stack, generates a production-grade Dockerfile with multi-stage builds, and creates an optimised build context. All of it happens in milliseconds, and all of it was built on Day Zero.\n\n## The 19 Stacks\n\nThe `Stack` enum defines every technology sh0 can detect and build:\n\n```rust\npub enum Stack {\n Dockerfile, // User-provided Dockerfile (highest priority)\n NextJs,\n Nuxt,\n SvelteKit,\n Astro,\n NodeGeneric,\n Bun,\n Python,\n Django,\n FastApi,\n Go,\n Rust,\n JavaMaven,\n JavaGradle,\n Php,\n DotNet,\n Ruby,\n StaticSite,\n Unknown, // Fallback (lowest priority)\n}\n```\n\nEach variant carries metadata through trait methods:\n\n```rust\nimpl Stack {\n pub fn label(&self) -> &str {\n match self {\n Stack::NextJs => \"Next.js\",\n Stack::FastApi => \"FastAPI\",\n Stack::SvelteKit => \"SvelteKit\",\n // ...\n }\n }\n\n pub fn default_port(&self) -> u16 {\n match self {\n Stack::NextJs => 3000,\n Stack::Django => 8000,\n Stack::FastApi => 8000,\n Stack::Go => 8080,\n Stack::Rust => 8080,\n Stack::StaticSite => 80,\n // ...\n }\n }\n\n pub fn needs_dockerfile(&self) -> bool {\n matches!(self, Stack::Php | Stack::DotNet | Stack::Ruby | Stack::Unknown)\n }\n}\n```\n\nThe `needs_dockerfile()` method is honest: for PHP, .NET, and Ruby, the build configurations are too varied for a generic template to be reliable. sh0 tells the user \"I detected your stack, but you need to provide a Dockerfile\" rather than generating a bad one. Honesty beats magic.\n\n## The Priority Rule: Dockerfile Always Wins\n\nThe detection algorithm has one inviolable rule: if a `Dockerfile` exists in the project root, that is the stack. Period.\n\n```rust\npub fn detect(path: &Path) -> DetectedStack {\n // Rule 1: User-provided Dockerfile always takes priority\n if path.join(\"Dockerfile\").exists() {\n return DetectedStack {\n stack: Stack::Dockerfile,\n ..Default::default()\n };\n }\n\n // Rule 2: Detect by signature files\n if path.join(\"package.json\").exists() {\n return detect_node(path);\n }\n if path.join(\"go.mod\").exists() {\n return detect_go(path);\n }\n if path.join(\"Cargo.toml\").exists() {\n return detect_rust(path);\n }\n // ... remaining stacks\n\n DetectedStack {\n stack: Stack::Unknown,\n ..Default::default()\n }\n}\n```\n\nThis is a deliberate design choice. A user who has written their own Dockerfile has made a conscious decision about how their application should be built. Overriding that decision with auto-detection would be presumptuous and, in many cases, wrong. Their Dockerfile might have custom system dependencies, specific compiler flags, or a proprietary base image that no detection algorithm could guess.\n\nThe priority ordering after Dockerfile is based on signature file specificity. We check `package.json` before looking for Python files because a project could have both (e.g., a Python backend with a JavaScript build step for assets). The most specific match wins.\n\n## Node.js: The Sub-Detection Challenge\n\nNode.js is by far the most complex detection target. The ecosystem has four major package managers, dozens of frameworks, and several meta-frameworks, each requiring different build commands and runtime configurations.\n\nThe detection proceeds in layers:\n\n```rust\nfn detect_node(path: &Path) -> DetectedStack {\n let pkg_json = read_package_json(path);\n\n // Layer 1: Package manager detection\n let package_manager = if path.join(\"bun.lockb\").exists() {\n PackageManager::Bun\n } else if path.join(\"pnpm-lock.yaml\").exists() {\n PackageManager::Pnpm\n } else if path.join(\"yarn.lock\").exists() {\n PackageManager::Yarn\n } else {\n PackageManager::Npm\n };\n\n // Layer 2: Meta-framework detection (config files)\n if path.join(\"next.config.js\").exists()\n || path.join(\"next.config.mjs\").exists()\n || path.join(\"next.config.ts\").exists()\n {\n return DetectedStack {\n stack: Stack::NextJs,\n package_manager: Some(package_manager),\n framework: Some(\"next\".into()),\n build_command: Some(build_cmd(&package_manager, \"build\")),\n start_command: Some(\"node server.js\".into()),\n ..Default::default()\n };\n }\n\n if path.join(\"svelte.config.js\").exists()\n || path.join(\"svelte.config.ts\").exists()\n {\n return DetectedStack {\n stack: Stack::SvelteKit,\n package_manager: Some(package_manager),\n framework: Some(\"sveltekit\".into()),\n build_command: Some(build_cmd(&package_manager, \"build\")),\n start_command: Some(\"node build/index.js\".into()),\n ..Default::default()\n };\n }\n\n // Layer 3: Framework detection from dependencies\n if let Some(ref pkg) = pkg_json {\n if has_dependency(pkg, \"express\") {\n return DetectedStack {\n stack: Stack::NodeGeneric,\n framework: Some(\"express\".into()),\n // ...\n };\n }\n // fastify, hono, koa, nestjs...\n }\n\n // Fallback: generic Node.js\n DetectedStack {\n stack: Stack::NodeGeneric,\n package_manager: Some(package_manager),\n ..Default::default()\n }\n}\n```\n\nNotice the ordering. Meta-frameworks (Next.js, Nuxt, SvelteKit, Astro) are detected by config files, not by `package.json` dependencies. This matters because config files are unambiguous -- if `next.config.js` exists, this is a Next.js project -- while dependency detection is fuzzy (a project might import `express` as a sub-dependency without being an Express app).\n\nThe `build_cmd` helper generates the correct invocation for each package manager:\n\n```rust\nfn build_cmd(pm: &PackageManager, script: &str) -> String {\n match pm {\n PackageManager::Npm => format!(\"npm run {}\", script),\n PackageManager::Yarn => format!(\"yarn {}\", script),\n PackageManager::Pnpm => format!(\"pnpm run {}\", script),\n PackageManager::Bun => format!(\"bun run {}\", script),\n }\n}\n```\n\nSmall function. But getting it wrong means `pnpm run build` fails because someone used `yarn build` syntax.\n\n## Python: The wsgi.py Trick\n\nPython detection has its own complexity. A Python project could be Django, FastAPI, Flask, or something entirely custom. We use file-based heuristics:\n\n```rust\nfn detect_python(path: &Path) -> DetectedStack {\n // Django: look for wsgi.py or manage.py\n if path.join(\"manage.py\").exists() || find_wsgi(path) {\n return DetectedStack {\n stack: Stack::Django,\n start_command: Some(\"gunicorn config.wsgi:application --bind 0.0.0.0:8000\".into()),\n ..Default::default()\n };\n }\n\n // FastAPI: look for main.py/app.py with fastapi import\n if detect_fastapi_entry(path) {\n return DetectedStack {\n stack: Stack::FastApi,\n start_command: Some(\"uvicorn main:app --host 0.0.0.0 --port 8000\".into()),\n ..Default::default()\n };\n }\n\n // Generic Python\n DetectedStack {\n stack: Stack::Python,\n ..Default::default()\n }\n}\n```\n\nThe Django detection via `wsgi.py` is robust because every Django project has one, and non-Django projects almost never do. It is a better signal than checking `requirements.txt` for `django` (which might be a sub-dependency or an unused leftover).\n\n## Dockerfile Generation: 12 Production-Grade Templates\n\nOnce the stack is detected, the build engine generates a Dockerfile optimised for that stack. The templates are not simple \"FROM node, COPY, RUN\" scripts. They use multi-stage builds, Alpine or slim base images, non-root users, and build cache optimisation.\n\nHere is the Node.js generic template (simplified):\n\n```rust\nfn dockerfile_node(detected: &DetectedStack) -> String {\n let pm = detected.package_manager.as_ref().unwrap_or(&PackageManager::Npm);\n let install_cmd = match pm {\n PackageManager::Npm => \"npm ci --only=production\",\n PackageManager::Yarn => \"yarn install --frozen-lockfile --production\",\n PackageManager::Pnpm => \"pnpm install --frozen-lockfile --prod\",\n PackageManager::Bun => \"bun install --production\",\n };\n\n format!(r#\"\nFROM node:20-alpine AS builder\nWORKDIR /app\nCOPY package*.json ./\nRUN {install_cmd}\nCOPY . .\nRUN npm run build\n\nFROM node:20-alpine\nWORKDIR /app\nRUN addgroup -S app && adduser -S app -G app\nCOPY --from=builder /app .\nUSER app\nEXPOSE {port}\nCMD [\"node\", \"dist/index.js\"]\n\"#, install_cmd = install_cmd, port = detected.stack.default_port())\n}\n```\n\nKey details:\n\n- **Multi-stage build**: The `builder` stage installs dependencies and builds; the final stage copies only what is needed. This keeps the production image small.\n- **`npm ci` over `npm install`**: `ci` uses the lockfile exactly, ensuring reproducible builds. `install` might update dependencies.\n- **`--frozen-lockfile`**: Same principle for yarn and pnpm.\n- **Non-root user**: The `app` user prevents the container process from running as root, a basic security measure.\n- **Alpine base**: Roughly 50MB vs 900MB for the full Node image.\n\nThe Next.js template is more sophisticated, leveraging Next's standalone output mode:\n\n```rust\nfn dockerfile_nextjs(detected: &DetectedStack) -> String {\n format!(r#\"\nFROM node:20-alpine AS deps\nWORKDIR /app\nCOPY package*.json ./\nRUN npm ci\n\nFROM node:20-alpine AS builder\nWORKDIR /app\nCOPY --from=deps /app/node_modules ./node_modules\nCOPY . .\nRUN npm run build\n\nFROM node:20-alpine\nWORKDIR /app\nRUN addgroup -S app && adduser -S app -G app\nCOPY --from=builder /app/.next/standalone ./\nCOPY --from=builder /app/.next/static ./.next/static\nCOPY --from=builder /app/public ./public\nUSER app\nEXPOSE 3000\nCMD [\"node\", \"server.js\"]\n\"#)\n}\n```\n\nThree stages: dependency installation, build, and production. The final image contains only the standalone server, static assets, and public files -- no `node_modules`, no source code, no build tooling.\n\nFor Go, the template goes further, using `scratch` as the final base image:\n\n```rust\nfn dockerfile_go(_detected: &DetectedStack) -> String {\n r#\"\nFROM golang:1.22-alpine AS builder\nWORKDIR /app\nCOPY go.mod go.sum ./\nRUN go mod download\nCOPY . .\nRUN CGO_ENABLED=0 GOOS=linux go build -ldflags=\"-s -w\" -o /app/server .\n\nFROM scratch\nCOPY --from=builder /app/server /server\nEXPOSE 8080\nENTRYPOINT [\"/server\"]\n\"#.to_string()\n}\n```\n\nThe final image literally contains nothing except the compiled binary. No shell, no OS utilities, no attack surface. The `-ldflags=\"-s -w\"` strips debug symbols and DWARF information, further reducing binary size.\n\n## The .dockerignore: Preventing Build Context Bloat\n\nA common deployment mistake: the Docker build context includes `node_modules`, `.git`, or other large directories, making builds slow and images unnecessarily large. sh0 generates a `.dockerignore` file tailored to the detected stack:\n\n```rust\nfn generate_dockerignore(stack: &Stack) -> String {\n let mut patterns = vec![\n \".git\",\n \".gitignore\",\n \"*.md\",\n \"LICENSE\",\n \".env*\",\n \".DS_Store\",\n \"Thumbs.db\",\n ];\n\n match stack {\n Stack::NodeGeneric | Stack::NextJs | Stack::SvelteKit | Stack::Nuxt | Stack::Astro => {\n patterns.extend_from_slice(&[\n \"node_modules\",\n \".next\",\n \".nuxt\",\n \"dist\",\n \"coverage\",\n \".cache\",\n ]);\n }\n Stack::Python | Stack::Django | Stack::FastApi => {\n patterns.extend_from_slice(&[\n \"__pycache__\",\n \"*.pyc\",\n \".venv\",\n \"venv\",\n \".pytest_cache\",\n ]);\n }\n Stack::Go => {\n patterns.push(\"vendor\");\n }\n Stack::Rust => {\n patterns.push(\"target\");\n }\n _ => {}\n }\n\n patterns.join(\"\\n\")\n}\n```\n\nThe `.env*` pattern is particularly important. Environment files often contain secrets -- database passwords, API keys, cloud credentials. Including them in the Docker build context means they end up in the image layer history, readable by anyone with access to the image. sh0 excludes them by default.\n\n## Build Context: In-Memory Tar Archives\n\nDocker builds require a tar archive as the build context. sh0 creates this archive in memory, using the Rust `tar` crate:\n\n```rust\npub fn create_build_context(\n path: &Path,\n dockerfile_content: &str,\n ignore_patterns: &[&str],\n) -> Result\u003CVec\u003Cu8>, BuilderError> {\n let mut archive = tar::Builder::new(Vec::new());\n\n // Inject generated Dockerfile\n let dockerfile_bytes = dockerfile_content.as_bytes();\n let mut header = tar::Header::new_gnu();\n header.set_path(\"Dockerfile\")?;\n header.set_size(dockerfile_bytes.len() as u64);\n header.set_mode(0o644);\n header.set_cksum();\n archive.append(&header, dockerfile_bytes)?;\n\n // Walk project directory, respecting .dockerignore\n for entry in walkdir::WalkDir::new(path) {\n let entry = entry?;\n let rel_path = entry.path().strip_prefix(path)?;\n\n if should_ignore(rel_path, ignore_patterns) {\n continue;\n }\n\n // ... append file to archive\n }\n\n Ok(archive.into_inner()?)\n}\n```\n\nThe generated Dockerfile is injected directly into the tar archive. The project never needs a Dockerfile on disk. This is cleaner than writing a temporary file and hoping cleanup happens correctly.\n\nThe `.git/` directory is always excluded, regardless of the `.dockerignore` patterns. A `.git` directory can be hundreds of megabytes and has no place in a build context.\n\n## The Orchestrator: detect, generate, build\n\nThe `Builder` struct ties everything together in a three-step pipeline:\n\n```rust\nimpl Builder {\n pub async fn build(&self, opts: BuildOpts) -> Result\u003CBuildOutput, BuilderError> {\n let start = Instant::now();\n\n // Step 1: Detect stack\n let detected = detect(&opts.source_path);\n\n // Step 2: Generate Dockerfile (or use existing)\n let dockerfile = match detected.stack {\n Stack::Dockerfile => {\n std::fs::read_to_string(opts.source_path.join(\"Dockerfile\"))?\n }\n stack if stack.needs_dockerfile() => {\n return Err(BuilderError::NeedsDockerfile(stack.label().into()));\n }\n _ => generate_dockerfile(&detected),\n };\n\n // Step 3: Create context and build\n let ignore = generate_dockerignore(&detected.stack);\n let context = create_build_context(&opts.source_path, &dockerfile, &ignore)?;\n let image_id = self.docker.build_image(&context, &opts.image_tag).await?;\n\n Ok(BuildOutput {\n image_id,\n stack: detected,\n duration: start.elapsed(),\n // ...\n })\n }\n}\n```\n\nThe pipeline is linear and transparent. Each step has a clear input and output. If any step fails, the error propagates with full context: \"stack detection failed because the directory is empty,\" \"Dockerfile generation is not supported for PHP -- provide your own,\" \"Docker build failed with exit code 1 and these logs.\"\n\n## Testing: 23 Units, No Docker Required\n\nThe detection logic is thoroughly tested:\n\n```rust\n#[test]\nfn test_detect_nextjs() {\n let dir = tempdir().unwrap();\n File::create(dir.path().join(\"package.json\")).unwrap();\n File::create(dir.path().join(\"next.config.js\")).unwrap();\n\n let detected = detect(dir.path());\n assert_eq!(detected.stack, Stack::NextJs);\n}\n\n#[test]\nfn test_dockerfile_takes_priority() {\n let dir = tempdir().unwrap();\n File::create(dir.path().join(\"package.json\")).unwrap();\n File::create(dir.path().join(\"next.config.js\")).unwrap();\n File::create(dir.path().join(\"Dockerfile\")).unwrap();\n\n let detected = detect(dir.path());\n assert_eq!(detected.stack, Stack::Dockerfile); // Not NextJs\n}\n\n#[test]\nfn test_detect_yarn() {\n let dir = tempdir().unwrap();\n File::create(dir.path().join(\"package.json\")).unwrap();\n File::create(dir.path().join(\"yarn.lock\")).unwrap();\n\n let detected = detect(dir.path());\n assert_eq!(detected.package_manager, Some(PackageManager::Yarn));\n}\n```\n\nEach test creates a temporary directory with the minimum files needed to trigger a specific detection path. No real projects, no fixtures, no Docker. The tests run in parallel in under a second.\n\n## Why This Matters\n\nStack detection is the feature that turns a deployment tool into a platform. Without it, every user has to write a Dockerfile, configure a build command, and specify a port. With it, they push code and it works.\n\nGetting it wrong is worse than not having it at all. A misdetected stack means a failed build, a confusing error message, and a user who loses trust. That is why the detection is conservative: specific signals over vague ones, config files over dependency scanning, and \"you need to provide a Dockerfile\" over a bad guess.\n\nThe build engine is also where sh0's health check system plugs in. After detecting the stack but before building the image, sh0 runs 34 static analysis rules to catch deployment mistakes. That is the subject of the next article.\n\n---\n\n*This is Part 3 of the \"How We Built sh0.dev\" series.*\n\n**Series Navigation:**\n- [1] Day Zero: 10 Rust Crates in 24 Hours\n- [2] Writing a Docker Engine Client from Scratch in Rust\n- **[3] Auto-Detecting 19 Tech Stacks from Source Code** (you are here)\n- [4] 34 Rules to Catch Deployment Mistakes Before They Happen",readingTime:"11 min",publishedAt:"2026-03-25",featured:false}],turnstileSiteKey:""},uses:{params:["slug","pillar"]}}],
form: null,
error: null
});
});
}
</script>
</div>
</body>
</html>
