简介：这份资源面向UI/UX设计师、前端开发者及产品原型人员，提供240个开发场景常用的线框图标，帮助快速搭建界面布局、梳理交互逻辑，解决从草图到高保真设计之间的素材缺口。压缩包共1447个文件，约5.67MB，以956个PNG位图和480个SVG矢量图为主，另含8个AI源文件、1个EPS及配套HTML说明页，PNG便于直接预览，SVG与AI适合二次编辑和无限缩放。图标覆盖浏览器界面、文件操作、编程开发、网络数据库、移动功能、创意设计等模块，包含搜索、菜单、设置、分享、复选框等常见控件。已有131人学习下载，适合初中级设计开发者参考。使用者可基于矢量源文件调整颜色、描边与填充，快速匹配项目风格，也能作为原型交互模型的基础素材，提升界面设计与开发迭代效率。
1. 240个线框图标素材包：从下载到落地的完整链路
做后台管理系统或移动端原型时，最耗时的往往不是写业务逻辑，而是找一套风格统一、能直接改、授权清晰的图标。我见过太多项目因为图标风格打架——登录页是圆角线性，侧边栏突然冒出个填充面性，整个界面像拼凑出来的。240个开发常用的线框图标素材包，解决的正是这个痛点：它把常用场景的图标一次性打包，省去逐个平台翻找的时间。这类素材通常以 SVG 或 AI 源文件形式提供，适合前端开发者、UI 设计师和独立开发者。但下载只是第一步，真正决定效率的是怎么把它接进你的工程链路——是直接拖进 Figma，还是转成图标字体，或者做成 React 组件。下面按我实际用过的流程拆开讲。
2. 拿到素材包先别急着导入：文件结构与格式选型
2.1 解压后先看目录，别被文件名骗了
下载完的压缩包解压后，常见结构是icons/下按类别分文件夹，比如arrows/、communication/、media/、weather/，每个文件夹里是.svg或.ai文件。有些包会额外带一个preview.png或index.html预览页。我一般先打开预览页扫一遍，确认三件事：图标是否真的线框风格统一（描边粗细是否一致）、是否有重复图标、命名是否规范。命名规范很重要，比如arrow-left.svg比icon_01.svg好太多，后者在代码里引用时你根本记不住哪个是哪个。
如果包里只有.ai文件，说明它是 Illustrator 源文件，需要先导出成 SVG 才能进前端工程。导出时注意：在 Illustrator 里选择「文件 → 导出 → 导出为 SVG」，勾选「演示属性」和「响应式」，描边要转成轮廓或者保留可编辑状态。我一般会保留描边可编辑，方便后续改粗细。
2.2 SVG、图标字体、React 组件：三种接入方式怎么选
拿到 SVG 后，接入方式直接决定后续维护成本。我列个对比表，按项目类型选：
| 接入方式 | 适用场景 | 优点 | 缺点 |
|---|---|---|---|
| 直接引入 SVG | 图标数量少、静态页面 | 零配置，颜色用 CSS 控制 | 每个图标一个请求，HTTP/2 下可接受 |
| 图标字体 | 传统多页应用、需要 CSS 控制大小颜色 | 一个文件搞定，兼容性好 | 只能单色，制作流程长 |
| SVG Sprite | 中大型项目、需要多色 | 一次加载，支持多色 | 需要构建工具配合 |
| React/Vue 组件 | 组件化项目 | 按需加载，类型安全 | 需要写转换脚本 |
我的习惯是：如果是 React 项目，直接写个脚本把 SVG 转成组件，用currentColor控制颜色，这样最灵活。下面给一个 Node 脚本示例，把指定目录下的 SVG 批量转成 React 组件。
// scripts/svg-to-react.js const fs = require('fs'); const path = require('path'); // 输入输出目录，按实际项目改 const SVG_DIR = path.resolve(__dirname, '../assets/icons'); const OUT_DIR = path.resolve(__dirname, '../src/components/icons'); // 把文件名转成大驼峰组件名，比如 arrow-left.svg -> ArrowLeft function toComponentName(filename) { return filename .replace('.svg', '') .split(/[-_]/) .map(s => s.charAt(0).toUpperCase() + s.slice(1)) .join(''); } // 读取 SVG 内容，去掉固定宽高，加上 currentColor function transformSvg(content) { return content .replace(/width="[^"]*"/, '') .replace(/height="[^"]*"/, '') .replace(/fill="[^"]*"/g, 'fill="currentColor"') .replace(/stroke="[^"]*"/g, 'stroke="currentColor"'); } fs.readdirSync(SVG_DIR).forEach(file => { if (!file.endsWith('.svg')) return; const raw = fs.readFileSync(path.join(SVG_DIR, file), 'utf8'); const name = toComponentName(file); const body = transformSvg(raw); const component = `import React from 'react'; const ${name} = (props) => ( <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props} dangerouslySetInnerHTML={{ __html: ${JSON.stringify(body)} }} /> ); export default ${name}; `; fs.writeFileSync(path.join(OUT_DIR, `${name}.jsx`), component); console.log(`generated ${name}.jsx`); });这段脚本的逻辑很直白：遍历 SVG 目录，把文件名转成组件名，把 SVG 里的固定宽高去掉，把 fill 和 stroke 统一改成currentColor，这样组件就能继承父级文字颜色。viewBox我固定写成0 0 24 24，因为大多数线框图标都是 24 网格，如果你的素材是 32 网格，改成0 0 32 32即可。跑完脚本后，在组件里import ArrowLeft from './icons/ArrowLeft'就能用，传className或style控制大小颜色。
注意：
dangerouslySetInnerHTML在这里是安全的，因为 SVG 内容来自你自己的素材包，不是用户输入。但如果你从第三方接口拉 SVG，就别这么干。
2.3 用构建工具做 SVG Sprite 的配置要点
如果项目不用组件化框架，或者你想减少 DOM 节点，SVG Sprite 是更轻的选择。做法是把所有 SVG 合并成一个sprite.svg，每个图标包在<symbol id="icon-arrow-left">里，页面里用<use href="#icon-arrow-left">引用。Webpack 可以用svg-sprite-loader，Vite 可以用vite-plugin-svg-icons。配置时注意symbolId要跟文件名对应，否则引用时找不到。我一般把symbolId设成icon-[name]，这样<use href="#icon-arrow-left">就能直接对应arrow-left.svg。
3. 把图标接进设计稿与代码：从 Figma 到前端的对齐
3.1 Figma 里建组件库，别直接拖画布
设计师拿到素材包后，常见错误是直接把 SVG 拖进 Figma 画布，然后复制粘贴到各个页面。这样做的后果是：改一个图标要改几十处，而且颜色、大小全靠手动调。正确做法是建一个「图标」页面，把每个 SVG 拖进去后，选中图层，右键「Create Component」变成组件。然后给组件加变体（Variant），比如size=16/24/32、color=default/primary/disabled。这样在页面里用的时候，直接从 Assets 面板拖，改属性就行。
如果素材包里的 SVG 描边粗细不一致，在 Figma 里选中所有图标，统一设置Stroke的Weight，比如都设成 1.5。线框图标最怕粗细不一，视觉上会显得脏。我一般还会检查端点样式，圆头（Round Cap）比平头（Butt Cap）更柔和，适合大多数后台界面。
3.2 前端项目里做一层图标封装，别到处 import
不管用哪种接入方式，我都建议在项目里加一层封装。比如建一个Icon组件，接收name和size两个 props，内部用动态 import 或映射表找到对应图标。这样做的好处是：以后换图标库，只改Icon组件内部，业务代码不用动。下面是一个简单的映射表写法：
// src/components/Icon/index.jsx import React from 'react'; import ArrowLeft from '../icons/ArrowLeft'; import ArrowRight from '../icons/ArrowRight'; import Search from '../icons/Search'; // ... 其他图标 // 映射表，key 是业务里用的名字，value 是组件 const iconMap = { 'arrow-left': ArrowLeft, 'arrow-right': ArrowRight, 'search': Search, }; const Icon = ({ name, size = 24, color = 'currentColor', ...rest }) => { const Component = iconMap[name]; if (!Component) { console.warn(`Icon "${name}" not found`); return null; } return ( <Component width={size} height={size} style={{ color }} {...rest} /> ); }; export default Icon;用的时候<Icon name="search" size={20} />就行。iconMap可以手动维护，也可以写脚本自动生成。我一般写个脚本扫描icons目录，生成这个映射文件，省得每次加图标都手动改。参数上，size默认 24，color默认继承父级，这样在按钮里放图标，按钮文字颜色变了图标也跟着变。
3.3 图标命名与业务语义的映射技巧
素材包里的命名通常是arrow-left、user、settings这种通用名，但业务里可能需要更具体的语义，比如back、profile、config。我一般不在业务代码里直接用素材包的命名，而是在iconMap里做一层别名。比如back: ArrowLeft、profile: User、config: Settings。这样以后换图标库，只要改映射关系，业务代码里的name="back"不用动。另外，如果同一个图标在不同场景下大小不同，别在iconMap里写死，用sizeprop 控制。
4. 避坑与排查：线框图标落地时最容易翻车的 5 个点
4.1 图标模糊或锯齿：viewBox 和尺寸不匹配
现象：图标在 Retina 屏上发虚，边缘有锯齿。原因通常是 SVG 的viewBox和实际渲染尺寸不成比例，比如viewBox="0 0 24 24"但渲染成 20px，浏览器缩放导致模糊。解决：要么把渲染尺寸设成viewBox的整数倍（24、48），要么在 SVG 里把shape-rendering设成geometricPrecision。我一般统一用 24 的倍数，16px 和 20px 虽然常见，但线框图标在非整数倍下确实容易糊。
4.2 颜色改不动：fill 和 stroke 写死了
现象：在 CSS 里设了color: red，但图标还是黑色。原因：SVG 里fill="#000"或stroke="#333"是硬编码的，currentColor没生效。解决：用前面给的脚本把fill和stroke替换成currentColor。如果有些图标是多色的，不能全改，那就单独处理，用 CSS 变量控制。检查方法：在浏览器里选中 SVG 元素，看fill属性的值是不是currentColor。
4.3 图标对齐不准：基线偏移
现象：图标和文字并排时，图标偏上或偏下。原因：SVG 默认是inline元素，基线对齐方式跟文字不一致。解决：给 SVG 加vertical-align: middle，或者用 flex 布局让图标和文字居中对齐。我一般在外层容器用display: inline-flex; align-items: center;，这样最稳。如果图标本身在viewBox里就没居中，那得回 Figma 里调路径位置。
4.4 打包体积暴涨：全量引入
现象：项目打包后体积多了几百 KB，排查发现是图标全量引入了。原因：import * as Icons from './icons'这种写法会把所有图标打进 bundle。解决：用动态 import 按需加载，或者用 SVG Sprite 只引入用到的 symbol。如果用的是 Vite，vite-plugin-svg-icons默认按需，但要注意symbolId别冲突。我一般会在构建后跑webpack-bundle-analyzer或rollup-plugin-visualizer看一眼，确认图标没占大头。
4.5 授权不清：商用项目别踩雷
现象：项目上线后收到授权提醒。原因：素材包虽然标了「免费」，但可能只限个人使用，商用需要额外授权。解决：下载前看清授权说明，MIT、CC0 这类可以商用，CC-BY 需要署名，有些「免费」其实只限个人。我一般会在项目里建个LICENSES.md，把用到的素材包授权信息记下来，包括来源、授权类型、是否需署名。这样以后查起来方便，也避免合规风险。
5. 进阶：把 240 个图标做成可检索的本地图标库
5.1 用脚本生成图标预览页，方便团队检索
240 个图标靠肉眼找太慢，我一般写个脚本生成一个本地 HTML 预览页，支持按名称搜索、按类别筛选、点击复制组件名。这样团队里谁要用图标，打开页面搜一下就行。下面是一个简单的生成脚本：
// scripts/generate-preview.js const fs = require('fs'); const path = require('path'); const SVG_DIR = path.resolve(__dirname, '../assets/icons'); const OUT_FILE = path.resolve(__dirname, '../preview.html'); const icons = fs.readdirSync(SVG_DIR) .filter(f => f.endsWith('.svg')) .map(f => ({ name: f.replace('.svg', ''), content: fs.readFileSync(path.join(SVG_DIR, f), 'utf8'), })); const html = `<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Icon Preview</title> <style> body { font-family: sans-serif; padding: 24px; } .search { width: 100%; padding: 8px; margin-bottom: 16px; font-size: 16px; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 16px; } .item { text-align: center; padding: 12px; border: 1px solid #eee; border-radius: 8px; cursor: pointer; } .item:hover { background: #f5f5f5; } .item svg { width: 32px; height: 32px; } .name { font-size: 12px; color: #666; margin-top: 8px; word-break: break-all; } </style> </head> <body> <input class="search" placeholder="Search icons..." oninput="filter(this.value)"> <div class="grid" id="grid"> ${icons.map(icon => ` <div class="item" style="width:16px;margin-left:4px;vertical-align:text-bottom;cursor:text;" />
