Dashboard Icons 完整指南5分钟搞定自托管面板的图标【免费下载链接】dashboard-iconsYour definitive source for dashboard icons.项目地址: https://gitcode.com/GitHub_Trending/da/dashboard-icons想象一下你折腾了三个月终于把 Docker 容器、NAS、监控系统全部搬进了家里的小服务器搭出一个漂亮的自托管面板——结果打开一看二十几个卡片里有十几个是灰扑扑的默认占位图整个面板瞬间毛坯房感拉满。想给每个服务配上统一风格的图标吧你得逐个去官网抠 logo、手动裁剪、调颜色一晚上就耗没了。Dashboard Icons就是为这件事而生的一个收录了1800 个精选服务图标的开源图标库专为面板dashboard和应用目录设计。每个图标都经过统一的视觉风格处理提供SVG、PNG、WEBP三种格式以及适配深色和浅色主题的light/dark 双变体。你要做的只有一件事搜名字、拿链接、贴进面板。1. 它到底解决了什么问题先说结论它把图标收集这件脏活从小时级压缩到了秒级。传统做法和它的差别用一句话概括就是自己满世界找贴纸vs去超市货架上按编号拿。对比项传统手动收集Dashboard Icons 图标库图标风格各家 logo 风格杂乱凑在一起像贴纸拼盘统一视觉语言天然成套格式选择只有一种源图深色主题下经常刺眼SVG/PNG/WEBP 三格式 明暗双变体获取方式官网下载、截图、手动裁切按命名规则直接取文件或走 CDN 直链覆盖范围想到哪个找哪个容易遗漏1800 服务一站集齐社区持续补充下面这几张就是库里真实图标PNG 格式512px 高你可以直观感受它的风格一致性2. 3分钟看懂一套命名如何管住 1800 图标它凭什么能做到搜到就能用核心是三套简单到朴素的约定就像超市用统一的条码系统管理所有商品。第一Kebab-case 命名法。所有图标名都是小写字母加连字符nextcloud-calendar、amazon-web-services、github-light。Nextcloud Calendar 这种带空格的服务名进来一律转成nextcloud-calendar。你不用记 ID、不用查文档凭直觉就能猜出文件名——就像快递柜凭取件码取件不用和柜员解释半天。第二SVG 是唯一源文件。PNG 和 WEBP 全部由 SVG 自动批量生成统一 512px 高。这就像餐厅只做一份主菜单堂食、外卖、包装餐盒都是同一道菜的不同装盘方式。源文件改了所有衍生格式自动跟着变不会出现三套图对不上的尴尬。第三明暗双变体。深色背景需要浅色图标-light后缀浅色背景用深色图标-dark后缀。你的面板切主题时图标不会变成黑底黑图的隐身款。所有图标的元信息别名、分类、更新记录、作者都集中维护在 metadata.json 里图标总目录由 tree.json 描述——这正是搜索和推荐功能的底气。3. 最快上手方法3种方式拿走图标方式一CDN 直链推荐最省事图标托管在 CDN 上链接规律是基础地址/格式/图标名.格式直接在 HTML 里引用img srchttps://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/plex.svg altPlex想要 PNG 版本把路径里的svg换成png即可。不用 clone、不用下载面板里贴一行就完事——相当于点外卖而不是自己下厨。方式二命令行下载单个文件# 用 curl 下载 curl -O https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/nextcloud.svg # 或用 wget wget https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/svg/nextcloud.svg方式三clone 整个仓库适合离线使用或深度定制git clone https://gitcode.com/GitHub_Trending/da/dashboard-icons cd dashboard-iconsclone 下来后svg/、png/、webp/三个目录就是全部家当按名字取文件即可。4. 深度剖析图标是怎么流水线生产出来的如果你好奇一个图标从提交到上架的全过程答案藏在这个仓库的脚本里。整条流水线大致分四步就像中央厨房从接单到出餐原始 SVG 入库贡献者提交或维护者手工绘制的 SVG 进入 svg/ 目录目前约 3300 个文件这是整条产线的原材料。批量格式转换scripts/convert_svg_assets.py 把 SVG 统一转成 512px 高的 PNG 和 WEBP保证跨格式尺寸一致。元数据生成scripts/generate_metadata.py 扫描图标目录汇总别名、分类、更新时间、作者生成根目录的 metadata.jsonscripts/generate_file_tree.py 则产出图标总树。搜索索引构建站点侧web/一个 Next.js 应用基于这些元数据提供全站搜索、分类浏览和 CDN 链接生成。也就是说日常新增一个图标只需要动一个 SVG 文件其余环节全部自动化。这套设计让1800 图标没有变成维护噩梦——规模化靠的是流水线而不是人海战术。5. 3个真实落地场景以及它的边界场景一Homarr / Homepage / Dashy 面板美化。这是它的主场。上述流行自托管面板都支持自定义图标路径配合 CDN 直链你可以在几分钟内给几十张卡片换上成套图标明暗主题各配各的切主题零成本。场景二给 AI 助手装个图标搜索器。项目内置了MCP ServerModel Context Protocol可理解为给 AI 用的标准插座支持search_icons、get_icon_url、suggest_icon等工具你在 Cursor 之类的 AI 客户端里说一句帮我找个 Plex 的图标AI 就能直接搜到并返回 CDN 链接。配置方法见 web/docs/MCP.md。场景三应用目录类项目开箱即用。做一个类似自托管服务导航站的项目时clone 仓库后直接引用本地文件省掉整个图标采集环节。边界也要说清楚图标仅供识别用途商标权仍归各品牌方商用请遵守对方品牌规范此外图标风格以社区提交为准个别冷门服务的图标可能偏简单——遇到缺失的走下一节的申请流程即可。6. 生态与进阶图标不够用两条路补上申请新图标优先使用官方站点的提交表单比 GitHub issue 流程快得多提交后由管理员审核发布完整流程说明见 docs/add-icon-workflow.md。自己动手贡献阅读 CONTRIBUTING.md 了解图标规格尺寸、命名、明暗变体要求Fork 仓库、画好 SVG、提交 Pull Request 即可。仓库也欢迎文档和网站改进方向的合作代码与行为准则分别见 web/ 目录与 CODE_OF_CONDUCT.md。从毛坯面板到精装交付你缺的从来不是时间而是一个图标齐、风格统一、即取即用的来源。当 AI 助手也能通过 MCP 帮你翻这个图标库时给面板配图标这件事已经彻底从手工活变成了说一句的事。【免费下载链接】dashboard-iconsYour definitive source for dashboard icons.项目地址: https://gitcode.com/GitHub_Trending/da/dashboard-icons创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
