无需登录 数据私有 本地保存

开发图标搜索器 - Devicon的HTML复制

10
0
0
0

Devicon 图标搜索器

浏览、搜索并复制 Devicon 开发图标 HTML 代码,开箱即用

全部 编程语言 前端 后端 数据库 DevOps 开发工具 移动端
0 个图标

常见问题

Devicon 是一个专注于开发技术图标的开源图标库,涵盖了编程语言、框架、工具、数据库、云服务等 200+ 开发相关图标。它提供字体图标(Icon Font)和 SVG 两种使用方式,非常适合技术博客、作品集、文档站点和开发者工具中使用。与 Font Awesome 等通用图标库不同,Devicon 专门面向开发者生态。

最简单的引入方式是通过 CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">

然后在 HTML 中使用:
<i class="devicon-python-plain"></i> (单色线框风格)
<i class="devicon-python-original"></i> (彩色原始风格)

也可以通过 npm 安装:npm install devicon

Plain(线框/单色):图标以单色线条或填充形式呈现,颜色统一,适合需要视觉一致性的界面设计。你可以通过 CSS color 属性自由更改颜色。

Original(彩色原始):图标保留该技术的品牌原始色彩(如 Python 的蓝黄双色、MongoDB 的绿色等),色彩丰富、辨识度高,适合展示技术栈等场景。

此外还有 -wordmark 后缀版本(如 devicon-python-original-wordmark),会在图标旁附带文字标识。

由于 Devicon 字体图标本质是文字,直接使用 CSS 的 font-size 即可调整大小:
<i class="devicon-react-original" style="font-size: 48px;"></i>

图标会保持矢量清晰度,任意缩放都不会失真。你也可以使用 emrem 等相对单位来匹配上下文文字大小。

Devicon 覆盖了非常广泛的开发技术栈,包括但不限于:
编程语言:Python、JavaScript、TypeScript、Java、Go、Rust、C/C++、Ruby、PHP、Swift、Kotlin 等
前端框架:React、Vue.js、Angular、Svelte、Next.js、Nuxt.js 等
后端框架:Django、Flask、Spring、Laravel、Express、NestJS 等
数据库:MySQL、PostgreSQL、MongoDB、Redis、SQLite 等
DevOps:Docker、Kubernetes、AWS、Azure、Nginx、Jenkins、Terraform 等
开发工具:VS Code、Git、GitHub、GitLab、Figma、npm、Webpack、Vite 等
目前图标总数已超过 200+,且持续更新中。

Font Awesome 是通用图标库(包含 UI 控件、社交媒体、箭头等日常图标),适合大多数网站的基础图标需求。
Devicon专精于开发技术图标,提供了 Font Awesome 中不具备的编程语言、框架、数据库等开发者专属图标。两者可以互补使用:用 Font Awesome 处理通用 UI 图标,用 Devicon 展示技术栈相关内容。

本工具页面需要联网加载 Devicon 的 CDN 样式文件才能正确渲染图标预览。但你可以将 Devicon 的 CSS 和字体文件下载到本地项目中离线使用。通过 npm 安装(npm install devicon)后,在 node_modules/devicon 目录中即可找到所有资源文件。