搜索 SVG 图标

Q: 搜索 图标可以商用吗？

withicons-animesearch

来自 with icons Anime 开源图标集，矢量 SVG 可无损缩放到任意尺寸，支持在线改色、复制 React/Vue/HTML 代码。

图标 ID: withicons-anime:search
中文名: 搜索
所属集合: with icons Anime
集合规模: 1,000 枚
基础网格: 24px
色彩: 多色
开源协议: MIT
作者: Evergrow

下载搜索图标

SVG 矢量源文件，或 PNG 按 16~512 预设与 16~1024 自定义尺寸导出，任意尺寸边缘锐利。

iOS / Android 全套尺寸 · 素材包生成器用 AI 生成类似风格的图标

PNG 由矢量源实时渲染，任意尺寸边缘锐利无锯齿；下载与预览均免费，无需注册。

搜索的预览与使用场景

切换预览颜色后，下方三底色、真实界面场景与各尺寸渲染会实时跟随。

预览颜色

浅色背景

深色背景

灰底融入

在真实界面里长这样

继续按钮内 · 主操作

搜索搜索…输入框 · 前缀图标

搜索导航菜单 · 选中态

暂无内容空状态 · 引导提示

9:41

搜索

search-x

file-search

mail-search

scan-search

text-search

user-search

folder-search

calendar-search手机桌面 · App 图标

搜索withicons-anime.design/icons/search浏览器 · 标签页与站点图标

各尺寸下的可读性

24px

32px

48px

64px

96px

128px

复制搜索图标代码

内联 SVG、React、Vue 与 CSS mask 四种主流引用方式，代码基于当前源文件生成，复制即用。

svgSVG 源码（内联 HTML）

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none"><path fill="#2b2148" d="m16.2 14.57l-.32.13l-.28.2l-.61.6l-.29.38l-.13.32l-.06.4l.06.4l.13.32l.59.88l3.41 3.4l.3.21l.3.12l.3.05l.5-.05l.32-.13l.28-.2l.61-.6l.3-.4l.12-.3l.06-.4l-.06-.4l-.13-.32l-.59-.88l-3.41-3.4l-.28-.2l-.32-.13l-.4-.06z" class="wm-a"/><path fill="#4ba8f5" d="m16.3 15.07l-.4.23l-.75.8l-.14.5l.14.5l3.55 3.6l.4.23l.3.06l.5-.14l.4-.35l.55-.6l.14-.5l-.14-.5l-3.55-3.6l-.2-.15l-.3-.11l-.2-.03z" class="wm-a"/><path fill="#4b2c8f" fill-opacity=".32" d="m16.5 15.05l-.76.85l-.7.6v.3l.11.3l3.55 3.6l.4.23l.3.06l.5-.14l.8-.75l.23-.4l.06-.3l-.06-.3l-.13-.27l-.3-.33l-.16.6l-.74.79l-.2.15l-.3.11l-.2.03l-.3-.06l-.4-.23l-3-2.99l.9-.84l.75-.96l-.15-.07z" class="wm-a"/><path fill="#fff" d="m16.6 15.46l-.54.64l.04.03l.3.07l.2-.07l.13-.13l.07-.2l-.02-.2l-.08-.13z" class="wm-shine"/><path fill="#2b2148" d="m9 2.4l-1.2.28l-.7.26l-.7.34l-.6.36l-.7.53l-.5.46l-.52.57l-.44.6l-.71 1.3l-.29.8l-.23 1l-.11 1.5l.17 1.4l.2.8l.26.7l.35.7l.66 1.1l.44.6l.52.57l1.11.93l.69.42l.7.34l.9.33l.8.18l1.5.13l.7-.04l.8-.12l1.4-.43l.7-.33l.64-.38l1.16-.93l.7-.78l.42-.59l.41-.7l.32-.7l.41-1.4l.14-1.5l-.14-1.5l-.27-1l-.27-.7l-.71-1.3l-.81-1.14l-.5-.53l-.61-.53l-1.19-.78l-.7-.33l-.7-.25l-.7-.18l-.8-.12l-.8-.04zm.56 3.8l.94-.1l.9.09l.9.28l.64.33l.76.6l.59.7l.32.8l.15.7l.03.9l-.15.9l-.35.9l-.49.76l-.62.64l-.68.48l-.8.37l-.9.21l-.9.03l-.9-.15l-.88-.34l-.62-.38l-.6-.52l-.49-.6l-.32-.8l-.15-.7l-.03-.9l.15-.9l.34-.88l.38-.62l.62-.7l.66-.5l.64-.33z" class="wm-k"/><path fill="#ffc740" d="m9.1 2.89l-1.2.28l-1.3.57l-1.12.76l-.54.5l-.53.6l-.73 1.1l-.29.6l-.34 1l-.23 1.4l.04 1.4l.28 1.3l.54 1.3l.36.6l.45.6l.99 1l1.12.76l.69.34l.91.32l1.4.26l1.4-.02l1.4-.3l1.3-.54l1.1-.72l.6-.54l.6-.67l.77-1.19l.52-1.3l.28-1.4V9.5l-.1-.7l-.27-1l-.54-1.2l-.44-.7l-.39-.5l-1.03-1l-1.2-.77l-1.3-.52l-.6-.16l-.8-.11l-.7-.04zm1.1 2.21l1 .1l1 .31l.9.5l.7.58l.59.71l.5.9l.31 1l.1 1l-.1 1l-.31 1l-.49.89l-.5.62l-.8.68l-.9.5l-1 .31l-1 .1l-1-.1l-1-.31l-.89-.49l-.62-.5l-.68-.8l-.5-.9l-.31-1l-.1-1l.1-1l.31-1L6 7.31l.5-.62l.8-.68l.9-.5l1-.31z" class="wm-k"/><path fill="#ff5d78" fill-opacity=".42" d="m16.7 6.68l-.04.12l.32 1.2l.12 1.3l-.14 1.4l-.37 1.3l-.32.7l-.35.6l-.77 1l-.85.79l-1.1.73l-1.2.51l-.9.23l-1.3.14l-1.4-.12l-1-.25l-1.3-.57l-.6-.37l-.6-.47l-.5-.47l-.6-.71l-.05.06l.05.1l.69 1l.45.5l.56.51l1.1.75l.69.34l.91.32l1.4.26l1.4-.02l1.4-.3l1.3-.54l1.1-.72l.6-.54l.6-.67l.77-1.19l.52-1.3l.28-1.4V9.5l-.1-.7l-.27-1z" class="wm-k"/><path fill="#fff" d="m8.4 3.99l-.6.18l-.7.3l-.52.33l-.47.4l-.52.6l-.42.7l-.28.8l.07.2l.14.06l.1-.02l1.4-1.17l1.3-.79l1.2-.53l1.9-.51l.09-.14l-.06-.1l-.23-.12l-.8-.21l-.8-.07zM4.2 9.18L4 9.3l-.14.2l-.04.2l.03.2l.12.2l.23.15l.2.03l.2-.04l.2-.14l.12-.2l.03-.2l-.04-.2l-.14-.2l-.17-.11l-.2-.04z" class="wm-shine"/><path fill="#bfe6ff" d="m10.2 5.1l-1 .1l-1 .31l-.89.49l-.62.5l-.68.8l-.5.9l-.31 1l-.1 1l.1 1l.31 1l.49.89l.5.62l.8.68l.9.5l1 .31l1 .1l1-.1l1-.31l.89-.49l.62-.5l.68-.8l.5-.9l.31-1l.1-1l-.1-1l-.31-1l-.49-.89l-.5-.62l-.8-.68l-.9-.5l-1-.31z" class="wm-k"/><path fill="#4b2c8f" fill-opacity=".3" d="m10.2 5.1l-.7.05l-.7.15l-.6.21l-.6.3l-.91.69l-.46.5l-.42.6l-.3.6l-.21.6l-.15.7l-.05.7l.05.7l.12.6l.43 1.1l.05-.1l-.2-.9l-.05-.7l.05-.7l.24-1l.31-.7l.53-.8l.69-.7l.68-.49l.88-.41l.72-.2l1-.1l.7.05l1 .24l.7.31l.8.53l.7.69l.05-.02l-.23-.4l-.42-.51l-.5-.46l-.6-.42l-.6-.3l-.6-.21l-.7-.15z" class="wm-k"/><path fill="#fff" d="M10.5 5.98L5.98 10.5l-.06.1l.13.7l.35.9l5.8-5.8l-.9-.35l-.7-.13zm2.4.88L6.92 12.8l-.06.1l.44.47l6.07-6.07z" class="wm-shine"/></g></svg>

reactReact 组件（TSX）

export function SearchIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      viewBox="0 0 24 24"
      fill="currentColor"
      {...props}
      dangerouslySetInnerHTML={{ __html: `<g fill="none"><path fill="#2b2148" d="m16.2 14.57l-.32.13l-.28.2l-.61.6l-.29.38l-.13.32l-.06.4l.06.4l.13.32l.59.88l3.41 3.4l.3.21l.3.12l.3.05l.5-.05l.32-.13l.28-.2l.61-.6l.3-.4l.12-.3l.06-.4l-.06-.4l-.13-.32l-.59-.88l-3.41-3.4l-.28-.2l-.32-.13l-.4-.06z" class="wm-a"/><path fill="#4ba8f5" d="m16.3 15.07l-.4.23l-.75.8l-.14.5l.14.5l3.55 3.6l.4.23l.3.06l.5-.14l.4-.35l.55-.6l.14-.5l-.14-.5l-3.55-3.6l-.2-.15l-.3-.11l-.2-.03z" class="wm-a"/><path fill="#4b2c8f" fill-opacity=".32" d="m16.5 15.05l-.76.85l-.7.6v.3l.11.3l3.55 3.6l.4.23l.3.06l.5-.14l.8-.75l.23-.4l.06-.3l-.06-.3l-.13-.27l-.3-.33l-.16.6l-.74.79l-.2.15l-.3.11l-.2.03l-.3-.06l-.4-.23l-3-2.99l.9-.84l.75-.96l-.15-.07z" class="wm-a"/><path fill="#fff" d="m16.6 15.46l-.54.64l.04.03l.3.07l.2-.07l.13-.13l.07-.2l-.02-.2l-.08-.13z" class="wm-shine"/><path fill="#2b2148" d="m9 2.4l-1.2.28l-.7.26l-.7.34l-.6.36l-.7.53l-.5.46l-.52.57l-.44.6l-.71 1.3l-.29.8l-.23 1l-.11 1.5l.17 1.4l.2.8l.26.7l.35.7l.66 1.1l.44.6l.52.57l1.11.93l.69.42l.7.34l.9.33l.8.18l1.5.13l.7-.04l.8-.12l1.4-.43l.7-.33l.64-.38l1.16-.93l.7-.78l.42-.59l.41-.7l.32-.7l.41-1.4l.14-1.5l-.14-1.5l-.27-1l-.27-.7l-.71-1.3l-.81-1.14l-.5-.53l-.61-.53l-1.19-.78l-.7-.33l-.7-.25l-.7-.18l-.8-.12l-.8-.04zm.56 3.8l.94-.1l.9.09l.9.28l.64.33l.76.6l.59.7l.32.8l.15.7l.03.9l-.15.9l-.35.9l-.49.76l-.62.64l-.68.48l-.8.37l-.9.21l-.9.03l-.9-.15l-.88-.34l-.62-.38l-.6-.52l-.49-.6l-.32-.8l-.15-.7l-.03-.9l.15-.9l.34-.88l.38-.62l.62-.7l.66-.5l.64-.33z" class="wm-k"/><path fill="#ffc740" d="m9.1 2.89l-1.2.28l-1.3.57l-1.12.76l-.54.5l-.53.6l-.73 1.1l-.29.6l-.34 1l-.23 1.4l.04 1.4l.28 1.3l.54 1.3l.36.6l.45.6l.99 1l1.12.76l.69.34l.91.32l1.4.26l1.4-.02l1.4-.3l1.3-.54l1.1-.72l.6-.54l.6-.67l.77-1.19l.52-1.3l.28-1.4V9.5l-.1-.7l-.27-1l-.54-1.2l-.44-.7l-.39-.5l-1.03-1l-1.2-.77l-1.3-.52l-.6-.16l-.8-.11l-.7-.04zm1.1 2.21l1 .1l1 .31l.9.5l.7.58l.59.71l.5.9l.31 1l.1 1l-.1 1l-.31 1l-.49.89l-.5.62l-.8.68l-.9.5l-1 .31l-1 .1l-1-.1l-1-.31l-.89-.49l-.62-.5l-.68-.8l-.5-.9l-.31-1l-.1-1l.1-1l.31-1L6 7.31l.5-.62l.8-.68l.9-.5l1-.31z" class="wm-k"/><path fill="#ff5d78" fill-opacity=".42" d="m16.7 6.68l-.04.12l.32 1.2l.12 1.3l-.14 1.4l-.37 1.3l-.32.7l-.35.6l-.77 1l-.85.79l-1.1.73l-1.2.51l-.9.23l-1.3.14l-1.4-.12l-1-.25l-1.3-.57l-.6-.37l-.6-.47l-.5-.47l-.6-.71l-.05.06l.05.1l.69 1l.45.5l.56.51l1.1.75l.69.34l.91.32l1.4.26l1.4-.02l1.4-.3l1.3-.54l1.1-.72l.6-.54l.6-.67l.77-1.19l.52-1.3l.28-1.4V9.5l-.1-.7l-.27-1z" class="wm-k"/><path fill="#fff" d="m8.4 3.99l-.6.18l-.7.3l-.52.33l-.47.4l-.52.6l-.42.7l-.28.8l.07.2l.14.06l.1-.02l1.4-1.17l1.3-.79l1.2-.53l1.9-.51l.09-.14l-.06-.1l-.23-.12l-.8-.21l-.8-.07zM4.2 9.18L4 9.3l-.14.2l-.04.2l.03.2l.12.2l.23.15l.2.03l.2-.04l.2-.14l.12-.2l.03-.2l-.04-.2l-.14-.2l-.17-.11l-.2-.04z" class="wm-shine"/><path fill="#bfe6ff" d="m10.2 5.1l-1 .1l-1 .31l-.89.49l-.62.5l-.68.8l-.5.9l-.31 1l-.1 1l.1 1l.31 1l.49.89l.5.62l.8.68l.9.5l1 .31l1 .1l1-.1l1-.31l.89-.49l.62-.5l.68-.8l.5-.9l.31-1l.1-1l-.1-1l-.31-1l-.49-.89l-.5-.62l-.8-.68l-.9-.5l-1-.31z" class="wm-k"/><path fill="#4b2c8f" fill-opacity=".3" d="m10.2 5.1l-.7.05l-.7.15l-.6.21l-.6.3l-.91.69l-.46.5l-.42.6l-.3.6l-.21.6l-.15.7l-.05.7l.05.7l.12.6l.43 1.1l.05-.1l-.2-.9l-.05-.7l.05-.7l.24-1l.31-.7l.53-.8l.69-.7l.68-.49l.88-.41l.72-.2l1-.1l.7.05l1 .24l.7.31l.8.53l.7.69l.05-.02l-.23-.4l-.42-.51l-.5-.46l-.6-.42l-.6-.3l-.6-.21l-.7-.15z" class="wm-k"/><path fill="#fff" d="M10.5 5.98L5.98 10.5l-.06.1l.13.7l.35.9l5.8-5.8l-.9-.35l-.7-.13zm2.4.88L6.92 12.8l-.06.1l.44.47l6.07-6.07z" class="wm-shine"/></g>` }}
    />
  );
}

vueVue 3 组件

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" v-html="body"></svg>
</template>

<script setup>
const body = `<g fill="none"><path fill="#2b2148" d="m16.2 14.57l-.32.13l-.28.2l-.61.6l-.29.38l-.13.32l-.06.4l.06.4l.13.32l.59.88l3.41 3.4l.3.21l.3.12l.3.05l.5-.05l.32-.13l.28-.2l.61-.6l.3-.4l.12-.3l.06-.4l-.06-.4l-.13-.32l-.59-.88l-3.41-3.4l-.28-.2l-.32-.13l-.4-.06z" class="wm-a"/><path fill="#4ba8f5" d="m16.3 15.07l-.4.23l-.75.8l-.14.5l.14.5l3.55 3.6l.4.23l.3.06l.5-.14l.4-.35l.55-.6l.14-.5l-.14-.5l-3.55-3.6l-.2-.15l-.3-.11l-.2-.03z" class="wm-a"/><path fill="#4b2c8f" fill-opacity=".32" d="m16.5 15.05l-.76.85l-.7.6v.3l.11.3l3.55 3.6l.4.23l.3.06l.5-.14l.8-.75l.23-.4l.06-.3l-.06-.3l-.13-.27l-.3-.33l-.16.6l-.74.79l-.2.15l-.3.11l-.2.03l-.3-.06l-.4-.23l-3-2.99l.9-.84l.75-.96l-.15-.07z" class="wm-a"/><path fill="#fff" d="m16.6 15.46l-.54.64l.04.03l.3.07l.2-.07l.13-.13l.07-.2l-.02-.2l-.08-.13z" class="wm-shine"/><path fill="#2b2148" d="m9 2.4l-1.2.28l-.7.26l-.7.34l-.6.36l-.7.53l-.5.46l-.52.57l-.44.6l-.71 1.3l-.29.8l-.23 1l-.11 1.5l.17 1.4l.2.8l.26.7l.35.7l.66 1.1l.44.6l.52.57l1.11.93l.69.42l.7.34l.9.33l.8.18l1.5.13l.7-.04l.8-.12l1.4-.43l.7-.33l.64-.38l1.16-.93l.7-.78l.42-.59l.41-.7l.32-.7l.41-1.4l.14-1.5l-.14-1.5l-.27-1l-.27-.7l-.71-1.3l-.81-1.14l-.5-.53l-.61-.53l-1.19-.78l-.7-.33l-.7-.25l-.7-.18l-.8-.12l-.8-.04zm.56 3.8l.94-.1l.9.09l.9.28l.64.33l.76.6l.59.7l.32.8l.15.7l.03.9l-.15.9l-.35.9l-.49.76l-.62.64l-.68.48l-.8.37l-.9.21l-.9.03l-.9-.15l-.88-.34l-.62-.38l-.6-.52l-.49-.6l-.32-.8l-.15-.7l-.03-.9l.15-.9l.34-.88l.38-.62l.62-.7l.66-.5l.64-.33z" class="wm-k"/><path fill="#ffc740" d="m9.1 2.89l-1.2.28l-1.3.57l-1.12.76l-.54.5l-.53.6l-.73 1.1l-.29.6l-.34 1l-.23 1.4l.04 1.4l.28 1.3l.54 1.3l.36.6l.45.6l.99 1l1.12.76l.69.34l.91.32l1.4.26l1.4-.02l1.4-.3l1.3-.54l1.1-.72l.6-.54l.6-.67l.77-1.19l.52-1.3l.28-1.4V9.5l-.1-.7l-.27-1l-.54-1.2l-.44-.7l-.39-.5l-1.03-1l-1.2-.77l-1.3-.52l-.6-.16l-.8-.11l-.7-.04zm1.1 2.21l1 .1l1 .31l.9.5l.7.58l.59.71l.5.9l.31 1l.1 1l-.1 1l-.31 1l-.49.89l-.5.62l-.8.68l-.9.5l-1 .31l-1 .1l-1-.1l-1-.31l-.89-.49l-.62-.5l-.68-.8l-.5-.9l-.31-1l-.1-1l.1-1l.31-1L6 7.31l.5-.62l.8-.68l.9-.5l1-.31z" class="wm-k"/><path fill="#ff5d78" fill-opacity=".42" d="m16.7 6.68l-.04.12l.32 1.2l.12 1.3l-.14 1.4l-.37 1.3l-.32.7l-.35.6l-.77 1l-.85.79l-1.1.73l-1.2.51l-.9.23l-1.3.14l-1.4-.12l-1-.25l-1.3-.57l-.6-.37l-.6-.47l-.5-.47l-.6-.71l-.05.06l.05.1l.69 1l.45.5l.56.51l1.1.75l.69.34l.91.32l1.4.26l1.4-.02l1.4-.3l1.3-.54l1.1-.72l.6-.54l.6-.67l.77-1.19l.52-1.3l.28-1.4V9.5l-.1-.7l-.27-1z" class="wm-k"/><path fill="#fff" d="m8.4 3.99l-.6.18l-.7.3l-.52.33l-.47.4l-.52.6l-.42.7l-.28.8l.07.2l.14.06l.1-.02l1.4-1.17l1.3-.79l1.2-.53l1.9-.51l.09-.14l-.06-.1l-.23-.12l-.8-.21l-.8-.07zM4.2 9.18L4 9.3l-.14.2l-.04.2l.03.2l.12.2l.23.15l.2.03l.2-.04l.2-.14l.12-.2l.03-.2l-.04-.2l-.14-.2l-.17-.11l-.2-.04z" class="wm-shine"/><path fill="#bfe6ff" d="m10.2 5.1l-1 .1l-1 .31l-.89.49l-.62.5l-.68.8l-.5.9l-.31 1l-.1 1l.1 1l.31 1l.49.89l.5.62l.8.68l.9.5l1 .31l1 .1l1-.1l1-.31l.89-.49l.62-.5l.68-.8l.5-.9l.31-1l.1-1l-.1-1l-.31-1l-.49-.89l-.5-.62l-.8-.68l-.9-.5l-1-.31z" class="wm-k"/><path fill="#4b2c8f" fill-opacity=".3" d="m10.2 5.1l-.7.05l-.7.15l-.6.21l-.6.3l-.91.69l-.46.5l-.42.6l-.3.6l-.21.6l-.15.7l-.05.7l.05.7l.12.6l.43 1.1l.05-.1l-.2-.9l-.05-.7l.05-.7l.24-1l.31-.7l.53-.8l.69-.7l.68-.49l.88-.41l.72-.2l1-.1l.7.05l1 .24l.7.31l.8.53l.7.69l.05-.02l-.23-.4l-.42-.51l-.5-.46l-.6-.42l-.6-.3l-.6-.21l-.7-.15z" class="wm-k"/><path fill="#fff" d="M10.5 5.98L5.98 10.5l-.06.1l.13.7l.35.9l5.8-5.8l-.9-.35l-.7-.13zm2.4.88L6.92 12.8l-.06.1l.44.47l6.07-6.07z" class="wm-shine"/></g>`;
</script>

cssCSS mask（随 currentColor 改色）

.search {
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%232b2148%22%20d%3D%22m16.2%2014.57l-.32.13l-.28.2l-.61.6l-.29.38l-.13.32l-.06.4l.06.4l.13.32l.59.88l3.41%203.4l.3.21l.3.12l.3.05l.5-.05l.32-.13l.28-.2l.61-.6l.3-.4l.12-.3l.06-.4l-.06-.4l-.13-.32l-.59-.88l-3.41-3.4l-.28-.2l-.32-.13l-.4-.06z%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22%234ba8f5%22%20d%3D%22m16.3%2015.07l-.4.23l-.75.8l-.14.5l.14.5l3.55%203.6l.4.23l.3.06l.5-.14l.4-.35l.55-.6l.14-.5l-.14-.5l-3.55-3.6l-.2-.15l-.3-.11l-.2-.03z%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22%234b2c8f%22%20fill-opacity%3D%22.32%22%20d%3D%22m16.5%2015.05l-.76.85l-.7.6v.3l.11.3l3.55%203.6l.4.23l.3.06l.5-.14l.8-.75l.23-.4l.06-.3l-.06-.3l-.13-.27l-.3-.33l-.16.6l-.74.79l-.2.15l-.3.11l-.2.03l-.3-.06l-.4-.23l-3-2.99l.9-.84l.75-.96l-.15-.07z%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m16.6%2015.46l-.54.64l.04.03l.3.07l.2-.07l.13-.13l.07-.2l-.02-.2l-.08-.13z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%232b2148%22%20d%3D%22m9%202.4l-1.2.28l-.7.26l-.7.34l-.6.36l-.7.53l-.5.46l-.52.57l-.44.6l-.71%201.3l-.29.8l-.23%201l-.11%201.5l.17%201.4l.2.8l.26.7l.35.7l.66%201.1l.44.6l.52.57l1.11.93l.69.42l.7.34l.9.33l.8.18l1.5.13l.7-.04l.8-.12l1.4-.43l.7-.33l.64-.38l1.16-.93l.7-.78l.42-.59l.41-.7l.32-.7l.41-1.4l.14-1.5l-.14-1.5l-.27-1l-.27-.7l-.71-1.3l-.81-1.14l-.5-.53l-.61-.53l-1.19-.78l-.7-.33l-.7-.25l-.7-.18l-.8-.12l-.8-.04zm.56%203.8l.94-.1l.9.09l.9.28l.64.33l.76.6l.59.7l.32.8l.15.7l.03.9l-.15.9l-.35.9l-.49.76l-.62.64l-.68.48l-.8.37l-.9.21l-.9.03l-.9-.15l-.88-.34l-.62-.38l-.6-.52l-.49-.6l-.32-.8l-.15-.7l-.03-.9l.15-.9l.34-.88l.38-.62l.62-.7l.66-.5l.64-.33z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23ffc740%22%20d%3D%22m9.1%202.89l-1.2.28l-1.3.57l-1.12.76l-.54.5l-.53.6l-.73%201.1l-.29.6l-.34%201l-.23%201.4l.04%201.4l.28%201.3l.54%201.3l.36.6l.45.6l.99%201l1.12.76l.69.34l.91.32l1.4.26l1.4-.02l1.4-.3l1.3-.54l1.1-.72l.6-.54l.6-.67l.77-1.19l.52-1.3l.28-1.4V9.5l-.1-.7l-.27-1l-.54-1.2l-.44-.7l-.39-.5l-1.03-1l-1.2-.77l-1.3-.52l-.6-.16l-.8-.11l-.7-.04zm1.1%202.21l1%20.1l1%20.31l.9.5l.7.58l.59.71l.5.9l.31%201l.1%201l-.1%201l-.31%201l-.49.89l-.5.62l-.8.68l-.9.5l-1%20.31l-1%20.1l-1-.1l-1-.31l-.89-.49l-.62-.5l-.68-.8l-.5-.9l-.31-1l-.1-1l.1-1l.31-1L6%207.31l.5-.62l.8-.68l.9-.5l1-.31z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23ff5d78%22%20fill-opacity%3D%22.42%22%20d%3D%22m16.7%206.68l-.04.12l.32%201.2l.12%201.3l-.14%201.4l-.37%201.3l-.32.7l-.35.6l-.77%201l-.85.79l-1.1.73l-1.2.51l-.9.23l-1.3.14l-1.4-.12l-1-.25l-1.3-.57l-.6-.37l-.6-.47l-.5-.47l-.6-.71l-.05.06l.05.1l.69%201l.45.5l.56.51l1.1.75l.69.34l.91.32l1.4.26l1.4-.02l1.4-.3l1.3-.54l1.1-.72l.6-.54l.6-.67l.77-1.19l.52-1.3l.28-1.4V9.5l-.1-.7l-.27-1z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m8.4%203.99l-.6.18l-.7.3l-.52.33l-.47.4l-.52.6l-.42.7l-.28.8l.07.2l.14.06l.1-.02l1.4-1.17l1.3-.79l1.2-.53l1.9-.51l.09-.14l-.06-.1l-.23-.12l-.8-.21l-.8-.07zM4.2%209.18L4%209.3l-.14.2l-.04.2l.03.2l.12.2l.23.15l.2.03l.2-.04l.2-.14l.12-.2l.03-.2l-.04-.2l-.14-.2l-.17-.11l-.2-.04z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%23bfe6ff%22%20d%3D%22m10.2%205.1l-1%20.1l-1%20.31l-.89.49l-.62.5l-.68.8l-.5.9l-.31%201l-.1%201l.1%201l.31%201l.49.89l.5.62l.8.68l.9.5l1%20.31l1%20.1l1-.1l1-.31l.89-.49l.62-.5l.68-.8l.5-.9l.31-1l.1-1l-.1-1l-.31-1l-.49-.89l-.5-.62l-.8-.68l-.9-.5l-1-.31z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%234b2c8f%22%20fill-opacity%3D%22.3%22%20d%3D%22m10.2%205.1l-.7.05l-.7.15l-.6.21l-.6.3l-.91.69l-.46.5l-.42.6l-.3.6l-.21.6l-.15.7l-.05.7l.05.7l.12.6l.43%201.1l.05-.1l-.2-.9l-.05-.7l.05-.7l.24-1l.31-.7l.53-.8l.69-.7l.68-.49l.88-.41l.72-.2l1-.1l.7.05l1%20.24l.7.31l.8.53l.7.69l.05-.02l-.23-.4l-.42-.51l-.5-.46l-.6-.42l-.6-.3l-.6-.21l-.7-.15z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M10.5%205.98L5.98%2010.5l-.06.1l.13.7l.35.9l5.8-5.8l-.9-.35l-.7-.13zm2.4.88L6.92%2012.8l-.06.1l.44.47l6.07-6.07z%22%20class%3D%22wm-shine%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%232b2148%22%20d%3D%22m16.2%2014.57l-.32.13l-.28.2l-.61.6l-.29.38l-.13.32l-.06.4l.06.4l.13.32l.59.88l3.41%203.4l.3.21l.3.12l.3.05l.5-.05l.32-.13l.28-.2l.61-.6l.3-.4l.12-.3l.06-.4l-.06-.4l-.13-.32l-.59-.88l-3.41-3.4l-.28-.2l-.32-.13l-.4-.06z%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22%234ba8f5%22%20d%3D%22m16.3%2015.07l-.4.23l-.75.8l-.14.5l.14.5l3.55%203.6l.4.23l.3.06l.5-.14l.4-.35l.55-.6l.14-.5l-.14-.5l-3.55-3.6l-.2-.15l-.3-.11l-.2-.03z%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22%234b2c8f%22%20fill-opacity%3D%22.32%22%20d%3D%22m16.5%2015.05l-.76.85l-.7.6v.3l.11.3l3.55%203.6l.4.23l.3.06l.5-.14l.8-.75l.23-.4l.06-.3l-.06-.3l-.13-.27l-.3-.33l-.16.6l-.74.79l-.2.15l-.3.11l-.2.03l-.3-.06l-.4-.23l-3-2.99l.9-.84l.75-.96l-.15-.07z%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m16.6%2015.46l-.54.64l.04.03l.3.07l.2-.07l.13-.13l.07-.2l-.02-.2l-.08-.13z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%232b2148%22%20d%3D%22m9%202.4l-1.2.28l-.7.26l-.7.34l-.6.36l-.7.53l-.5.46l-.52.57l-.44.6l-.71%201.3l-.29.8l-.23%201l-.11%201.5l.17%201.4l.2.8l.26.7l.35.7l.66%201.1l.44.6l.52.57l1.11.93l.69.42l.7.34l.9.33l.8.18l1.5.13l.7-.04l.8-.12l1.4-.43l.7-.33l.64-.38l1.16-.93l.7-.78l.42-.59l.41-.7l.32-.7l.41-1.4l.14-1.5l-.14-1.5l-.27-1l-.27-.7l-.71-1.3l-.81-1.14l-.5-.53l-.61-.53l-1.19-.78l-.7-.33l-.7-.25l-.7-.18l-.8-.12l-.8-.04zm.56%203.8l.94-.1l.9.09l.9.28l.64.33l.76.6l.59.7l.32.8l.15.7l.03.9l-.15.9l-.35.9l-.49.76l-.62.64l-.68.48l-.8.37l-.9.21l-.9.03l-.9-.15l-.88-.34l-.62-.38l-.6-.52l-.49-.6l-.32-.8l-.15-.7l-.03-.9l.15-.9l.34-.88l.38-.62l.62-.7l.66-.5l.64-.33z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23ffc740%22%20d%3D%22m9.1%202.89l-1.2.28l-1.3.57l-1.12.76l-.54.5l-.53.6l-.73%201.1l-.29.6l-.34%201l-.23%201.4l.04%201.4l.28%201.3l.54%201.3l.36.6l.45.6l.99%201l1.12.76l.69.34l.91.32l1.4.26l1.4-.02l1.4-.3l1.3-.54l1.1-.72l.6-.54l.6-.67l.77-1.19l.52-1.3l.28-1.4V9.5l-.1-.7l-.27-1l-.54-1.2l-.44-.7l-.39-.5l-1.03-1l-1.2-.77l-1.3-.52l-.6-.16l-.8-.11l-.7-.04zm1.1%202.21l1%20.1l1%20.31l.9.5l.7.58l.59.71l.5.9l.31%201l.1%201l-.1%201l-.31%201l-.49.89l-.5.62l-.8.68l-.9.5l-1%20.31l-1%20.1l-1-.1l-1-.31l-.89-.49l-.62-.5l-.68-.8l-.5-.9l-.31-1l-.1-1l.1-1l.31-1L6%207.31l.5-.62l.8-.68l.9-.5l1-.31z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23ff5d78%22%20fill-opacity%3D%22.42%22%20d%3D%22m16.7%206.68l-.04.12l.32%201.2l.12%201.3l-.14%201.4l-.37%201.3l-.32.7l-.35.6l-.77%201l-.85.79l-1.1.73l-1.2.51l-.9.23l-1.3.14l-1.4-.12l-1-.25l-1.3-.57l-.6-.37l-.6-.47l-.5-.47l-.6-.71l-.05.06l.05.1l.69%201l.45.5l.56.51l1.1.75l.69.34l.91.32l1.4.26l1.4-.02l1.4-.3l1.3-.54l1.1-.72l.6-.54l.6-.67l.77-1.19l.52-1.3l.28-1.4V9.5l-.1-.7l-.27-1z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m8.4%203.99l-.6.18l-.7.3l-.52.33l-.47.4l-.52.6l-.42.7l-.28.8l.07.2l.14.06l.1-.02l1.4-1.17l1.3-.79l1.2-.53l1.9-.51l.09-.14l-.06-.1l-.23-.12l-.8-.21l-.8-.07zM4.2%209.18L4%209.3l-.14.2l-.04.2l.03.2l.12.2l.23.15l.2.03l.2-.04l.2-.14l.12-.2l.03-.2l-.04-.2l-.14-.2l-.17-.11l-.2-.04z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%23bfe6ff%22%20d%3D%22m10.2%205.1l-1%20.1l-1%20.31l-.89.49l-.62.5l-.68.8l-.5.9l-.31%201l-.1%201l.1%201l.31%201l.49.89l.5.62l.8.68l.9.5l1%20.31l1%20.1l1-.1l1-.31l.89-.49l.62-.5l.68-.8l.5-.9l.31-1l.1-1l-.1-1l-.31-1l-.49-.89l-.5-.62l-.8-.68l-.9-.5l-1-.31z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%234b2c8f%22%20fill-opacity%3D%22.3%22%20d%3D%22m10.2%205.1l-.7.05l-.7.15l-.6.21l-.6.3l-.91.69l-.46.5l-.42.6l-.3.6l-.21.6l-.15.7l-.05.7l.05.7l.12.6l.43%201.1l.05-.1l-.2-.9l-.05-.7l.05-.7l.24-1l.31-.7l.53-.8l.69-.7l.68-.49l.88-.41l.72-.2l1-.1l.7.05l1%20.24l.7.31l.8.53l.7.69l.05-.02l-.23-.4l-.42-.51l-.5-.46l-.6-.42l-.6-.3l-.6-.21l-.7-.15z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M10.5%205.98L5.98%2010.5l-.06.1l.13.7l.35.9l5.8-5.8l-.9-.35l-.7-.13zm2.4.88L6.92%2012.8l-.06.1l.44.47l6.07-6.07z%22%20class%3D%22wm-shine%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给搜索加一点动效

单文件 CSS 即可播放，无需任何依赖；描画动效仅对描边类图标生效。

呼吸

透明度往复渐变，适合状态提示与在线指示。

css呼吸动效样式

.icon-search {
  animation: icon-breathe 1.8s ease-in-out infinite;
}

@keyframes icon-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

旋转

匀速循环旋转，适合加载中场景。

css旋转动效样式

.icon-search {
  animation: icon-spin 1.6s linear infinite;
}

@keyframes icon-spin {
  to { transform: rotate(360deg); }
}

SVG 健康报告

对源文件的客观技术指标，供工程侧评估引用方式。

文件体积

3.47 KB

3,553 字节

viewBox

0 0 24 24

矢量坐标系

图元总数

<path> ×11

风格

多色填充

填充跟随容器颜色

同时含 width/height 与 viewBox：可以只保留 viewBox，让图标跟随容器自适应缩放。文件体积 3.47 KB（3,553 字节），图元 11 个，风格为多色填充。

常见问题

关于搜索图标的下载、商用与改色。

搜索图标是什么？▾

它是 with icons Anime（withicons-anime）开源图标集中的 search 图标，多色填充，viewBox 为 0 0 24 24，文件仅 3.47 KB，矢量格式可无损缩放到任意尺寸。

如何下载搜索图标？▾

点击「下载与导出」中的 SVG 源文件按钮保存矢量文件；也可以按 512 / 256 / 128 / 64 / 32 / 16px 预设导出 PNG，或在输入框填 16~1024 之间的任意尺寸。需要 iOS、Android 全套尺寸时，用素材包生成器一键打包。

搜索图标可以商用吗？▾

如何修改搜索图标的颜色？▾

在「预览与场景」的色板中切换颜色，三底色与全部场景会实时跟随；点击任一相近图标可打开预览弹层，复制对应颜色的 SVG 源码或 PNG。也可以复制 SVG 源码后自行修改 fill 值。

搜索 SVG 图标

下载 搜索 图标

搜索 的预览与使用场景