用 Vibe Coding 做 App 或网页 UI 时，不要每次都让 AI 临时生成图标。更稳定的做法是直接告诉 AI 使用成熟图标库，或者从固定图标库里挑选图标，这样界面风格更统一、图标质量更可控，也更接近真实产品。
使用原则
- 做功能型 UI 图标时，优先用成熟开源图标库。
- 做国内产品或中文后台时，可以优先考虑 Iconfont。
- 做海外产品或通用素材时，可以使用 Flaticon。
- 做平台 Logo、品牌 Logo、第三方登录图标时，优先找专门的 Logo SVG 资源。
- 给 AI 下指令时，不要只说“画一个图标”，而要明确指定图标风格或图标库名称。
推荐图标库
场景 | 推荐资源 | 官网 |
App / Web UI 线性图标 | Lucide | |
App / Web UI 多风格图标 | Phosphor Icons | |
国内通用图标素材 | Iconfont 阿里巴巴矢量图标库 | |
海外通用图标素材 | Flaticon | |
品牌 Logo SVG | Simple Icons | |
免费 SVG 图标和 Logo | UXWing | |
公司 Logo API / 品牌 Logo | Logo.dev |
网站介绍与使用
1. Lucide
适合做现代 App、SaaS、后台系统、工具类产品的线性图标。风格简洁统一，适合按钮、侧边栏、导航、设置、搜索、下载、上传、删除等常见 UI 场景。
示例指令：
2. Phosphor Icons
适合需要更多图标风格变化的界面。Phosphor 有线性、填充、双色等多种风格，适合 App、网站、演示文稿、产品原型。
示例指令：
3. Iconfont
适合中文产品、国内后台、运营页面、管理系统。Iconfont 图标数量大，也适合团队建立自己的图标项目。
示例指令：
4. Flaticon
适合找海外通用素材、插画型图标、营销页面图标、分类图标等。注意下载和商用时查看授权要求。
示例指令：
5. Simple Icons / UXWing / Logo.dev
适合找平台 Logo、品牌 Logo、第三方登录图标，比如 Google、GitHub、Notion、Slack、Stripe 等。
示例指令：
给 AI 的通用提示词
Vibe Coding 做 App 时，图标不要让 AI 每次自由发挥；把成熟图标库直接指定给 AI，界面会更稳定、更统一，也更像真实产品。
- 作者:经验之书
- 链接:https://expbooks.com/article/icon
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
