Remix Icon 快速上手指南3200 开源图标库免费商用【免费下载链接】RemixIconOpen source neutral style icon system项目地址: https://gitcode.com/gh_mirrors/re/RemixIconRemix Icon 是一套开源的中性风格图标系统收录 3200 图标全部基于 24x24 网格绘制每个图标都提供 -line线性与 -fill面性两个版本个人与商业项目均可免费使用。读完本文你能在 10 分钟内完成安装、在页面里嵌入图标并改掉它的颜色与大小。扫一眼图标库20 个分类覆盖大部分界面场景界面要放导航箭头Arrows 目录里有上下左右、双向箭头、角落折角箭头全套做数据后台Business 分类给了图表、日历、公文包做聊天应用Communication 分类把会话气泡、语音、视频通话都备齐了。一共 20 个分类目录Arrows、Buildings、Business、Communication、Design、Development、Device、Document、Editor、Finance、Food、Game Sports、Health Medical、Logos、Map、Media、Others、System、User Faces、Weather常见界面场景基本翻得出对应图标。风格上是中性路线统一 24x24 网格、线条粗细一致放进现有组件旁边不突兀、不抢戏。全部图标遵循 Remix Icon License v1.0 协议个人和商业项目都能免费用不用纠结授权问题。两种拿到方式npm 安装或克隆仓库 有前端构建工具时在项目里执行一条命令即可npm install remixicon --save装完后fonts/目录是 CSS 与字体文件icons/是全部 SVG 源文件。如果只想要图标资源本身直接克隆仓库git clone https://gitcode.com/gh_mirrors/re/RemixIcon。两者都不想碰时把 remixicon.css 和同目录下的字体文件拷进项目静态目录、在 HTML 里引用它就行零构建依赖。把图标嵌进网页的三步在页面 head 引用 fonts/remixicon.css或用 JS 导入它。该文件里声明了 font-face浏览器会按需加载 woff2/woff/ttf 字体。需要图标的地方放一个 i 标签写上对应的 class字形即显示。class 命名规则为 ri-{名称}-{风格}-line 是线性款-fill 是面性款。比如搜索图标写作 ri-search-line 或 ri-search-fill不确定名称时直接查 remixicon.css 里的类定义。link relstylesheet hrefnode_modules/remixicon/fonts/remixicon.css i classri-home-line/i !-- 线性 home -- i classri-search-fill/i !-- 面性 search --用 CSS 改图标颜色和大小 图标本质是字体字形继承文本属性所以多数情况你只调两样颜色给元素设置 color 属性图标跟着变色例如color: #ff6b6b。大小改 font-size比如font-size: 24px图标按字号等比缩放。嫌麻烦时直接加内置的辅助类 ri-lg、ri-xl一键放大不用额外写 CSS。需要改图标形状本身圆角、线条粗细时换 SVG 方式从 icons/ 对应分类目录取文件例如 icons/Arrows/arrow-right-line.svg内容可直接粘进 HTML宽高用 width/height 属性控制填充色也能随意指定。资源目录导览fonts 与 icons 各管一摊仓库资源分两大块对照下表取用路径内容fonts/remixicon.css 主文件含 font-face 与全部 ri- 类定义、remixicon.ttf/woff/woff2/eot 字体、remixicon.less/scss/styl 预处理版本、remixicon.symbol.svg 符号雪碧图icons/3200 个 SVG按 20 个分类目录存放Arrows、Business、Communication 等tags.json官网搜索用的标签文件LicenseRemix Icon License v1.0 协议文本用 Less 或 SCSS 写样式的项目可把 fonts/ 下的预处理版本直接接进自己的样式体系图标类名随主题变量一起管理。常见坑提醒与下一步清单三个容易踩的坑类名前缀是 ri-。v2.0.0 之前用过 remixicon- 前缀旧前缀现已失效找不到图标时先查前缀。-line 与 -fill 别搞混前者线性、后者面性。同一页面想切换风格换后缀即可。商用免费但 License 里的署名要求要保留。接下来可以动手安装依赖并引入 CSS图标即刻可用。找具体图标时先按分类在 icons/ 目录下翻再对照 remixicon.css 里的 ri- 类名。做设计协作时直接从 icons/ 分类目录拿 SVG 源文件导入 Sketch、Figma 等工具二次编辑。【免费下载链接】RemixIconOpen source neutral style icon system项目地址: https://gitcode.com/gh_mirrors/re/RemixIcon创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考