6184个免费SVG图标：Tabler Icons 三种方式快速接入前端项目

6184个免费SVG图标：Tabler Icons 三种方式快速接入前端项目

【免费下载链接】tabler-iconsA set of over 6100 free MIT-licensed high-quality SVG icons for you to use in your web projects.项目地址: https://gitcode.com/GitHub_Trending/ta/tabler-icons

Tabler Icons 是一套 MIT 许可的开源图标库，收录 6184 个高质量 SVG 图标，全部基于 24×24 网格绘制、默认 2px 描边。图标可以通过组件包、原生 SVG 文件、图标字体三种方式引入，无论 React、Vue 还是纯 HTML 页面，都能几分钟内跑起来。

📦 项目速览

这是一套"取用型"基础库：图标按风格分目录存放，每个框架有独立发布的 npm 包，各取所需即可。

🔌 三种上手路径

按技术栈选一条路走：有组件框架用官方包，纯 HTML 直接拿 SVG 文件，想零侵入就用图标字体。

React项目：一条命令装好 @tabler/icons-react

执行npm install @tabler/icons-react，每个图标都是一个命名组件，尺寸、颜色、描边全走属性。包按 ES Module 构建、支持 tree-shaking，只打包实际 import 的图标：

import { IconHeart } from '@tabler/icons-react'; export default () => <IconHeart size={36} color="red" />;

纯HTML页面：直接引用SVG文件

先git clone https://gitcode.com/GitHub_Trending/ta/tabler-icons，从icons/outline/里把需要的 SVG 拷进项目，然后在 HTML 中引用。注意这种方式下图标是图片，CSS 只能改尺寸、改不了颜色：

<img src="icons/outline/heart.svg" alt="心形图标" width="24" />

不想写JS？图标字体最省事

@tabler/icons-webfont把图标编译成单一字体文件，HTML 里一个 class 就能调用，适合静态页和邮件模板。它支持只编译子集，控制字体体积：

<i class="ti ti-heart"></i>

🎨 从基础到进阶的用法

核心思路一句话：凡是想改样式的图标，都用内联 SVG，尺寸、颜色、粗细三个旋钮立刻可用。

基础调用：内联SVG自动跟随文字颜色

把 SVG 文件内容贴进页面，保留<svg>标签上的stroke="currentColor"，图标颜色就会跟文字走——按钮变色时图标自动同步，不需要额外写逻辑。

用CSS改大小和描边粗细

所有图标默认 stroke-width 为 2，改这个值就能得到不同视觉粗细的"变体"。官方 README 给出的示例是把同一图标降到 1.25 呈现细线风格，跟品牌细线 UI 对齐时基本都这么干：

.icon-tabler { width: 32px; color: #e74c3c; stroke-width: 1.5; }

批量使用：Sprite与分类裁剪

单页图标很多时用@tabler/icons-sprite：整页只加载一次 Sprite 文件，图标通过<use>逐个引用，省下大量请求。字体路线则更狠——编译时配置includeIcons或includeCategories（比如只留 "Devices"、"System" 两个分类），字体文件就不会膨胀到 MB 级。

🎯 实际应用场景

管理后台侧边栏。导航图标选 outline 风格，全局给stroke-width: 1.75统一视觉重量。6184 个图标覆盖日历、数据库、设备等常见业务，按名字搜即可，仓库自带的标签页能按 tag 筛选。

需要交付设计资源的场景。设计师要 PNG、印刷要矢量？不用手动转换，packages/目录下的@tabler/icons-png、@tabler/icons-pdf、@tabler/icons-eps三个包直接提供对应格式。

本地浏览选图标。仓库用 Eleventy 搭了图标浏览页，执行npm run dev起本地服务，可以搜索、按尺寸预览，比翻 6000 多个文件效率高得多。

⚠️ 踩坑与解决

• CSS 改颜色没反应→ 原因是图标用<img>加载，样式进不到 SVG 内部。解决：改内联 SVG 或换组件包，让currentColor继承文字色。
• filled 风格找不到对应图标→ filled 只有 1054 个，并非与 outline 的 5130 个一一对应。解决：关键图标先确认有填充版，没有就统一用 outline。
• 全量引入后项目大了几 MB→ 原因是整包引入。解决：框架包按名导入触发 tree-shaking；字体用includeIcons指定清单裁剪。
• 图标偏粗，与站点风格不搭→ 默认 stroke-width 2 视觉偏重。解决：CSS 里降到 1.5，React 组件直接传stroke={1}。

组件包、原生 SVG、图标字体三条路线各有适用面，选最贴近自己技术栈的那条即可，更多细节见官方文档。

【免费下载链接】tabler-iconsA set of over 6100 free MIT-licensed high-quality SVG icons for you to use in your web projects.项目地址: https://gitcode.com/GitHub_Trending/ta/tabler-icons