Ic

Iconify 图标库 CSS 生成器

逐个挑选图标 → 增量生成按需 CSS(单色 mask / 彩色 background,可直接使用)

CDN 交互页 · 无构建 bun / node 服务 Iconify CSS 文档 ↗
{{ item.label }}
共 {{ filtered.length }} 个图标库 全部图标
{{ item.title }} {{ item.prefix }}
{{ item.license }} · {{ formatNumber(item.total) }} 图标 · 图标数未知

{{ scopeTitle }}

已生成的图标不可重复选择

类名前缀 icon 已生成({{ generatedKeys.length }}) 生成新增 CSS({{ collected.length }})
已选 {{ collected.length }} 个 | 类名规则:icon-[c--name]
{{ icon.name }}
加载更多 {{ loadedText }}

生成结果

历史版本 {{ resultSummary }} {{ formatBytes(result.bytes) }}
复制 CSS 下载 .css
用法:{{ usageExample }} ,尺寸用 font-size 控制,单色图标颜色继承 currentColor,彩色图标保留原色。类名与 @iconify/tailwind4 插件完全一致。
{{ result.css }}

待生成

{{ collected.length }}

在右侧逐个点击图标加入待生成列表,只生成其中尚未生成过的图标

{{ item.prefix }} / {{ item.name }} 移除
暂无图标
已生成 {{ generatedKeys.length }} 个
命令行等价用法
node scripts/generate-icons.mjs --icons "ep:plus,ph:house" --prefix icon

历史版本

{{ versions.length }} 个

每次生成自动存档,最多展示最近 10 个

{{ formatTime(v.createdAt) }} {{ v.mode === 'full' ? '全量' : '增量' }}
新增 {{ v.added }} · 跳过 {{ v.skipped }} · 累计 {{ v.total }} {{ v.total }} 个图标 · {{ formatBytes(v.bytes) }}
查看 下载
暂无历史版本
共 {{ generatedItems.length }} 个,点击图标复制类名
{{ item.name }}
{{ versionDialogSummary }}
{{ item.name }}