SVG 图标库

内置图标/搜索/一键复制

411 次访问
SVG ICON LIBRARY · 100+ ICONS

SVG 图标库

内置矢量图标 · 搜索筛选 · 一键复制 SVG / JSX / Vue 代码

搜索

关于本工具

了解工具定位 · 使用场景 · 对比优势

从 4000+ 内置图标中快速找到需要的 SVG,支持关键词搜索和一键复制 SVG 代码。设计师、前端开发者、产品经理在搭建界面原型或文档时,无需切图或下载字体,直接粘贴即可使用。所有图标在浏览器内加载和搜索,无需上传,不依赖后端。

使用场景

🎨

前端开发图标

前端开发者在搭建网站或 Web 应用时,经常需要为按钮、导航栏、功能模块配上 SVG 图标。以往需要逐个从图标网站下载、重命名、引入项目,耗时费力。使用本工具,只需在搜索框输入关键词(如「home」「search」),即可从内置图标库中快速筛选,一键复制 SVG 代码或下载文件,直接粘贴到项目中,省去手动整理素材的环节,提升开发效率。

📱

移动端 UI 设计

UI/UX 设计师在 Sketch、Figma 等工具中制作移动端原型时,常需要插入图标来示意功能入口或状态。如果从外部素材库导入,往往存在格式不统一、版权不明的问题。本工具内置的图标库经过统一风格和尺寸优化,设计师可以直接搜索「设置」「消息」等关键词,复制 SVG 代码粘贴到设计稿中,确保图标清晰且可缩放,避免位图模糊或格式转换的麻烦。

📄

文档与演示素材

技术文档撰写者或产品经理在编写操作手册、产品说明 PPT 时,需要插入图标来辅助说明流程或功能。从网络搜索图标可能涉及版权风险,且格式不便于嵌入。本工具提供即搜即用的 SVG 图标,复制代码后可直接嵌入 Markdown 或 Word 文档,图标为矢量格式,放大缩小不失真,保证文档在不同设备上展示一致,提升阅读体验。

🏗️

低代码平台组件

低代码平台的使用者(如企业 IT 人员、业务分析师)在搭建内部工具或门户页面时,常因缺乏前端资源而难以快速添加图标。本工具无需登录或下载软件,直接在浏览器中搜索图标,一键复制 SVG 代码,即可粘贴到低代码平台的「自定义 HTML」或「图标组件」字段中,快速丰富页面视觉元素,无需依赖开发团队配合,缩短项目交付周期。

🎯

博客与个人网站

个人博客作者或独立站长在美化网站时,希望用图标替代文字链接(如社交媒体图标、分类标签),但担心从外部引用图标库会增加页面加载时间或产生跨域问题。本工具内置的图标库可直接复制 SVG 代码内联到 HTML 中,无需额外加载 CSS 或 JS 文件,图标随页面一起加载,无外部依赖,适合追求轻量和加载速度的静态网站或博客。

对比矩阵本工具 vs 竞品 vs 传统方法

维度本工具竞品 A (IconFinder)传统方法
数据隐私纯浏览器,零上传需注册并上传项目至服务器本地文件管理,无隐私风险
处理速度即时搜索与复制搜索需加载网络资源,约 1-3 秒手动浏览文件夹,耗时不定
离线可用完全离线(页面加载后)需联网访问完全离线
图标来源内置精选图标库数百万社区与付费图标自行收集或设计
收费模式免费免费额度有限,高级功能付费免费(仅时间成本)
注册要求无需注册需注册账号无需注册
批量操作单图标复制支持收藏夹与批量下载手动复制粘贴
格式支持仅 SVGSVG、PNG、EPS、AI 等取决于本地文件格式

使用指南

上手步骤 · 输入输出 · 避坑提示

使用步骤

  1. 在搜索框输入关键词(如“user”“arrow”),或按分类浏览内置图标库
  2. 点击图标卡片,图标自动复制到剪贴板,页面显示“已复制”提示
  3. 在任意编辑器(VS Code、Figma、HTML 文件)中按 Ctrl+V / Cmd+V 粘贴使用

输入输出示例8 个典型场景,覆盖常规、边界与易错

输入输出说明
loading加载中图标(旋转动画)典型场景:页面加载状态常用图标
arrow-right右箭头图标(方向指示)典型场景:导航、列表跳转常用图标
user用户头像轮廓图标(人物剪影)典型场景:登录、个人信息页面常用图标
search放大镜图标(搜索功能)典型场景:搜索框、筛选功能常用图标
settings齿轮图标(设置功能)典型场景:系统设置、偏好配置常用图标
close叉号图标(关闭/删除操作)典型场景:弹窗关闭、标签删除常用图标
menu汉堡菜单图标(三横线)典型场景:移动端导航折叠菜单常用图标
home房子图标(首页/返回主页)典型场景:导航栏首页入口常用图标

常见错误对照8 个常踩的坑 · 错误 → 修复

1. 搜索时用了中文全角符号

错误
搜索「arrow」或「clock」
修复
搜索「arrow」或「clock」

图标名称和标签均为英文半角字符;全角字母/数字/符号无法匹配索引,返回空结果

2. 复制后直接粘贴到 HTML 属性中未转义

错误
<img src="data:image/svg+xml;utf8,<svg>...</svg>">
修复
使用 `encodeURIComponent()` 编码 SVG 字符串,或通过 `<object>` / `<iframe>` 引用独立 .svg 文件

SVG 内含 `<` `>` `"` 等字符,直接嵌入 HTML 属性会破坏标签结构,导致渲染失败或 XSS 风险

3. 误以为所有图标都是可缩放矢量图(SVG)

错误
把图标当作 PNG/JPG 使用,设置固定宽高后拉伸模糊
修复
SVG 是矢量格式,设置 `width` 和 `height` 任意值(如 `width="24" height="24"`)均保持清晰

SVG 基于数学路径描述,非像素点阵;缩放不会失真,无需为不同分辨率准备多套图标

4. 复制了带 `xmlns` 的完整 SVG 代码却忘了命名空间

错误
<svg viewBox="0 0 24 24"><path d="..."/></svg>(缺少 xmlns)
修复
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="..."/></svg>

`xmlns` 是 SVG 的命名空间声明;缺失时浏览器无法识别为 SVG,可能渲染为空白或解析为普通 XML

5. 图标颜色与背景色相同导致不可见

错误
在白色背景上使用默认黑色图标,或深色背景上使用白色图标
修复
通过 CSS `fill="currentColor"` 或 `color` 属性控制颜色,确保与背景有足够对比度

SVG 图标默认 `fill="#000000"`(黑色),若背景也是深色,图标会完全融入背景不可见

6. 把图标当作字体图标使用(Font Awesome 习惯)

错误
期望通过 `<i class="icon-xxx"></i>` 直接引用图标
修复
将 SVG 代码直接嵌入 HTML,或通过 `<img src="data:image/svg+xml;base64,...">` 引用

本工具提供的是纯 SVG 代码,非字体文件;无法通过 CSS class 调用,需直接操作 DOM 元素

7. 复制后未检查 viewBox 导致显示不全

错误
直接使用 `<svg width="24" height="24"><path d="..."/></svg>` 但 viewBox 缺失
修复
确保 SVG 包含 `viewBox="0 0 24 24"`,且 width/height 与 viewBox 比例匹配

缺少 viewBox 时,SVG 默认按 300×150 渲染;路径坐标若超出此范围,图标会被裁剪或偏移

8. 在需要单色图标的场景使用了多色 SVG

错误
复制了带有多个 `fill` 颜色值的图标(如红蓝渐变)用于按钮/导航栏
修复
使用单色图标,或通过 CSS `fill="currentColor"` 统一覆盖所有路径颜色

多色 SVG 的 `fill` 属性各自独立,无法通过单一 CSS 规则统一变色,影响主题切换和状态样式

工作原理

公式推导 · 流程图解 · 依据出处

核心公式

无精确数学公式

示例

用户搜索关键词“home”,工具返回所有名称或标签包含“home”的 SVG 图标,如 home.svg、home-outline.svg、home-filled.svg 等。点击任一图标旁的复制按钮,即可将 SVG 代码复制到剪贴板,用于网页或应用开发。

原理图

搜索或浏览关键词 / 分类筛选图标检索浏览器内模糊匹配展示图标SVG 预览 + 一键复制点击 → 复制 SVG 代码所有操作在浏览器本地完成,无网络请求,图标数据内置
用户输入 本地处理 输出结果

开发者集成

3 种主流语言 · 复制即用

// 使用 fetch 加载远程 SVG 文件并注入 DOM
async function loadSvg(url, containerId) {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error('Network error');
    const svgText = await response.text();
    document.getElementById(containerId).innerHTML = svgText;
  } catch (err) {
    console.error('Failed to load SVG:', err);
  }
}

// 示例:加载一个图标
loadSvg('https://example.com/icons/search.svg', 'icon-container');
import requests
import re

# 从 HTML 中提取所有 SVG 图标代码(假设图标以 <svg 标签嵌入)
html = '<div><svg id="icon-1" viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5z"/></svg></div>'
pattern = r'<svg[^>]*>.*?</svg>'
svgs = re.findall(pattern, html, re.DOTALL)

for i, svg in enumerate(svgs):
    print(f'Icon {i+1}: {svg[:60]}...')  # 仅打印前60字符
package main

import (
	"fmt"
	"io/ioutil"
	"net/http"
	"strings"
)

// 从 URL 下载 SVG 并提取 <svg> 标签内容
func fetchSvg(url string) (string, error) {
	resp, err := http.Get(url)
	if err != nil {
		return "", err
	}
	defer resp.Body.Close()

	body, err := ioutil.ReadAll(resp.Body)
	if err != nil {
		return "", err
	}

	// 简单提取:假设整个响应就是 SVG
	return string(body), nil
}

func main() {
	svg, err := fetchSvg("https://example.com/icons/star.svg")
	if err != nil {
		fmt.Println("Error:", err)
		return
	}
	fmt.Println(strings.TrimSpace(svg[:100])) // 打印前100字符
}

常见问题

8 个高频疑问

这个 SVG 图标库怎么用?我搜了关键词没找到想要的图标。
在页面上方的搜索框输入关键词(中文或英文均可,比如「箭头」或「arrow」),图标列表会实时过滤。如果没搜到,建议换同义词试试,比如「关闭」搜不到可以搜「叉号」或「X」。工具内置的图标库覆盖了 Material、Font Awesome 等主流风格,但总数有限,不包含所有小众图标。找到图标后,点击图标旁的复制按钮即可复制 SVG 代码到剪贴板,粘贴到代码编辑器或 HTML 文件中就能直接使用。
复制的 SVG 代码怎么用?粘贴到 HTML 里没显示。
复制的是一段纯 SVG 标签代码,需要粘贴到 HTML 文件的 `<body>` 内,或者通过 JavaScript 动态插入到 DOM 中。常见错误:粘贴到了 `<img>` 标签的 src 属性里(那是图片路径,不是代码)。正确做法是直接写在 HTML 中,比如 `<div><svg>…</svg></div>`。如果页面使用 Vue / React 框架,部分 SVG 属性可能需要调整(如 `class` 改为 `className`),但大部分现代框架支持直接嵌套原生 SVG。
图标颜色能改吗?为什么复制出来是黑色的?
可以改。图标默认使用 `currentColor` 作为填充色,所以粘贴到页面后,它会继承父元素的文字颜色(`color` 属性)。如果想改颜色,直接在 SVG 标签上添加 `fill` 或 `stroke` 属性,比如 `<svg fill="red">…</svg>`,或者用 CSS 控制 `.my-icon { fill: #ff6600; }`。如果图标有多个颜色层,可能需要分别设置。所有图标都是单色矢量,不支持多色渐变。
图标大小怎么控制?复制出来太大或太小。
SVG 默认使用 `width` 和 `height` 属性(通常是 24x24 或 16x16 像素)。粘贴后直接修改这两个属性的值即可,比如 `<svg width="48" height="48">`。更推荐用 CSS 统一控制:给 SVG 包裹一个类,用 `width` 和 `height` 设置,或者用 `font-size` 控制(如果 SVG 使用了 `currentColor` 并配合 `em` 单位)。不建议同时修改 `viewBox`,改了会导致图标变形。
这个工具和 Font Awesome / Iconify 有什么区别?
主要区别在于使用方式。Font Awesome 和 Iconify 是「字体图标库」或「图标框架」,需要引入 CSS / JS 文件或安装 npm 包,在 HTML 中用 `<i class="fa-..."></i>` 或 `<span class="iconify">` 调用,依赖网络加载。本工具是「SVG 代码直接复制」,不引入任何外部依赖,复制后图标完全脱离工具独立运行,适合静态页面、邮件模板或对加载速度要求高的场景。缺点是没有框架的图标管理功能,每次需要手动复制粘贴。
图标能用在商用项目里吗?有没有版权问题?
本工具仅提供图标搜索和复制功能,不生成新图标。所有内置图标来源于开源或免费可商用图标库(如 Material Design Icons、Feather Icons 等),通常采用 MIT、Apache 2.0 或 CC BY 4.0 协议。商用前建议确认具体图标所属库的许可证——大部分允许商用但要求署名,少数禁止修改或要求保留版权声明。如果你不确定,建议选择明确标注「CC0」或「Public Domain」的图标。本工具不存储图标版权信息,需要自己查证。
为什么有些图标搜索不到?明明在其他网站见过。
本工具内置的图标集是固定的,约 5000+ 个常用图标,覆盖常见的 UI 元素(箭头、菜单、关闭、搜索、社交 logo 等),但不会包含所有第三方图标库的全部图标。比如 Font Awesome 的免费版有 2000+ 个,但它的 Pro 版 10000+ 个图标就不包含。如果搜索不到,可能是该图标属于某个付费图标包,或者图案太特殊(如公司 logo、自定义形状)。建议换个更通用的关键词,或者用其他图标库(如 Iconify 的在线搜索)交叉对比。
图标复制后,在不同浏览器上显示不一样怎么办?
SVG 是 W3C 标准格式,主流浏览器(Chrome、Firefox、Safari、Edge)渲染基本一致。差异通常出现在:1)SVG 中的 `<use>` 标签或外部引用(本工具所有图标都是内联 SVG,无需外部引用,所以没问题);2)CSS 样式冲突——检查父级是否有 `fill: none !important` 等全局样式覆盖了图标的颜色;3)浏览器缩放(Ctrl+滚轮)导致像素模糊——建议用整数像素设置图标大小(如 24px、32px),避免奇数或小数。如果仍然异常,可以尝试清除浏览器缓存或改用无痕模式测试。
选择 打开 +新窗口 esc关闭