Reverse engineering study · meta/astryx (MIT) vs Granite Lens · read from source, 2026-11-10

Astryx, dissected — side by side with Granite Lens

You asked what their icons and things actually are. I read the icon system end to end in the repo. The answer is not what the star count suggests.

The finding: Astryx does not ship an icon library. It ships a naming system. Core defines 29 semantic names (search, warning, success, close…). When a component needs one, a registry resolves it: the active theme’s icons first, then any the app registered, then a set of built-in fallbacks. The fallbacks are 30 tiny hand-drawn SVGs, about 1.4 KB total, and the source file says so itself: themes should override them with a proper icon library such as Heroicons, Lucide, or Material Symbols. The neutral theme does exactly that — its icon file maps every name to a Lucide component. The art is Lucide’s. The system is Meta’s.

How the icon system works

One glyph, four sanctioned sizes. Icons are drawn on a 24×24 grid, 1.5px stroke, currentColor so they inherit text color. Sizes are a fixed scale, not freehand:

xsm · 0.75rem

sm · 1rem

md · 1.25rem

lg · 1.5rem

The full semantic vocabulary — every name a component is allowed to ask for:

close chevronDown chevronLeft chevronRight chevronsLeft chevronsRight check success error warning info calendar clock externalLink menu moreHorizontal search upload arrowUp arrowDown arrowsUpDown funnel eyeSlash viewColumns copy checkDouble wrench stop microphone

All 30 built-in fallback glyphs, as extracted

These are the real fallback SVGs, pulled from packages/core/src/Icon/defaultIcons.tsx and rendered at 26px. This is the entire icon art that ships inside Astryx core.

chevronDown

numberInput:stepperDown

chevronLeft

chevronRight

chevronsLeft

chevronsRight

check

success

error

warning

info

calendar

clock

externalLink

moreHorizontal

upload

arrowUp

arrowDown

arrowsUpDown

funnel

eyeSlash

viewColumns

copy

checkDouble

wrench

stop

microphone

numberInput:stepperDown

Function by function, side by side

Function	Astryx (fallback glyph shown)	Granite Lens today
Search	searchtheme swaps in the Lucide version	The Lens search box has no icon at all. The button just says “Go” in text.
Close / dismiss	closetheme swaps in the Lucide version	Nothing on the Lens ever closes or dismisses. No such control exists.
Warning / not yet	warningtheme swaps in the Lucide version	The Lens status box says “NOT YET FITTED” in red capital text. No glyph.
Success / real	successtheme swaps in the Lucide version	The Lens writes “REAL” in green text in the same status box. No glyph.
Info	infotheme swaps in the Lucide version	The coverage note is a plain bordered box with bold text. No glyph.
External link	externalLinktheme swaps in the Lucide version	Links to the repo and Zenodo are plain blue text. No glyph.
Paging	chevronRighttheme swaps in the Lucide version	The Lens uses a text button, “Show more,” instead of chevron controls.
Filter	funneltheme swaps in the Lucide version	The layer filter is a plain dropdown with a text label.

The only icon Granite Lens has

Astryx core

30 fallback glyphs plus a registry that swaps in a full library per theme. The repo carries 8 theme packages: butter, chocolate, gothic, matcha, neutral, probe, stone, y2k.

Granite Lens

The browser-tab favicon. One hand-drawn circle. Every control on the site is text.

Color, side by side

Astryx neutral theme

Colors are generated: one seed per family runs through an OKLCH recipe (astryx-oklch-v1) and comes out as a 21-stop ramp, light and dark. Seeds:

Neutral
#777777

Red
#d62830

Orange
#d57113

Yellow
#f8c723

Green
#358a3a

Teal
#0c7365

Cyan
#0c6f82

Blue
#0074e2

Purple
#980fb2

Pink
#b10e69

Granite Lens

Colors are hand-picked: six fixed values in one CSS block, chosen once, no ramps, no dark mode.

paper bg
#faf8f3

ink
#1b1d1f

gold accent
#a87c0f

link blue
#2f5d8a

good green
#2e7d4f

bad red
#b3402f

Type: Astryx neutral sets its face as Figtree (loaded from Google Fonts). Granite Lens uses system serif and sans only, nothing loaded.

Components, side by side

Astryx core — 122 component folders

AlertDialog · AppShell · AspectRatio · Avatar · AvatarGroup · Badge · Banner · Blockquote · BottomSheet · Breadcrumbs · Button · ButtonGroup · Calendar · Card · Carousel · Center · Chat · CheckboxInput · CheckboxList · Citation · ClickableCard · Code · CodeBlock · Collapsible · CommandPalette · ComplexSelector · ContextMenu · DateInput · DateRangeInput · DateTimeInput · Dialog · Divider · Drawer · DropdownMenu · EmptyState · Field · FieldStatus · FileInput · FormLayout · Grid · HStack · Heading · HoverCard · Icon · IconButton · Indicator · InfoTip · InputGroup · InteractiveRoleContext · Item · Kbd · Layer · Layout · Lightbox · Link · List · Markdown · MetadataList · MobileNav · MoreMenu · MultiSelector · NavIcon · NavItem · NavMenu · NumberInput · Outline · OverflowList · Overlay · Pagination · Popover · PowerSearch · ProgressBar · RadioList · Resizable · ScrollableArea · Section · SegmentedControl · SelectableCard · Selector · SideNav · SizeContext · Skeleton · Slider · SnapPaging · Spinner · Stack · StatusDot · Stepper · Switch · TabList · Table · Text · TextArea · TextInput · Thumbnail · TimeInput · Timer · Timestamp · Toast · ToggleButton · Token · Tokenizer · Toolbar · Tooltip · TopNav · TreeList · Typeahead · VStack · VisuallyHidden · __tests__ · animator · dragToSnapPoints · gestures · hooks · i18n · internal · keyboard · motion · privateAttributes · reorderable · theme · utils

Granite Lens — 9 hand-rolled pieces

Topbar · search box · heatmap grid · neuron tiles · label chips · segmented strip · SVG chart · data table · cards. Every one written by hand in one CSS file and one JS file.

What this means for the Lens: if you want these icons on the site, the move Astryx itself prescribes is the cheap one — take the open Lucide glyphs (the same art the neutral theme uses), give them semantic slots the Astryx way, and inline them as plain SVG. No React, no build step, the site stays as fast as it is. Say the word and I will wire a set in: search, status, external link, chevrons, filter.

Sources, all read 2026-11-10: github.com/meta/astryx — packages/core/src/Icon/defaultIcons.tsx, globalIconRegistry.tsx, IconSize.stylex.ts, packages/themes/neutral/src/icons.tsx, palette.config.json, fonts.css, packages/core/src (component folders). Astryx is MIT licensed; glyphs on this page are shown for study under that license. Nothing from this page has been put into Granite Lens.