v1.2.0 MIT 协议 · 零运行时依赖
手绘质感的图标
让界面有温度
一套 naive folk art 风格的 SVG 图标库。统一的 48×48 画布、3.5 粗描边与 9 色复古调色板， 刻意保留手绘特有的笨拙感 —— 有些图标还带着一对小眼睛和微笑。
npm install naive-icons
- 105
- 原创图标
- 48×48
- 统一画布
- 9 色
- 复古调色板
- 0 KB
- 运行时依赖
Icon Explorer
全部图标
搜索、按分类筛选，实时调整尺寸与描边颜色。点击任意图标查看 React 用法、复制代码或下载 SVG。
Getting Started
使用方式
按需引入 React 组件，或直接使用标准 SVG 源文件。每个图标都继承原生 SVG 属性， 可自由传入 className、onClick 与内联样式。
# npm npm install naive-icons # yarn yarn add naive-icons # pnpm pnpm add naive-icons
import { HomeIcon, HeartIcon, PenguinIcon } from 'naive-icons'; export function Example() { return ( <nav> <HomeIcon size={24} /> <HeartIcon size={24} color="#E76F51" /> <PenguinIcon size={48} strokeWidth={4} /> </nav> ); }
<!-- 方式一：img 直接引用 --> <img src="naive-icons/svg/home.svg" width="24" /> <!-- 方式二：内联并交给 currentColor 控制颜色 --> <svg viewBox="0 0 48 48" width="24" fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"> <!-- 粘贴 svg/home.svg 中的 path --> </svg>
import type { IconProps, IconName, NAIVE_PALETTE } from 'naive-icons'; interface IconProps extends SVGProps<SVGSVGElement> { size?: number | string; // 默认 24 color?: string; // 默认 currentColor strokeWidth?: number | string; // 默认 3.5 fill?: string; // 默认 none title?: string; // 无障碍标题 }
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
size | number | string | 24 | 图标尺寸，宽高相等 |
color | string | currentColor | 描边颜色，可跟随文字色 |
strokeWidth | number | string | 3.5 | 按 48×48 画布比例缩放 |
fill | string | none | 填充色 |
title | string | — | 无障碍标题 |
width / height | number | string | 跟随 size | 单独指定宽或高 |
Design System
设计规范
一致性来自一组简单的约束。9 个颜色构成整套图标的视觉基调，4 条规则约束每一笔线条 —— 新增或二次修改图标时沿用即可。
-
01
网格与出血
全部图形绘制在 48×48 画布内，主体与画布边缘至少保留 3 个单位，保证小尺寸下依旧清晰。
-
02
统一描边
描边宽度固定 3.5，端点与转角均为 round，不使用虚线、渐变与投影。
-
03
有限配色
只使用调色板中的 9 个颜色，扁平填充、不做半透明叠加，保证任意背景下都可读。
-
04
保留性格
允许线条轻微不对称，鼓励给有生命的图形加上圆点眼睛与微笑，留住手绘的笨拙感。
FAQ