Keyline Icons

114 free AI and sparkle icons for React, React Native and Figma

Six corner arrows turn for a reply, a forward, a redirect or a branch in a flow.

v1.1.04 min read

AI features get one mark across the whole set: the same two stars, at one size, on 76 different objects. That is what lets AI search, an inbox summary and a chart that explains itself read as one feature in an app.

React Native gets the whole set in this release, under the same names as React. Twenty maths signs and four Mac keys are among the other new icons, and the set now stands at 1,114: 8,912 SVGs.

stroke
two-tone
duotone
fill
Six objects carrying the pair of stars, then the command key and the infinity sign.

Every sparkle is the same pair

The sparkle icons live in one AI category now, where they used to sit beside their plain twins: mail-sparkles under Mail, folder-sparkles under Files. Searching for any object still finds its sparkle version. A few to start with:

  • AI search: search-sparkles.
  • A summary or a drafted reply: message-sparkles and mail-sparkles.
  • Insights on a report: chart-line-sparkles and chart-bar-sparkles.
  • Smart files and folders: file-sparkles and folder-sparkles.
  • An assistant: bot-circle and brain-sparkles.
Twenty-five of the 76.

Every one carries the same two stars, the larger 8 pixels across and the smaller 5, in the same place beside the object. Smaller stars were tried, and at 16 pixels they stopped looking like stars and looked like a speck of dirt.

A star never cuts into the drawing it marks. Where the pair couldn't fit without breaking an outline, the icon wasn't made.

pen-sparkles had shipped with two plus signs where the stars go. The pen didn't move. The plus signs became stars, and the star is the bigger of the two, which is the point.

The whole pen, old marks laid over new
The same pen in both
The top left corner
A plus 6 pixels wide, a star of 8
The first colour is the plus sign as it shipped, the second the star that replaced it, and the dark is the pen, identical in both.
the plus signs as they shippedthe stars as they are nowlines that did not move

Maths signs, and Mac keys that stay outlines

The maths signs are for a calculator or a formula editor: divide, equal, equal-not, equal-approximately, asterisk, hash, infinity, parentheses, radical and variable. Four of them also come in a circle and in a square, for a button that wants a frame.

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

The four keys, command, option, escape and space, are drawn as a Mac prints them, for shortcut hints. They stay outlines in every style, because a solid keycap symbol reads as a blob.

The same names in React Native

The whole set installs in React Native and Expo as @keyline-icons/react-native, with the same names as the React package. Check is Check, so code shared between web and phone changes only the package name.

import { Check } from "@keyline-icons/react-native"
import { Bell } from "@keyline-icons/react-native/duotone"

<Check size={16} color="#2563eb" />

The one difference is colour. On the web an icon takes the colour of the text around it, and a phone screen has no text colour to inherit, so each icon takes a color prop. The grey in two-tone and duotone follows it, so one prop still sets both tones.

Getting it

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

Install React, React Native, Vue, Svelte and Solid, 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.