Devicon

4周前发布 32 0 0

Devicon 是一个专门收集编程语言、开发工具、操作系统及相关技术 Logo 的开源图标库。

收录时间:
2026-03-30
Devicon 是一个诞生于 2014 年的开源项目,由开发者社区共同维护。它收录了 400+ 个开发工具、编程语言和框架的官方 Logo,包括 React、Vue、Docker、Kubernetes、Rust、Go 等主流技术 。
每个图标提供多种格式:
  • SVG 矢量图:无限缩放不失真,适合高清展示
  • PNG 透明背景:即插即用,兼容所有场景
  • 字体图标(Icon Font):通过 CSS 类名直接调用,像用 Font Awesome 一样简单

    更贴心的是,每个图标都有多个版本:彩色原版、单色线条版、带文字版(wordmark)、不带文字版,满足不同的设计需求。
Devicon 网站截图

Devicon 网站截图


⚡ TechIcons 的差异化:比官方更”懒人友好”

虽然 Devicon 官网(devicon.dev)功能完整,但 TechIcons(techicons.dev)在体验上做了针对性优化:
1. 即时预览,一键复制
打开 techicons.dev,输入技术关键词(如”PostgreSQL”),立即看到 SVG 和 PNG 两种格式的预览。点击即可复制代码或下载文件,无需跳转多个页面。
2. 与架构图工具无缝集成
在 LikeC4 等架构描述工具中,可以直接通过 tech:postgresql 这样的语法引用 TechIcons 的图标,让技术架构图保持视觉一致性。
3. 纯 CDN 引用,零依赖
无需 npm 安装,直接在 HTML 里引用 CDN 链接即可使用。对于快速搭建个人主页或临时演示,这是最高效的方式。

💡 三大实战应用场景

场景 1:GitHub 个人主页美化
用 TechIcons 制作技术栈徽章墙,替代纯文字列表。例如:
![React](https://techicons.dev/icons/react/react-original.svg)
![TypeScript](https://techicons.dev/icons/typescript/typescript-original.svg)
![Docker](https://techicons.dev/icons/docker/docker-original.svg)
视觉效果瞬间提升 10 倍,面试官一眼看到你的技术广度。
场景 2:项目 README 专业化
在开源项目文档中,用对应技术的官方 Logo 替代文字标签。不仅美观,更体现专业性——毕竟,用 Rust 写的项目,配上 Ferris 螃蟹图标才是”那味儿”。
场景 3:技术博客与演示文稿
写技术博客或制作 PPT 时,直接嵌入 SVG 图标,保持矢量清晰度。告别截图带来的模糊和锯齿。

🛠️ 快速上手:30 秒嵌入你的第一个图标

方式一:直接引用 CDN(最快)
HTML
<img src="https://techicons.dev/icons/nodejs/nodejs-original.svg" width="40" alt="Node.js">
方式二:下载 SVG 本地使用
访问 https://techicons.dev,搜索技术关键词,下载 SVG 或 PNG 文件,放入项目 assets 目录。
方式三:字体图标(适合批量使用)
如需在多个页面大量使用,建议通过 npm 安装官方 Devicon 包,使用 CSS 类名管理:
npm install devicon
然后在 HTML 中:
<i class="devicon-react-original colored"></i>
<i class="devicon-typescript-plain colored"></i>

📊 生态对比:为什么选 TechIcons?

工具 核心优势 适用场景
TechIcons 即时预览、一键复制、CDN 直链 快速原型、个人主页、博客
Devicon 官网 字体图标、完整版本控制 大型项目、企业级应用
Simple Icons 品牌 Logo 齐全(3000+) 商业品牌展示
Skill Icons 专为 GitHub 个人资料优化 技能墙展示

TechIcons 的定位清晰:在”极简”和”功能”之间,为开发者提供最短的图标获取路径Devicon

🎁 文末福利:GitHub 个人主页模板

基于 TechIcons,我们准备了一个快速模板。复制以下内容到你的 GitHub Profile README:
# 🛠️ Tech Stack

<p align="left">
  <img src="https://techicons.dev/icons/react/react-original.svg" width="40" />
  <img src="https://techicons.dev/icons/typescript/typescript-original.svg" width="40" />
  <img src="https://techicons.dev/icons/nextjs/nextjs-original.svg" width="40" />
  <img src="https://techicons.dev/icons/tailwindcss/tailwindcss-original.svg" width="40" />
  <img src="https://techicons.dev/icons/nodejs/nodejs-original.svg" width="40" />
  <img src="https://techicons.dev/icons/postgresql/postgresql-original.svg" width="40" />
  <img src="https://techicons.dev/icons/docker/docker-original.svg" width="40" />
  <img src="https://techicons.dev/icons/aws/aws-original.svg" width="40" />
</p>
效果预览:一排整齐的彩色技术图标,自动适配深色/浅色主题。

数据统计

相关导航

暂无评论

none
暂无评论...