Repolode
Submit
guokaigdg

guokaigdg/naive-icons

A React and TypeScript library of hand-drawn, naive folk art style SVG icons with an optional AI agent skill.

View on GitHubWebsite
Stars
249
Forks
5
Open issues
0
Last commit
6 days ago

What is it?

Naive Icons is an SVG icon library with a hand-drawn folk art look. Each icon is drawn on a 48x48 grid with a 3.5 stroke, rounded line caps and a fixed retro color palette, and many living subjects get dot eyes and a small smile. Every icon is available as an SVG source file and as a React TSX component.

The React components extend native SVG props and accept size, color, strokeWidth, fill and title. Stroke width works as a scale factor, and color can be set to currentColor to follow surrounding text. The package is ESM with sideEffects set to false, so named imports and subpath imports both tree-shake down to small bundles. It also exports TypeScript types and a shared NAIVE_PALETTE.

The project also offers an installable agent skill for Claude Code, Cursor, Codex and similar tools, which lets an assistant pick icons by meaning and generate code using the library's design rules.

Key features

  • 01Icons across 11 categories including interface, actions, media, navigation, animals and food.
  • 02Each icon ships as both an SVG file and a React TSX component.
  • 03Full TypeScript types and a shared color palette export.
  • 04Stroke and color props scale and recolor icons while keeping the hand-drawn look.
  • 05Installable AI agent skill for generating icon code.

Use cases

  • Adding a playful, hand-drawn icon set to a React web app or landing page.
  • Giving a login or onboarding screen a warm, personal visual tone.
  • Using the raw SVG files in a non-React project or an icon sprite.
  • Letting an AI coding assistant pick and insert matching icons in a project.

Quick start

  1. 1

    Install the package

    npm install naive-icons
  2. 2

    Import and use an icon in React

    import { HomeIcon } from 'naive-icons';

Things to know

  • Icon colors are hard-coded in many icons, so a root fill will not recolor them; only stroke color can be changed easily.
  • Requires React 16.8 or newer.

Topics

#icons#svg#react#typescript#ui-design#hand-drawn#component-library#naive

FAQ

What is naive-icons?
A React and TypeScript library of hand-drawn, naive folk art style SVG icons with an optional AI agent skill. Naive Icons is an SVG icon library with a hand-drawn folk art look. Each icon is drawn on a 48x48 grid with a 3.5 stroke, rounded line caps and a fixed retro color palette, and many living subjects get dot eyes and a small smile. Every icon is available as an SVG source file and as a React TSX component.
Is naive-icons free to use? What license does it have?
naive-icons is open source under the MIT license. Check the license terms before using it in commercial products.
Is naive-icons still maintained?
Actively maintained. The last commit to naive-icons was on Oct 14, 2026.
What can I use naive-icons for?
Adding a playful, hand-drawn icon set to a React web app or landing page. Giving a login or onboarding screen a warm, personal visual tone. Using the raw SVG files in a non-React project or an icon sprite. Letting an AI coding assistant pick and insert matching icons in a project.
How do I install naive-icons?
Install the package: npm install naive-icons Import and use an icon in React: import { HomeIcon } from 'naive-icons';
Where can I get naive-icons?
The source code and installation instructions are on GitHub: https://github.com/guokaigdg/naive-icons

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects