This product was not featured by Product Hunt yet. It will not be visible on their landing page and won't be ranked (cannot win product of the day regardless of upvotes).
Product upvotes vs the next 3
Waiting for data. Loading
Product comments vs the next 3
Waiting for data. Loading
Product upvote speed vs the next 3
Waiting for data. Loading
Product upvotes and comments
Waiting for data. Loading
Product vs the next 3
Loading
Keyline Icons
585 icons on one 24 grid, built for shadcn/ui
585 drawings on a single 24x24 grid, in stroke, duotone and fill: 1,497 SVGs in all. Built to one standard rather than collected: 2px keylines, the same corner radii, the same gap between parts, every drawing. Duotone and fill are derived from the stroke drawing, so the three weights can never disagree. Copy one from the site, npm i @keyline-icons/react, add one at a time with the CLI, or drop one onto a Figma canvas with the plugin. MIT, no attribution.
I wanted an icon set where every drawing had been built the same way rather than collected, so I drew one: 585 icons, all on a 24x24 grid, all 2px keylines, all with the same corner radii and the same spacing between parts.
Three weights come off that one drawing. Stroke is the full 585. Duotone is the same outline over a flat plate, and fill is the solid shape with the detail knocked back out of it, so those two are 480 and 432 rather than 585. Duotone and fill need a region to fill and not every glyph has one: bar-chart is three open strokes with no interior, while square-bar-chart puts the same glyph in a container and gains both. That is measured off each outline rather than decided by hand, which is why the counts are uneven.
There are four ways in, depending on where you work: copy an SVG or a JSX snippet from the site, npm i @keyline-icons/react, add one file at a time with the CLI, or run the Figma plugin over the file you already have open. MIT, no attribution.
Requests are how most of the recent batches happened. If something is missing, say so here and I will draw it.
About Keyline Icons on Product Hunt
“585 icons on one 24 grid, built for shadcn/ui”
Keyline Icons was submitted on Product Hunt and earned 3 upvotes and 1 comments, placing #149 on the daily leaderboard. 585 drawings on a single 24x24 grid, in stroke, duotone and fill: 1,497 SVGs in all. Built to one standard rather than collected: 2px keylines, the same corner radii, the same gap between parts, every drawing. Duotone and fill are derived from the stroke drawing, so the three weights can never disagree. Copy one from the site, npm i @keyline-icons/react, add one at a time with the CLI, or drop one onto a Figma canvas with the plugin. MIT, no attribution.
On the analytics side, Keyline Icons competes within Design Tools, Open Source, Icons and GitHub — topics that collectively have 381.5k followers on Product Hunt. The dashboard above tracks how Keyline Icons performed against the three products that launched closest to it on the same day.
Who hunted Keyline Icons?
Keyline Icons was hunted by Zafar Ismatullaev. A “hunter” on Product Hunt is the community member who submits a product to the platform — uploading the images, the link, and tagging the makers behind it. Hunters typically write the first comment explaining why a product is worth attention, and their followers are notified the moment they post. Around 79% of featured launches on Product Hunt are self-hunted by their makers, but a well-known hunter still acts as a signal of quality to the rest of the community. See the full all-time top hunters leaderboard to discover who is shaping the Product Hunt ecosystem.
For a complete overview of Keyline Icons including community comment highlights and product details, visit the product overview.
Zafar Ismatullaev