---
title: 图标 Icons
url: https://ui.zhaozimin.com/foundations/icons/
markdown: https://ui.zhaozimin.com/foundations/icons.md
group: 基础
origin: 展示版复刻（src/extracted），本仓库是唯一源头
source:
  - src/extracted/icons.jsx  # https://ui.zhaozimin.com/src/extracted/icons.jsx
  - src/system/lib/siteIcons.js  # https://ui.zhaozimin.com/src/system/lib/siteIcons.js
version: v0.2.0  # 设计系统版本，发布于 2026-09-23
scope: .zzm-v4   # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.com/v/0.2.0/zzm.css   # 锁版本地址，本仓库再改也不影响你
---

# 图标 Icons

> 产品界面用自绘的 16 网格线性图标：1.3–1.5 描边、圆头圆角、墨灰色；内容区（首页作品、笔记标注块）用 lucide-react。

## 品牌标

星座标：四颗墨点连成一条上行折线，第三颗是朱色——「你在这里」。它就是整个设计系统的缩影：黑白里只有一处红。favicon 是它的反白版（墨底方块）。

## 自绘图标（产品界面）

规格：16 网格（导航图标 15px 显示）、描边 1.3–1.5、`stroke-linecap: round`、颜色 `#3A3A36`（收起图标 `#6E6E6A`）。朱色只出现在「当前位置」那个点上（地图图标、锁头的钥匙孔）。源码在 `/src/extracted/icons.jsx`，逐笔复刻自 edu 各处的内联 SVG。

## lucide 注册表（内容图标）

首页作品与荣誉区的图标存在数据库里，存的是名字，渲染时映射成 lucide 组件；未知名字兜底为 Sparkles。

## 标注块图标

笔记标注块的 13 个规范型各有一个 lucide 图标（颜色见[笔记标注块](/patterns/callouts)）。

## 铁律

- ✓ 要：界面图标线性、圆头、墨灰色
- ✗ 不要：填充图标、彩色图标、emoji 当图标
- ✓ 要：图标旁边有文字，或有 aria-label
- ✗ 不要：一个图标里出现两处朱色

---

上一页：[版式](https://ui.zhaozimin.com/foundations/layout.md) · 下一页：[按钮](https://ui.zhaozimin.com/components/button.md) · 全站目录：https://ui.zhaozimin.com/llms.txt