DEDUPED Hot AI repos, turned into use cases Get the Monday 5
181 stars · TypeScript

How to use Keyline Icons: what you can do with it

What is 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.

How do I use it? Run npm i @keyline-icons/react in your React project; then 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; set the size with the size prop and the colour through CSS, since the components colour from currentColor. Full steps below.

Trended earlier

View repo on GitHub

Third-party repos we don't own. AI-written use cases can be wrong. Disclaimer

What do you want to do?

4 use cases

  • Use Keyline icons in a React or React Native app

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

    View prompt
    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.

  • Add a Keyline icon to a shadcn/ui project

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

    View prompt
    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.

  • Let an AI assistant pick real icons from the set

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

    View prompt
    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>.

  • Drop Keyline icons into a Figma file

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

    View prompt
    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.

Quick start with Keyline Icons

  1. Check you have what it needs: Node.js with npm for the package installs; A React, React Native or shadcn/ui project to add the icons to; A Figma account if you want the plugin or Community file.
  2. Open keyline-icons/keyline-icons on GitHub and read the README and license.
  3. Run npm i @keyline-icons/react in your React project.
  4. 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.
  5. Set the size with the size prop and the colour through CSS, since the components colour from currentColor.
  6. For React Native, run npm i @keyline-icons/react-native react-native-svg and pass the colour with the color prop.

These steps come from our top use case, Use Keyline icons in a React or React Native app, which also has a copy-paste agent prompt.

Use this in your AI agent

Ask your agent

Using the Deduped MCP, get the setup steps for keyline-icons/keyline-icons

Add Deduped to Claude Code once

claude mcp add --transport http deduped https://dedupedai.com/mcp

Cursor, ChatGPT, others

Keyline Icons alternatives · Best AI repos for Software and DevOps

About this repo

Requirements

  • Node.js with npm for the package installs
  • A React, React Native or shadcn/ui project to add the icons to
  • A Figma account if you want the plugin or Community file

Add this badge to your README

Maintain Keyline Icons? Show readers where to find these use cases. Use cases on Deduped

Markdown 

[![Use cases on Deduped](https://dedupedai.com/badge/keyline-icons/keyline-icons.svg)](https://dedupedai.com/use-cases/keyline-icons-keyline-icons/?utm_source=github&utm_medium=badge&utm_campaign=keyline-icons-keyline-icons)

HTML 

<a href="https://dedupedai.com/use-cases/keyline-icons-keyline-icons/?utm_source=github&amp;utm_medium=badge&amp;utm_campaign=keyline-icons-keyline-icons"><img src="https://dedupedai.com/badge/keyline-icons/keyline-icons.svg" alt="Use cases on Deduped" height="20"></a>

A static image, no tracking script. About the badge

Questions about Keyline Icons

What is 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. It is an open-source project on GitHub: https://github.com/keyline-icons/keyline-icons.

How do I use Keyline Icons?

Run npm i @keyline-icons/react in your React project; then 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; set the size with the size prop and the colour through CSS, since the components colour from currentColor. The use cases on this page give the full steps and a copy-paste agent prompt for each job.

Who is Keyline Icons for?

Front-end developers and designers who need a consistent icon set, and AI agents that need real icon names and source files.

What can I do with Keyline Icons?

4 use cases so far, for example: Use Keyline icons in a React or React Native app; Add a Keyline icon to a shadcn/ui project; Let an AI assistant pick real icons from the set. Each has steps and a copy-paste agent prompt.

What do I need to run Keyline Icons?

Node.js with npm for the package installs; A React, React Native or shadcn/ui project to add the icons to; A Figma account if you want the plugin or Community file.

What are alternatives to Keyline Icons?

Other hot AI repos in Software and DevOps: Deep Infer, Harness2, Orca, Opencode, Graphify.

Is Keyline Icons safe to run?

Deduped does not own, audit or vouch for it. Read the README and license, run it on your own systems first and review every command before you run it.