Mickey AI 图标库 - 使用手册

概述

Mickey AI 图标库接入全球开源图标生态，收录 100+ 图标集、超过 10 万个矢量图标，全部免费开放使用。所有图标均为 SVG 格式，支持无限缩放不失真。图标数据由 Iconify 提供支持。

无需注册、无需 API Key，所有图标可直接复制 SVG 代码或下载到本地使用。

支持的图标集

Material Design — Google 官方图标，风格统一，数量最多
Tabler — 简洁线条风格，适合现代 Web 界面
Phosphor — 多种粗细可选，设计感强
Lucide — 轻量优雅，社区活跃
Solar / Carbon — 更多风格补充

HTML 使用

最简单的方式是直接复制 SVG 代码粘贴到 HTML 中。在图标库中点击任意图标，右侧导出面板提供「复制 SVG」按钮。

基础用法

html

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path fill="currentColor" d="M10 20v-6h4v6h5v-8h3L12 3..."/>
</svg>

使用 Mickey AI 图标服务（推荐）

如果需要在页面中使用大量图标，推荐引入在线脚本，通过 data-icon 属性按需加载：

html

<!-- 在 <head> 中引入 -->
<script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>

<!-- 在页面中使用 -->
<span class="iconify" data-icon="mdi:home"></span>
<span class="iconify" data-icon="tabler:search"></span>

图标名称格式

Mickey AI 图标库使用 前缀:名称 的格式标识图标，例如：

图标	名称	说明
首页	`mdi:home`	Material Design 的 home 图标
搜索	`tabler:search`	Tabler 的 search 图标
用户	`ph:user`	Phosphor 的 user 图标

CSS 控制颜色与大小

由于所有图标都使用 currentColor 作为颜色值，你可以像控制文字颜色一样控制图标颜色。

修改颜色

css

/* 通过 color 属性改变图标颜色 */
.icon {
  color: #333;
}
.icon:hover {
  color: #3b82f6;
}

/* 黑夜模式自动切换 */
@media (prefers-color-scheme: dark) {
  .icon { color: #ddd; }
}

修改大小

css

/* 通过 width / height 控制尺寸 */
.icon-sm  { width: 16px; height: 16px; }
.icon-md  { width: 24px; height: 24px; }
.icon-lg  { width: 32px; height: 32px; }
.icon-xl  { width: 48px; height: 48px; }

描边粗细

对于 outline 风格的图标（如 Tabler、Lucide），可以通过 stroke-width 调整线条粗细：

css

svg {
  stroke-width: 1.5;  /* 细线 */
}
svg.bold {
  stroke-width: 2.5;  /* 粗线 */
}

React / Vue 中使用

React

安装 Iconify 的 React 包 @iconify/react：

bash

npm install @iconify/react

jsx

import { Icon } from '@iconify/react';
import homeIcon from '@iconify/icons-mdi/home';

// 方式一：使用 Icon 组件
<Icon icon="mdi:home" width={24} />

// 方式二：离线使用（不依赖网络）
<Icon icon={homeIcon} />

Vue 3

安装 Iconify 的 Vue 包 @iconify/vue：

bash

npm install @iconify/vue

vue

<template>
  <Icon icon="mdi:home" :width="24" />
</template>

<script setup>
import { Icon } from '@iconify/vue';
</script>

导出下载

在图标库页面点击任意图标后，右侧面板提供以下导出方式：

复制 SVG — 复制纯 SVG 代码，可直接粘贴到 HTML / JSX 中
复制 XML — 与 SVG 相同，方便在 Android / Jetpack Compose 中使用
下载 SVG — 下载为 .svg 文件，可在设计软件中打开
下载 PNG — 下载为 .png 文件（512×512 像素，白色背景）

导出前可在右侧面板调整颜色和描边粗细，设置会同步应用到下载的文件中。

常见问题

图标加载慢或显示不出来？

数据源服务器在海外，国内访问可能较慢。建议将常用图标下载到本地使用，或引入离线包。

可以商用吗？

可以。Mickey AI 图标库收录的图标大多采用 MIT、Apache 2.0 或 CC BY 4.0 等开源协议，允许商业使用。具体请查看对应图标集的许可证。

如何找到特定图标？

在图标库页面右侧搜索框输入英文关键词（如 home、user、arrow）即可搜索。左侧中文分类也可快速浏览相关图标。

图标颜色改不了？

确保 SVG 内使用 fill="currentColor" 或 stroke="currentColor"。从本站复制的 SVG 已自动处理，直接使用 CSS color 属性即可控制。

概述