🦭 别再用 emoji 凑数：Naive Icons 让你 vibe coding 界面来点活人感

我家猫叫佩奇
122 阅读3分钟

Naive Icons 正式开源 100+ 个手绘 naive folk art 风格 SVG 图标，React + TypeScript，零运行时依赖。

image.png

官网： guokaigdg.github.io/naive-icons…

为什么做这套图标

市面上的图标库大多太“正确”了：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 开源，可用于个人与商业项目

快速开始

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

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

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

设计原则

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

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

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

关于官网

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

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、纸张纹理、插画风界面搭配

获取方式

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

avatar
文章
阅读
粉丝