tabler/tabler-icons

项目介绍

Tabler Icons 是一套免费、以 MIT 许可证发布的 SVG 图标集合，面向需要统一视觉语言的网页和界面项目。当前 README 标注共 6,287 个图标，其中描边版 5,233 个、填充版 1,054 个。所有图标画在 24×24 网格上，描边默认 2px；描边版路径在设计时考虑了改变粗细后的观感，因此可以在一定范围内调整 stroke-width。

图标以官方 npm 包形式从本仓库发布，所有包共享同一版本号。除原始 SVG 和 SVG sprite 外，还提供 React、React Native、Preact、SolidJS、Vue 3、Svelte 4、Svelte 5（runes）、Astro、Angular 组件包，以及 webfont、PNG、PDF、EPS 格式。完整文档在 tabler.io/docs/icons，全部图标可在 tabler.io/icons 浏览。

快速使用

1. 用 npm、yarn 或 pnpm 安装原始 SVG 包：

npm install @tabler/icons

2. 如果使用框架组件，把包名换成对应包即可，例如 React 用 npm install @tabler/icons-react；该包以 ES 模块构建，未使用的图标会从打包结果中 tree-shake 掉。

3. 按技术栈选择用法，例如 React：

import { IconAward } from '@tabler/icons-react';

const MyComponent = () => (
  <IconAward size={36} color="red" stroke={3} />
);

普通 HTML 中可以用 <img> 引用图标路径，或把 SVG 直接内联进页面再用 CSS 控制；内联的描边图标会继承 currentColor，颜色、尺寸和 stroke-width 都能通过 CSS 设置。也可以从 jsDelivr 直接加载，例如 https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/outline/home.svg，把 latest 换成具体版本号即可固定版本。不想用包管理器时，可以下载最新 Release。具体图标的文件名和组件名与图标名称对应，可在在线目录中查找。

使用注意

SVG 文件是各形态的共同基础，其余包都是封装。React 组件自带 TypeScript 声明；Angular 包提供独立的 TablerIconComponent，通过 provideTablerIcons() 注册图标。Svelte 需要按大版本选择包：Svelte 4 及更早版本用 @tabler/icons-svelte，Svelte 5 用 @tabler/icons-svelte-runes，选错会与编译器不匹配。用 webfont 时需要先引入样式表，再用 ti ti-{name} 类名引用图标；描边版按不同粗细提供多个样式表，填充版另有单独的样式表。

整套图标按 2px 描边的风格统一设计，整体替换会影响现有界面的视觉语言。angular-tabler-icons、compose-icons 等社区包由仓库之外维护，不在本仓库的包保证范围内。代码和图标采用 MIT 许可证，可按该许可证用于商业项目。

HotRepo 点评

在 HotRepo 的记录中，这个仓库的全部语言日榜数据很少；唯一一次快照是 2026-11-13 的 JavaScript 日榜，当时 22,619 stars、1,274 forks，当日新增 18 stars，并在该语言榜内排到第 9。单条记录只能说明当天上过榜，不足以判断趋势；它作为长期维护的图标资产，更有参考价值的是约六年的历史和 6000+ 的规模。2020 年介绍该项目的 Hacker News 讨论中，有人认可其间距平衡、风格一致（讨论）；也有人建议直接通过 releases 页面下载，而不是逐个获取图标（评论），这对不想引入包管理器的使用者仍是实际可行的方式。另有一个题为「Sneaking Ads into OSS: Tabler Icons」的讨论帖，但提供的资料里没有评论正文，无法据此判断其内容。