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 Thumbnail

Keyline Icons

585 icons on one 24 grid, built for shadcn/ui

Design Tools
Open Source
Icons
GitHub
Visit WebsiteSee on Product HuntGithubFigmaTwitter

Hunted byZafar IsmatullaevZafar Ismatullaev

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.

Top comment

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.

Comment highlights

No comment highlights available yet. Please check back later!

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.

Keyline Icons was featured in Design Tools (262.2k followers), Open Source (68.8k followers), Icons (9.1k followers) and GitHub (41.4k followers) on Product Hunt. Together, these topics include over 86.9k products, making this a competitive space to launch in.

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.

Want to see how Keyline Icons stacked up against nearby launches in real time? Check out the live launch dashboard for upvote speed charts, proximity comparisons, and more analytics.