DEDUPED Hot AI repos, turned into use cases Get the Monday 5

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

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

Short answer: 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. All steps.

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

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

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

What you need first

  • 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

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 for your agent

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.

Use this in your AI agent

Ask your agent

Using the Deduped MCP, get the setup steps for keyline-icons/keyline-icons and "Use Keyline icons in a React or React Native app"

Add Deduped to Claude Code once

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

Cursor, ChatGPT, others

Share: X LinkedIn Hacker News Email Copy link

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