v1.1.0: React Native, 114 new drawings

The set is 1,114 drawings. Each one comes in stroke, two-tone, duotone and fill, rounded or sharp: 8,912 SVGs.

Seventy-six of the new ones carry a star. Twenty are maths marks. Four are command, option, escape and space. Then corner turns, two file kinds, eject, a line that goes both ways, and a plain wand.

stroke
two-tone
duotone
fill

Eight of the new drawings, one style to a row, in that same order.

One shelf for everything with a star

Sparkle versions used to sit next to their plain twin. mail-sparkles lived under Mail, folder-sparkles under Files. You only found them if you already knew the name.

They're one family now: bots, a brain on a circuit, two bare stars, and all the new ones. Every star is the same pair, in the same place relative to the thing it marks. You can still search any of them by the object they mark.

Thirty-six from the new shelf, which the category list calls AI.

One size for every star

Early drafts put the stars wherever they fit. At 16px they stopped looking like stars. They looked like a speck in the corner.

A sparkle has to read as a sparkle at 16 pixels, or it's just a small mark next to something else.

So there's one pair now: lead star eight units, second star five, with clear space from each other and from the drawing. Two icons drop the second star to four units, because five wouldn't fit. Nothing gets cut: a star never breaks an outline, an axis, or a closed shape. If the pair couldn't sit without breaking something, the drawing didn't ship.

pen-sparkles shipped earlier with plus signs instead of stars. The pen itself never moved. Only the marks did. The star is bigger than the plus it replaced. That's the point.

The whole pen, old marks over new

Same pen in both

The top left corner, same two drawings

A plus of six units, a star of eight

One drawing painted over the other. The rose is the plus sign as it shipped, the emerald is the star that replaced it, and the dark is the pen, identical in both.

the plus signs as they shippedthe stars as they are nowink that did not move

Maths marks and Mac keys

The maths marks are for sums and formulas: asterisk, divide, equal (plus approximate and not-equal), hash, infinity, parentheses, radical, variable, and a barred x. Four of them also come circled and squared, for a toolbar that wants a button instead of a symbol.

The plain marks first, the eight in a circle or a square last.

The four modifier keys are drawn the way a Mac prints them, for shortcut hints and keycaps. Stroke only. A filled keycap stops reading as a key.

The four keys, at the weight the rest of the set uses.

Corners, files and a wand

Six corner turns, for a reply, a forward, a redirect, or a branch in a flow. Plus a big arrow with a dash over its head, and an arrow that runs into a line and stops.

The six turns first, the two straight arrows after.

The five singles: file-audio, file-video, eject, trending-up-down and wand.

Now in React Native

The whole set works in React Native and Expo, as @keyline-icons/react-native. Same drawings, same names as the React package. Check is Check. Styles live at /two-tone, /duotone and /fill. Sharp corners at /sharp. Shared code between web and phone only changes the package name.

The one difference is colour. On the web an icon inherits text colour. A phone has nothing to inherit from, so each icon takes a color prop. The grey halves of two-tone and duotone follow it, so one colour still sets both tones.

Getting it

Browse the icons Every drawing, all four styles, both corner shapes.

Install React, React Native, the shadcn/ui registry, the CLI, the MCP server, and the Figma plugin.

Read the changelog What every release added, with the drawings in it.