# AI use cases for Keyline Icons (keyline-icons/keyline-icons)

Repo: [keyline-icons/keyline-icons](https://github.com/keyline-icons/keyline-icons) | Use cases: 4 | Page: https://dedupedai.com/use-cases/keyline-icons-keyline-icons/

Keyline Icons is a free MIT icon set of 1,568 icons in four styles and two corner treatments, built for shadcn/ui and available as React, React Native, shadcn registry, CLI, MCP server, Iconify and Figma assets.

This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL.

- Use Keyline icons in a React or React Native app: https://dedupedai.com/use-cases/keyline-icons-keyline-icons/react-app-keyline-icons/
- Add a Keyline icon to a shadcn/ui project: https://dedupedai.com/use-cases/keyline-icons-keyline-icons/shadcn-registry-own-icon-source/
- Let an AI assistant pick real icons from the set: https://dedupedai.com/use-cases/keyline-icons-keyline-icons/mcp-agent-picks-real-icons/
- Drop Keyline icons into a Figma file: https://dedupedai.com/use-cases/keyline-icons-keyline-icons/figma-insert-keyline-icons/

## How to use Keyline icons in a React or React Native app with Keyline Icons

Repo: [keyline-icons/keyline-icons](https://github.com/keyline-icons/keyline-icons) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

Install the React package and import named icons, with style entry points and currentColor sizing.

**Who it is for:** A front-end developer building a React or React Native screen who needs a consistent set of icons in several styles.

**The problem:** Hand-picking SVGs for each screen is slow, and mixing icon sets makes the interface look uneven.

**The outcome:** Icons from one 24x24 grid render as components in your app, in the style and corner treatment you choose.

### Steps

1. Run `npm i @keyline-icons/react` in your React project.
2. Import icons by name from `@keyline-icons/react`, and import the style you want from an entry point such as `@keyline-icons/react/duotone` or `@keyline-icons/react/sharp/fill`.
3. Set the size with the `size` prop and the colour through CSS, since the components colour from `currentColor`.
4. For React Native, run `npm i @keyline-icons/react-native react-native-svg` and pass the colour with the `color` prop.

### Prompt to paste into your agent

```text
In the repo <path to your React project>, install @keyline-icons/react, add an import for the Check and Folder icons, and render them in a component. Report the import lines you wrote and confirm that Folder is imported from an entry point that exists for the style you chose.
```

### Caveat

The README says Check exists only in the stroke and sharp entry points, so check each style before you import a name.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/keyline-icons-keyline-icons/react-app-keyline-icons/

## How to add a Keyline icon to a shadcn/ui project with Keyline Icons

Repo: [keyline-icons/keyline-icons](https://github.com/keyline-icons/keyline-icons) | Difficulty: Intermediate | Time: 15 minutes | Basis: From the README

Add one icon as self-contained source through the shadcn CLI, without installing the whole package.

**Who it is for:** A developer on a shadcn/ui project who wants a few icons as files they can edit.

**The problem:** Installing a whole icon package to use two or three icons adds a dependency the team may not want.

**The outcome:** Each icon arrives as a standalone component file that can be renamed or edited inside the project.

### Steps

1. Add the registry entry `"@keyline": "https://keylineicons.com/r/{name}.json"` under `registries` in `components.json`.
2. Run `npx shadcn add @keyline/bell` to add the stroke bell icon.
3. Run `npx shadcn add @keyline/fill/bell` or `npx shadcn add @keyline/sharp/fill/bell` to add a different style or corner treatment.
4. Use the generated component in your code, since it imports nothing from the package.

### Prompt to paste into your agent

```text
In the shadcn/ui project at <path to project>, add the Keyline bell icon from the @keyline registry using npx shadcn add, then confirm the generated component file exists and contains no import from @keyline-icons. Report the file path that shadcn wrote.
```

### Caveat

The site registry depends on keylineicons.com being reachable, so use the GitHub install command from the README if you cannot reach it.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/keyline-icons-keyline-icons/shadcn-registry-own-icon-source/

## How to let an AI assistant pick real icons from the set with Keyline Icons

Repo: [keyline-icons/keyline-icons](https://github.com/keyline-icons/keyline-icons) | Difficulty: Intermediate | Time: 15 minutes | Basis: From the README

Connect the MCP server so an assistant searches the set and returns real SVG and React imports.

**Who it is for:** A developer using an AI coding assistant who wants it to choose existing icon names instead of guessing them.

**The problem:** Assistants often invent icon names that do not exist, which breaks the build or forces manual fixes.

**The outcome:** The assistant searches the Keyline set, returns SVG source in the style you request, and gives a React import line for an icon that exists.

### Steps

1. Run `claude mcp add keyline-icons -- npx -y @keyline-icons/mcp` to register the server.
2. Ask the assistant for an icon by meaning, such as a bell for notifications, and let it search the set.
3. Ask for the style and corners you want, such as fill and sharp.
4. Check the returned name with `npx @keyline-icons/cli search bell` before you commit the code. (inferred, check the README)

### Prompt to paste into your agent

```text
Using the keyline-icons MCP server, search the Keyline Icons set for an icon matching <icon meaning>, and return its SVG in the stroke style with rounded corners plus the React import line. Verify that the returned name appears in the search results before you use it in <path to project>.
```

### Caveat

The README says other MCP clients use the same command, but it only gives the Claude command, so check your client's own MCP setup.

Risk, remote script: The `npx -y` command downloads and runs the @keyline-icons/mcp package from npm, so review the package before you let it run in your environment.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/keyline-icons-keyline-icons/mcp-agent-picks-real-icons/

## How to drop Keyline icons into a Figma file with Keyline Icons

Repo: [keyline-icons/keyline-icons](https://github.com/keyline-icons/keyline-icons) | Difficulty: Beginner | Time: 15 minutes | Basis: From the README

Insert any icon in any style from the Figma plugin, or use the Community file components.

**Who it is for:** A designer building a screen in Figma who needs icons that match a single set.

**The problem:** Searching for matching icons across sources in Figma takes time and produces mixed styles.

**The outcome:** Icons from one set appear in the Figma file in the style and corner treatment you choose.

### Steps

1. Open the Keyline Icons plugin page on Figma Community and install the plugin.
2. Run the plugin in the Figma file you already have open and pick an icon, a style and a corner treatment.
3. Or open the Keyline Icons Community file and use its components, setting style, corners and container as variant properties.
4. Place the inserted icons into your frame and adjust size as needed.

### Prompt to paste into your agent

```text
No command is needed for this use case. A designer should open the Keyline Icons Figma plugin, insert a bell icon in the fill style with sharp corners into an open file, and confirm the inserted layer is named after the icon.
```

### Caveat

The plugin inserts icons into the file you have open, so save a copy of the file first if you want to keep it unchanged.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/keyline-icons-keyline-icons/figma-insert-keyline-icons/