🦭 厌倦了千篇一律的线性图标？Naive Icons 正式开源

100+ 个手绘 naive folk art 风格 SVG 图标，React + TypeScript，零运行时依赖。

为什么做这套图标

市面上的图标库大多太"正确"了：24×24 网格、1.5px 描边、完美的对称、克制的圆角。它们专业、高效，但也容易让界面看起来千篇一律。

Naive Icons 想走另一条路：保留手绘插画的笨拙感 与温度。每个图标都基于 48×48 画布、3.5 粗描边、round 线帽，线条允许轻微不对称；有些图标还被赋予一对圆点眼睛和微笑------让按钮、空状态、导航栏多一点点人情味。

它是什么

Naive Icons 是一套手绘 naive folk art 风格的 SVG 图标库，为 React 与 TypeScript 设计。

100+ 个原创图标，覆盖界面、操作、媒体、导航、动物、食物等 11 个分类
单个 SVG 约 400--700 字节，React 组件无运行时依赖（仅 peer 依赖 React）
每个图标同时提供 SVG 源文件 与 React TSX 组件
完整 TypeScript 类型：IconProps、IconName、IconCategory、NAIVE_PALETTE
支持 currentColor，可跟随父级文字颜色自动变化
全部图标 MIT 开源，可用于个人与商业项目

快速开始

bash 复制代码

npm install naive-icons

tsx 复制代码

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>
  );
}

按需引入可以进一步减小打包体积：

tsx 复制代码

import HomeIcon from 'naive-icons/src/HomeIcon';

设计原则

所有图标遵循四条固定规则：

网格与出血：48×48 画布，主体距边缘 ≥3 单位。
描边：统一 3.5 宽度，端点与转角均为 round，不用虚线。
配色：仅使用 9 色复古调色板，无渐变、阴影、半透明叠加。
性格：保留手绘不对称，鼓励给生命体加上圆点眼睛与微笑。

这套规则让新增图标时也能保持一致------既不像严格几何系统那么冷冰冰，也不至于"太放飞"而破坏整体感。

关于官网

图标库的官网是一个纯静态站点，无需构建即可本地打开：

bash 复制代码

git clone https://github.com/guokaigdg/naive-icons.git
cd naive-icons
npm run website      # 端口 8080

它支持：

分类筛选、实时搜索
在线调节尺寸（默认 52px，方便看清手绘细节）与描边颜色
浅色 / 深色 / 网格预览底
点击任意图标查看 React/SVG 用法、复制代码或下载 SVG
主题跟随系统，也可手动切换并记忆

为了配合手绘气质，官网还自托管了一款手写感中文字体（LXGW 悠哉字体），并做了字符子集化，把整站用到的字符压缩到约 170 KB。

适用场景

Naive Icons 尤其适合：

个人博客、作品集、独立产品
儿童、教育、生活方式类应用
需要"不那么像系统默认"的仪表盘或后台
与暖色调 UI、纸张纹理、插画风界面搭配

获取方式

GitHub： github.com/guokaigdg/n...
npm： www.npmjs.com/package/nai...
下载：从 GitHub Release 获取 naive-icons-repo.zip，包含全部 SVG 源文件与静态官网

如果你也觉得界面需要一点"不完美"的温度，欢迎 star、提 issue、提交 PR。