Icons Gallery - 自托管图标 CDN 加速服务

Icons Gallery 是一个基于上游仓库 selfh.st/icons 构建的图标浏览与分发服务，面向中国大陆用户提供高速、稳定的 CDN 访问体验。

项目地址#

在线访问：ico.bytecook.io
NPM 包：@bytecook/icons
上游仓库：github.com/selfhst/icons
官方包：jsdelivr.com/package/gh/selfhst/icons

为什么做这个项目#

selfh.st/icons 是一个质量非常高的自托管应用图标集合，收录了 6000+ 精选图标，覆盖大量常见的自托管服务和应用程序，适用于：

Homepage / Homarr / Dashy 等仪表板
自建 NAS / 服务器应用展示
文档、博客中的图标引用

但由于原始资源主要托管在 GitHub，国内用户在实际使用过程中经常遇到以下问题：

访问速度缓慢
图标资源加载失败
jsDelivr CDN 稳定性不足

为了解决上述问题，搭建了该国内 CDN 加速镜像服务。

速度对比#

jsDelivr#

jsDelivr

Peekabo（Icons Gallery CDN）#

Peekabo

功能特性#

6000+ 图标，完整同步 selfh.st/icons 仓库
支持 SVG / PNG / WebP / AVIF / ICO 多种格式
国内 CDN 加速，访问快速稳定
提供在线浏览、搜索与分类筛选
支持一键复制图标直链
支持亮色 / 暗色主题切换

使用方法#

在线浏览#

直接访问 ico.bytecook.io，支持关键词搜索、分类筛选，点击图标可查看详情并复制链接。

CDN 引用方式#

图标 URL 格式：

1
https://ico.bytecook.io/{格式}/{图标名}.{格式}

示例：

https://ico.bytecook.io/svg/docker.svg
https://ico.bytecook.io/png/nginx.png
https://ico.bytecook.io/webp/portainer.webp

NPM 包安装#

1
npm install @bytecook/icons
2
# or
3
pnpm add @bytecook/icons
4
# or
5
yarn add @bytecook/icons

代码使用#

1
import { createIconUrl } from '@bytecook/icons';
2

3
// 默认: SVG 格式, Peekabo CDN (中国加速)
4
createIconUrl('nginx');
5
// => https://ico.bytecook.io/svg/nginx.svg
6

7
// 指定格式
8
createIconUrl('nginx', { format: 'png' });
9
// => https://ico.bytecook.io/png/nginx.png
10

11
// 暗色/亮色变体
12
createIconUrl('nginx', { format: 'png', variant: 'dark' });
13
// => https://ico.bytecook.io/png/nginx-dark.png
14

15
// 使用 jsDelivr CDN（全球加速）
16
createIconUrl('nginx', { cdn: 'jsdelivr' });
17
// => https://cdn.jsdelivr.net/gh/selfhst/icons@main/svg/nginx.svg

工厂模式#

1
import { createIconHelper } from '@bytecook/icons';
2

3
const icons = createIconHelper({ format: 'webp' });
4

5
icons.url('docker');           // WebP 格式
6
icons.svg('docker');           // 强制 SVG
7
icons.png('docker', 'dark');   // PNG 暗色变体

图标元数据#

1
import iconList from '@bytecook/icons/icons.json';
2

3
console.log(iconList.length); // 2360+ 图标
4

5
// 每个图标包含:
6
// { name, reference, category, svg, png, webp, light, dark, tags }

CDN 节点#

CDN	URL	说明
Peekabo	`https://ico.bytecook.io`	中国大陆加速（默认）
jsDelivr	`https://cdn.jsdelivr.net/gh/selfhst/icons@main`	全球 CDN

支持的格式#

SVG - 可缩放矢量图形（推荐）
PNG - 光栅图像
WebP - 现代格式，压缩率好
AVIF - 下一代格式，压缩率最佳
ICO - Windows 图标格式

图标变体#

许多图标支持亮色和暗色变体：

标准版本：nginx.svg
亮色变体：nginx-light.svg
暗色变体：nginx-dark.svg