Devicon

在技术文档、个人博客、简历或项目展示页中，文字描述往往显得单调。一个精准的 Python 蛇形标志、一个熟悉的 React 原子图标，或是一个 Docker 鲸鱼，能瞬间传达技术栈信息，提升页面的专业度与可读性。

Devicon 是一个开源的图标集合，致力于汇集所有代表编程语言、框架、设计软件及开发工具的标志。无论是前端、后端、运维还是设计，你需要的技术图标，这里几乎都有。

核心亮点

• 海量覆盖：拥有 150+ 个图标，涵盖主流语言（Java, Python, Go）、框架（Vue, Angular, Next.js）、数据库（MySQL, MongoDB）、工具（Git, Docker, AWS）及设计软件（Figma, Photoshop）。
• 多种风格：每个图标提供多种变体，满足不同设计需求：
  • 原版 (Plain)：标准彩色版本。
  • 平面 (Plain Wordmark)：带文字商标的版本。
  • 线条 (Line)：简约线稿风格，适合深色模式或极简设计。
  • 原始 (Original)：最接近品牌官方规范的版本。
• 灵活交付：支持 SVG（矢量无损）、Web Font（字体图标，易于调整大小颜色）等多种格式。
• 持续更新：社区驱动，不断收录新兴技术栈图标。

极速上手：三种集成方式

方式一：CDN 引入（最简单，无需安装）

只需在 HTML <head> 中添加一行 CSS 链接，即可直接使用类名调用图标。

<!-- 1. 引入 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">

<!-- 2. 在 Body 中使用 -->
<!-- 语法：devicon-[名称]-[风格] -->
<i class="devicon-python-plain"></i>
<i class="devicon-react-original"></i>
<i class="devicon-docker-plain-wordmark"></i>
<i class="devicon-vscode-plain"></i>

方式二：NPM/Yarn 安装（适合现代前端项目）

如果你在使用 React, Vue, Next.js 等项目，可以通过包管理器安装。

# npm
npm install --save devicon

# yarn
yarn add devicon

然后在项目中导入 CSS：

import 'devicon/devicon.min.css';
// 或者在 style.scss 中
@import '~devicon/devicon.min.css';

方式三：直接使用 SVG（最高性能，无依赖）

访问 devicon.dev，搜索你需要的图标，直接复制 SVG 代码 粘贴到 HTML 中。这种方式没有字体加载延迟，且可以单独定制每个图标的样式。

常见使用场景

1. 技术简历：在“技能清单”部分用图标代替纯文字列表，视觉更直观，HR 一眼就能捕捉到你的技术栈。
2. GitHub README：为你的开源项目添加炫酷的技术栈徽章，提升项目专业度。
3. 个人博客/网站：在文章头部标记所用技术，或在“关于我”页面展示擅长领域。
4. 团队介绍页：展示团队成员擅长的技术工具，体现团队多样性。
5. 技术文档：区分不同语言或工具的章节标题。

命名规范小贴士

Devicon 的类名遵循统一规范：devicon-[名称]-[风格]。

• 名称：通常是全小写，如 javascript, typescript, aws.
• 风格：
  • plain: 纯色/标准版
  • original: 原始版（通常带渐变或复杂细节）
  • line: 线条版
  • wordmark: 带文字商标
  • 组合示例：devicon-javascript-plain, devicon-aws-original-wordmark

🔍 提示：不确定具体类名？请访问官网 devicon.dev 查看完整列表并一键复制类名。

版权说明

Devicon 中的所有产品名称、标志和品牌均为其各自所有者的财产。Devicon 仅提供图标的收集与分发，不代表任何品牌的背书。在使用时，请遵守相关品牌的品牌指南（例如不要随意修改 Logo 颜色或比例），仅将其用于识别目的。