找找图标

搜索 SVG 图标

withicons-coquettesearch

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

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

下载 搜索 图标

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

px

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

搜索 的预览与使用场景

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

预览颜色
搜索 图标 浅色背景预览浅色背景
搜索 图标 深色背景预览深色背景
搜索 图标 灰底融入预览灰底融入

在真实界面里长这样

继续按钮内 · 主操作
搜索搜索…输入框 · 前缀图标
搜索导航菜单 · 选中态
暂无内容空状态 · 引导提示
9:41搜索 App 图标搜索search-xfile-searchmail-searchscan-searchtext-searchuser-searchfolder-searchcalendar-search手机桌面 · App 图标
搜索withicons-coquette.design/icons/search浏览器 · 标签页与站点图标

各尺寸下的可读性

搜索 图标 24px 渲染24px搜索 图标 32px 渲染32px搜索 图标 48px 渲染48px搜索 图标 64px 渲染64px搜索 图标 96px 渲染96px搜索 图标 128px 渲染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="#a8345c" fill-opacity=".2" d="m4.1 14.8l.7 1c.57.81 1.68 1.64 2.6 1.97l1.2.43c.53.19 1.34.3 1.9.25l1.3-.11c.99-.09 1.95-.65 2.8-1.06l4.8 4.78c1.25 1.24 3.33-1.01 2.08-2.26l-4.7-4.7c.86-1.82 1.65-3.95.92-6.01l-.4-1.13l-.4-.76l-.7-1l-.9-.9c-.83-.82-2.33-1.53-3.5-1.64l-1.3-.11c-.8-.07-1.75.17-2.5.43C4.62 5.2 2.53 8.76 3.16 12.3c.15.84.44 1.8.94 2.5" class="wm-shadow"/><path fill="#a8345c" fill-opacity=".14" d="M15.5 15.51c-.29.16-.33.21-.5.5c-.74-.26-2.43-.22-2.25.99c.04.29.24.5.45.69c.73.67 1.62-.05 2.2-.47l.6 1.92l.2-.39l.55.05l-.64-2l.19-.2l2 .65l-.05-.55l.39-.2l-1.88-.6l-.04-.1c.67-.75 1.1-1.6.18-2.36a.8.8 0 0 0-.6-.2c-1.09.11-1.03 1.53-.8 2.27" class="wm-shadow"/><path fill="#7e2443" d="m21.2 19.02l-5-5c-1.09-1.09-3.16.27-2.38 1.88l.2.3l4.88 4.89c1.1 1.1 3.02.03 2.6-1.49c-.05-.17-.17-.45-.3-.58" class="wm-a"/><path fill="#ec8da6" d="m14.5 15.9l4.9 4.89c.76.77 2.25-.54 1.3-1.49l-4.8-4.81c-.92-.92-2.32.49-1.4 1.41" class="wm-a"/><path fill="#d7385f" fill-opacity=".34" d="M20.7 19.3c-.03 1.09-.67 1.62-1.7 1.04l-.01.06c.32.31.34.4.71.55c.66.26 1.36-.38 1.29-1.05c-.03-.26-.16-.39-.29-.6" class="wm-a"/><path fill="#f8bccb" fill-opacity=".33" d="m14.39 15l.07.2l4.84 4.84l.4.16c.13-.06.27-.11.4-.16c.07-.15.13-.29.2-.44l-.16-.4l-4.8-4.8c-.53-.02-.68.18-.95.6" class="wm-a"/><path fill="#fff" fill-opacity=".85" d="M14.9 15.86c.11-.75.35-.96 1.1-.72l.07-.04c-.06-.06-.39-.45-.57-.53c-.6-.24-1.25.38-.9.97z" class="wm-shine"/><path fill="#7e2443" d="M9.4 2.8c-1.24.11-2.46.59-3.47 1.3c-3.82 2.66-4.23 8.14-.96 11.4c.71.71 1.59 1.29 2.53 1.64c1.1.4 2.23.58 3.4.48C17.46 17.04 20 8.73 15 4.5c-.62-.52-1.34-.96-2.1-1.24a7.9 7.9 0 0 0-3.5-.46m5.87 6.5l.08.9c.03.3-.09.97-.15 1.21c-.38 1.63-1.63 3.04-3.2 3.61l-.9.25l-.9.08c-.3.03-.97-.09-1.21-.15c-1.63-.38-3.04-1.63-3.61-3.2l-.25-.9l-.08-.9c-.05-.59.13-1.25.33-1.8c1.45-3.99 7.06-4.52 9.22-.87c.31.52.61 1.16.67 1.77" class="wm-k"/><path fill="#d9a45b" d="M9.1 3.39c-.6.05-1.26.3-1.8.55c-2.6 1.22-4.22 3.99-3.97 6.86c.05.63.17 1.32.44 1.9l.38.8c1.35 2.9 5.64 4.48 8.55 3.13l.8-.38c2.9-1.35 4.48-5.64 3.13-8.55l-.38-.8c-.93-2-3.82-3.78-6.05-3.6zm1.1 1.11l.9.08c.51.04 1.04.24 1.5.45c2.48 1.19 3.75 3.91 3.12 6.57c-.63 2.68-3.39 4.61-6.12 4.26c-2.49-.31-4.57-2.16-5.01-4.66C4.11 8.48 5.7 5.75 8.3 4.83c.55-.2 1.31-.38 1.9-.33" class="wm-k"/><path fill="#7e2443" fill-opacity=".26" d="m4.7 11.98l.05-.08l-.17-.7l-.08-1l.09-1l.28-1l.37-.8c.32-.68 1.02-1.46 1.66-1.84l.8-.48c.65-.38 1.76-.64 2.5-.58l1 .09l.9.24c.63.17 1.18.59 1.7.95l.04-.08c-4.72-3.89-11.07.46-9.14 6.28m11.9-4.34l-.04.16l.25 1l.09 1.1c.07.96-.24 2.04-.64 2.9c-1.98 4.23-7.53 5.33-10.96 2.15l-.05.05c5.51 5.25 13.8-.06 11.35-7.36" class="wm-k"/><path fill="#fff" fill-opacity=".9" d="m10 3.5l-.9.08c-1.59.14-3.64 1.46-4.43 2.82l-.52.9c-.3.51-.5 1.22-.57 1.8l.01.3c-.02.2-.1.4-.1.6l.04.9l.07.1l.07-.1l.05-1.4l.06-.1c.18-.69.29-1.37.67-2l.45-.74c.87-1.45 3-2.73 4.7-2.82l.9-.05l.9.06c.73.05 1.36.35 2 .64l.1-.09c-1-.59-2.28-1.01-3.5-.9M7.7 15.53l-.07.07c.63.39 1.37.7 2.17.74c.13.01.24-.09.36-.14c-.1-.02-.17-.12-.26-.13c-1.07-.15-1.15-.12-2-.46l-.1.04z" class="wm-shine"/><path fill="#f8bccb" d="m9.5 5l-.9.2c-.54.11-1.41.61-1.8 1l-.61.6l-.49.7c-.59.82-.93 2.4-.7 3.4l.2.9c.11.54.61 1.41 1 1.8l.6.61l.7.49c.82.59 2.4.93 3.4.7l.9-.2c.54-.11 1.41-.61 1.8-1l.61-.6l.49-.7c.59-.82.93-2.4.7-3.4l-.2-.9c-.11-.54-.61-1.41-1-1.8l-.6-.61l-.7-.49c-.82-.59-2.4-.93-3.4-.7" class="wm-k"/><path fill="#ec8da6" fill-opacity=".62" d="m14.6 7.35l-.04.05c.2.56.42 1.2.39 1.8l-.05.9l-.19.9l-.34.8c-.3.7-1 1.53-1.67 1.91l-.8.46l-.6.23l-.9.2c-1.71.38-3.43-.53-4.6-1.69l-.03.09c1.21 1.67 3.01 2.69 5.13 2.4c.49-.06 1.07-.19 1.5-.43l.8-.46c.58-.34 1.08-.96 1.44-1.51c1.16-1.78.95-3.87-.04-5.65" class="wm-k"/><path fill="#ffe4eb" fill-opacity=".41" d="m9.7 5.4l-.8.11l-.85.29l-.69.4l-.66.57l-.5.64l-.41.79l-.24.9l-.05.9l.11.8l.29.85l.4.69l.57.66l.64.5l.79.41l.9.24l.9.05l.8-.11l.85-.29l.69-.4l.66-.57l.5-.64l.41-.79l.24-.9l.05-.9l-.11-.8l-.29-.85l-.4-.69l-.57-.66l-.64-.5l-.79-.41l-.9-.24z" class="wm-k"/><path fill="#ffe4eb" fill-opacity=".45" d="m8.6 5.68l-.8.36l-.7.5C5.48 7.68 5.18 10.6 6.68 12l.62.58c1.23 1.16 3.84 1.08 5-.16l.58-.62c1.16-1.23 1.08-3.84-.16-5l-.62-.58l-.6-.38l-.8-.3c-.6-.22-1.53-.13-2.1.14" class="wm-k"/><path fill="#fff" fill-opacity=".95" d="m5.8 12.43l.1.05c.02-.08.16-.1.16-.18l-.1-.9c-.03-.72.1-1.43.37-2.1c.85-2.07 3.16-3.38 5.37-2.98c.65.12 1.2.36 1.8.65l.2-.11l-.02-.16c-4.26-3.75-10.17.52-7.88 5.73" class="wm-shine"/><path fill="#7e2443" d="m15.68 15.4l.22.35l2 .68l.1.02l.04-.05l-.09-.5l.39-.2l-2.04-.65l-.1-.01c-.18.11-.35.24-.52.36m-.28.28c-.12.17-.25.34-.36.52l.66 2.14l.2-.39l.5.09l.05-.04l-.65-2.03c-.04-.13-.33-.25-.4-.29" class="wm-deco"/><path fill="#d7385f" d="m16.07 15.5l.03.03l1.5.5l.04-.03l.01-.2l-.05-.04l-1.3-.41c-.1-.03-.17.11-.23.15m-.57.56c-.05.09-.17.12-.14.24l.4 1.3l.04.05l.2-.01l.03-.04c-.17-.51-.35-1.02-.53-1.54" class="wm-deco"/><path fill="#7e2443" fill-opacity=".34" d="M16.2 15.37c-.03.05-.07.11-.1.16c.51.17 1.03.31 1.54.47c-.01-.08-.03-.16-.04-.24zm-.7.69c.06.38.18.76.35 1.24l-.15.1l.06.2c.08.01.16.03.24.04c-.12-.5-.31-1.05-.5-1.58" class="wm-deco"/><path fill="#7e2443" d="M15.8 15.43c.79-.47 1.89-1.56 1.09-2.53c-.18-.21-.41-.41-.69-.45c-1.1-.17-1.33 1.4-1.04 2.15c.15.4.32.52.64.83m-.37.37l-.53-.51c-.66-.35-1.65-.42-2.2.18c-.19.21-.29.45-.25.73c.04.3.25.51.47.7c.92.82 2.07-.35 2.51-1.1" class="wm-deco"/><path fill="#d7385f" d="M15.9 15.04c.54-.46 1.43-1.36.67-2.04c-.11-.1-.29-.26-.47-.26c-.89.05-.94 1.54-.5 2.07l.2.21zm-.86.86l-.02-.1l-.21-.2c-.24-.15-.53-.25-.81-.27c-.46-.04-1.42.23-1.24.87c.05.18.2.35.34.46c.74.58 1.49-.23 1.94-.76" class="wm-deco"/><path fill="#7e2443" fill-opacity=".34" d="M16.7 13.15c-.12.75-.49 1.17-1.1 1.61l.2.26l.1.02c.76-.64 1.09-.9.8-1.89m-1.9 2.5c-.54.62-1.12 1.15-1.9.71l-.04.04c.63.69 1.2.54 1.84-.1l.34-.4l-.02-.1z" class="wm-deco"/><path fill="#fff" fill-opacity=".8" d="M16 12.98c-.59.49-.54 1.06-.2 1.72l.1.03c-.06-.51-.04-.88.3-1.31c.1-.01.2-.01.3-.02l.03-.1c-.35-.32-.22-.19-.53-.32M12.97 16l.02.2l.21.25c.51-.52.72-.54 1.4-.43l.16-.12c-.63-.44-1.21-.56-1.79.1" class="wm-shine"/><path fill="#7e2443" d="M15 14.8c-.71.5.09 1.62.8 1.2c.74-.44-.13-1.68-.8-1.2" class="wm-deco"/><path fill="#d7385f" d="m15.02 15.3l.08.25c.1.14.44.37.6.15l.08-.2l-.05-.2c-.08-.19-.46-.43-.63-.2z" class="wm-deco"/><path fill="#7e2443" fill-opacity=".34" d="m15.6 15.16l-.1.24c-.13.02-.34.09-.43.1l.23.23l.3.03c.25-.36.21-.21 0-.6" class="wm-deco"/></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="#a8345c" fill-opacity=".2" d="m4.1 14.8l.7 1c.57.81 1.68 1.64 2.6 1.97l1.2.43c.53.19 1.34.3 1.9.25l1.3-.11c.99-.09 1.95-.65 2.8-1.06l4.8 4.78c1.25 1.24 3.33-1.01 2.08-2.26l-4.7-4.7c.86-1.82 1.65-3.95.92-6.01l-.4-1.13l-.4-.76l-.7-1l-.9-.9c-.83-.82-2.33-1.53-3.5-1.64l-1.3-.11c-.8-.07-1.75.17-2.5.43C4.62 5.2 2.53 8.76 3.16 12.3c.15.84.44 1.8.94 2.5" class="wm-shadow"/><path fill="#a8345c" fill-opacity=".14" d="M15.5 15.51c-.29.16-.33.21-.5.5c-.74-.26-2.43-.22-2.25.99c.04.29.24.5.45.69c.73.67 1.62-.05 2.2-.47l.6 1.92l.2-.39l.55.05l-.64-2l.19-.2l2 .65l-.05-.55l.39-.2l-1.88-.6l-.04-.1c.67-.75 1.1-1.6.18-2.36a.8.8 0 0 0-.6-.2c-1.09.11-1.03 1.53-.8 2.27" class="wm-shadow"/><path fill="#7e2443" d="m21.2 19.02l-5-5c-1.09-1.09-3.16.27-2.38 1.88l.2.3l4.88 4.89c1.1 1.1 3.02.03 2.6-1.49c-.05-.17-.17-.45-.3-.58" class="wm-a"/><path fill="#ec8da6" d="m14.5 15.9l4.9 4.89c.76.77 2.25-.54 1.3-1.49l-4.8-4.81c-.92-.92-2.32.49-1.4 1.41" class="wm-a"/><path fill="#d7385f" fill-opacity=".34" d="M20.7 19.3c-.03 1.09-.67 1.62-1.7 1.04l-.01.06c.32.31.34.4.71.55c.66.26 1.36-.38 1.29-1.05c-.03-.26-.16-.39-.29-.6" class="wm-a"/><path fill="#f8bccb" fill-opacity=".33" d="m14.39 15l.07.2l4.84 4.84l.4.16c.13-.06.27-.11.4-.16c.07-.15.13-.29.2-.44l-.16-.4l-4.8-4.8c-.53-.02-.68.18-.95.6" class="wm-a"/><path fill="#fff" fill-opacity=".85" d="M14.9 15.86c.11-.75.35-.96 1.1-.72l.07-.04c-.06-.06-.39-.45-.57-.53c-.6-.24-1.25.38-.9.97z" class="wm-shine"/><path fill="#7e2443" d="M9.4 2.8c-1.24.11-2.46.59-3.47 1.3c-3.82 2.66-4.23 8.14-.96 11.4c.71.71 1.59 1.29 2.53 1.64c1.1.4 2.23.58 3.4.48C17.46 17.04 20 8.73 15 4.5c-.62-.52-1.34-.96-2.1-1.24a7.9 7.9 0 0 0-3.5-.46m5.87 6.5l.08.9c.03.3-.09.97-.15 1.21c-.38 1.63-1.63 3.04-3.2 3.61l-.9.25l-.9.08c-.3.03-.97-.09-1.21-.15c-1.63-.38-3.04-1.63-3.61-3.2l-.25-.9l-.08-.9c-.05-.59.13-1.25.33-1.8c1.45-3.99 7.06-4.52 9.22-.87c.31.52.61 1.16.67 1.77" class="wm-k"/><path fill="#d9a45b" d="M9.1 3.39c-.6.05-1.26.3-1.8.55c-2.6 1.22-4.22 3.99-3.97 6.86c.05.63.17 1.32.44 1.9l.38.8c1.35 2.9 5.64 4.48 8.55 3.13l.8-.38c2.9-1.35 4.48-5.64 3.13-8.55l-.38-.8c-.93-2-3.82-3.78-6.05-3.6zm1.1 1.11l.9.08c.51.04 1.04.24 1.5.45c2.48 1.19 3.75 3.91 3.12 6.57c-.63 2.68-3.39 4.61-6.12 4.26c-2.49-.31-4.57-2.16-5.01-4.66C4.11 8.48 5.7 5.75 8.3 4.83c.55-.2 1.31-.38 1.9-.33" class="wm-k"/><path fill="#7e2443" fill-opacity=".26" d="m4.7 11.98l.05-.08l-.17-.7l-.08-1l.09-1l.28-1l.37-.8c.32-.68 1.02-1.46 1.66-1.84l.8-.48c.65-.38 1.76-.64 2.5-.58l1 .09l.9.24c.63.17 1.18.59 1.7.95l.04-.08c-4.72-3.89-11.07.46-9.14 6.28m11.9-4.34l-.04.16l.25 1l.09 1.1c.07.96-.24 2.04-.64 2.9c-1.98 4.23-7.53 5.33-10.96 2.15l-.05.05c5.51 5.25 13.8-.06 11.35-7.36" class="wm-k"/><path fill="#fff" fill-opacity=".9" d="m10 3.5l-.9.08c-1.59.14-3.64 1.46-4.43 2.82l-.52.9c-.3.51-.5 1.22-.57 1.8l.01.3c-.02.2-.1.4-.1.6l.04.9l.07.1l.07-.1l.05-1.4l.06-.1c.18-.69.29-1.37.67-2l.45-.74c.87-1.45 3-2.73 4.7-2.82l.9-.05l.9.06c.73.05 1.36.35 2 .64l.1-.09c-1-.59-2.28-1.01-3.5-.9M7.7 15.53l-.07.07c.63.39 1.37.7 2.17.74c.13.01.24-.09.36-.14c-.1-.02-.17-.12-.26-.13c-1.07-.15-1.15-.12-2-.46l-.1.04z" class="wm-shine"/><path fill="#f8bccb" d="m9.5 5l-.9.2c-.54.11-1.41.61-1.8 1l-.61.6l-.49.7c-.59.82-.93 2.4-.7 3.4l.2.9c.11.54.61 1.41 1 1.8l.6.61l.7.49c.82.59 2.4.93 3.4.7l.9-.2c.54-.11 1.41-.61 1.8-1l.61-.6l.49-.7c.59-.82.93-2.4.7-3.4l-.2-.9c-.11-.54-.61-1.41-1-1.8l-.6-.61l-.7-.49c-.82-.59-2.4-.93-3.4-.7" class="wm-k"/><path fill="#ec8da6" fill-opacity=".62" d="m14.6 7.35l-.04.05c.2.56.42 1.2.39 1.8l-.05.9l-.19.9l-.34.8c-.3.7-1 1.53-1.67 1.91l-.8.46l-.6.23l-.9.2c-1.71.38-3.43-.53-4.6-1.69l-.03.09c1.21 1.67 3.01 2.69 5.13 2.4c.49-.06 1.07-.19 1.5-.43l.8-.46c.58-.34 1.08-.96 1.44-1.51c1.16-1.78.95-3.87-.04-5.65" class="wm-k"/><path fill="#ffe4eb" fill-opacity=".41" d="m9.7 5.4l-.8.11l-.85.29l-.69.4l-.66.57l-.5.64l-.41.79l-.24.9l-.05.9l.11.8l.29.85l.4.69l.57.66l.64.5l.79.41l.9.24l.9.05l.8-.11l.85-.29l.69-.4l.66-.57l.5-.64l.41-.79l.24-.9l.05-.9l-.11-.8l-.29-.85l-.4-.69l-.57-.66l-.64-.5l-.79-.41l-.9-.24z" class="wm-k"/><path fill="#ffe4eb" fill-opacity=".45" d="m8.6 5.68l-.8.36l-.7.5C5.48 7.68 5.18 10.6 6.68 12l.62.58c1.23 1.16 3.84 1.08 5-.16l.58-.62c1.16-1.23 1.08-3.84-.16-5l-.62-.58l-.6-.38l-.8-.3c-.6-.22-1.53-.13-2.1.14" class="wm-k"/><path fill="#fff" fill-opacity=".95" d="m5.8 12.43l.1.05c.02-.08.16-.1.16-.18l-.1-.9c-.03-.72.1-1.43.37-2.1c.85-2.07 3.16-3.38 5.37-2.98c.65.12 1.2.36 1.8.65l.2-.11l-.02-.16c-4.26-3.75-10.17.52-7.88 5.73" class="wm-shine"/><path fill="#7e2443" d="m15.68 15.4l.22.35l2 .68l.1.02l.04-.05l-.09-.5l.39-.2l-2.04-.65l-.1-.01c-.18.11-.35.24-.52.36m-.28.28c-.12.17-.25.34-.36.52l.66 2.14l.2-.39l.5.09l.05-.04l-.65-2.03c-.04-.13-.33-.25-.4-.29" class="wm-deco"/><path fill="#d7385f" d="m16.07 15.5l.03.03l1.5.5l.04-.03l.01-.2l-.05-.04l-1.3-.41c-.1-.03-.17.11-.23.15m-.57.56c-.05.09-.17.12-.14.24l.4 1.3l.04.05l.2-.01l.03-.04c-.17-.51-.35-1.02-.53-1.54" class="wm-deco"/><path fill="#7e2443" fill-opacity=".34" d="M16.2 15.37c-.03.05-.07.11-.1.16c.51.17 1.03.31 1.54.47c-.01-.08-.03-.16-.04-.24zm-.7.69c.06.38.18.76.35 1.24l-.15.1l.06.2c.08.01.16.03.24.04c-.12-.5-.31-1.05-.5-1.58" class="wm-deco"/><path fill="#7e2443" d="M15.8 15.43c.79-.47 1.89-1.56 1.09-2.53c-.18-.21-.41-.41-.69-.45c-1.1-.17-1.33 1.4-1.04 2.15c.15.4.32.52.64.83m-.37.37l-.53-.51c-.66-.35-1.65-.42-2.2.18c-.19.21-.29.45-.25.73c.04.3.25.51.47.7c.92.82 2.07-.35 2.51-1.1" class="wm-deco"/><path fill="#d7385f" d="M15.9 15.04c.54-.46 1.43-1.36.67-2.04c-.11-.1-.29-.26-.47-.26c-.89.05-.94 1.54-.5 2.07l.2.21zm-.86.86l-.02-.1l-.21-.2c-.24-.15-.53-.25-.81-.27c-.46-.04-1.42.23-1.24.87c.05.18.2.35.34.46c.74.58 1.49-.23 1.94-.76" class="wm-deco"/><path fill="#7e2443" fill-opacity=".34" d="M16.7 13.15c-.12.75-.49 1.17-1.1 1.61l.2.26l.1.02c.76-.64 1.09-.9.8-1.89m-1.9 2.5c-.54.62-1.12 1.15-1.9.71l-.04.04c.63.69 1.2.54 1.84-.1l.34-.4l-.02-.1z" class="wm-deco"/><path fill="#fff" fill-opacity=".8" d="M16 12.98c-.59.49-.54 1.06-.2 1.72l.1.03c-.06-.51-.04-.88.3-1.31c.1-.01.2-.01.3-.02l.03-.1c-.35-.32-.22-.19-.53-.32M12.97 16l.02.2l.21.25c.51-.52.72-.54 1.4-.43l.16-.12c-.63-.44-1.21-.56-1.79.1" class="wm-shine"/><path fill="#7e2443" d="M15 14.8c-.71.5.09 1.62.8 1.2c.74-.44-.13-1.68-.8-1.2" class="wm-deco"/><path fill="#d7385f" d="m15.02 15.3l.08.25c.1.14.44.37.6.15l.08-.2l-.05-.2c-.08-.19-.46-.43-.63-.2z" class="wm-deco"/><path fill="#7e2443" fill-opacity=".34" d="m15.6 15.16l-.1.24c-.13.02-.34.09-.43.1l.23.23l.3.03c.25-.36.21-.21 0-.6" class="wm-deco"/></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="#a8345c" fill-opacity=".2" d="m4.1 14.8l.7 1c.57.81 1.68 1.64 2.6 1.97l1.2.43c.53.19 1.34.3 1.9.25l1.3-.11c.99-.09 1.95-.65 2.8-1.06l4.8 4.78c1.25 1.24 3.33-1.01 2.08-2.26l-4.7-4.7c.86-1.82 1.65-3.95.92-6.01l-.4-1.13l-.4-.76l-.7-1l-.9-.9c-.83-.82-2.33-1.53-3.5-1.64l-1.3-.11c-.8-.07-1.75.17-2.5.43C4.62 5.2 2.53 8.76 3.16 12.3c.15.84.44 1.8.94 2.5" class="wm-shadow"/><path fill="#a8345c" fill-opacity=".14" d="M15.5 15.51c-.29.16-.33.21-.5.5c-.74-.26-2.43-.22-2.25.99c.04.29.24.5.45.69c.73.67 1.62-.05 2.2-.47l.6 1.92l.2-.39l.55.05l-.64-2l.19-.2l2 .65l-.05-.55l.39-.2l-1.88-.6l-.04-.1c.67-.75 1.1-1.6.18-2.36a.8.8 0 0 0-.6-.2c-1.09.11-1.03 1.53-.8 2.27" class="wm-shadow"/><path fill="#7e2443" d="m21.2 19.02l-5-5c-1.09-1.09-3.16.27-2.38 1.88l.2.3l4.88 4.89c1.1 1.1 3.02.03 2.6-1.49c-.05-.17-.17-.45-.3-.58" class="wm-a"/><path fill="#ec8da6" d="m14.5 15.9l4.9 4.89c.76.77 2.25-.54 1.3-1.49l-4.8-4.81c-.92-.92-2.32.49-1.4 1.41" class="wm-a"/><path fill="#d7385f" fill-opacity=".34" d="M20.7 19.3c-.03 1.09-.67 1.62-1.7 1.04l-.01.06c.32.31.34.4.71.55c.66.26 1.36-.38 1.29-1.05c-.03-.26-.16-.39-.29-.6" class="wm-a"/><path fill="#f8bccb" fill-opacity=".33" d="m14.39 15l.07.2l4.84 4.84l.4.16c.13-.06.27-.11.4-.16c.07-.15.13-.29.2-.44l-.16-.4l-4.8-4.8c-.53-.02-.68.18-.95.6" class="wm-a"/><path fill="#fff" fill-opacity=".85" d="M14.9 15.86c.11-.75.35-.96 1.1-.72l.07-.04c-.06-.06-.39-.45-.57-.53c-.6-.24-1.25.38-.9.97z" class="wm-shine"/><path fill="#7e2443" d="M9.4 2.8c-1.24.11-2.46.59-3.47 1.3c-3.82 2.66-4.23 8.14-.96 11.4c.71.71 1.59 1.29 2.53 1.64c1.1.4 2.23.58 3.4.48C17.46 17.04 20 8.73 15 4.5c-.62-.52-1.34-.96-2.1-1.24a7.9 7.9 0 0 0-3.5-.46m5.87 6.5l.08.9c.03.3-.09.97-.15 1.21c-.38 1.63-1.63 3.04-3.2 3.61l-.9.25l-.9.08c-.3.03-.97-.09-1.21-.15c-1.63-.38-3.04-1.63-3.61-3.2l-.25-.9l-.08-.9c-.05-.59.13-1.25.33-1.8c1.45-3.99 7.06-4.52 9.22-.87c.31.52.61 1.16.67 1.77" class="wm-k"/><path fill="#d9a45b" d="M9.1 3.39c-.6.05-1.26.3-1.8.55c-2.6 1.22-4.22 3.99-3.97 6.86c.05.63.17 1.32.44 1.9l.38.8c1.35 2.9 5.64 4.48 8.55 3.13l.8-.38c2.9-1.35 4.48-5.64 3.13-8.55l-.38-.8c-.93-2-3.82-3.78-6.05-3.6zm1.1 1.11l.9.08c.51.04 1.04.24 1.5.45c2.48 1.19 3.75 3.91 3.12 6.57c-.63 2.68-3.39 4.61-6.12 4.26c-2.49-.31-4.57-2.16-5.01-4.66C4.11 8.48 5.7 5.75 8.3 4.83c.55-.2 1.31-.38 1.9-.33" class="wm-k"/><path fill="#7e2443" fill-opacity=".26" d="m4.7 11.98l.05-.08l-.17-.7l-.08-1l.09-1l.28-1l.37-.8c.32-.68 1.02-1.46 1.66-1.84l.8-.48c.65-.38 1.76-.64 2.5-.58l1 .09l.9.24c.63.17 1.18.59 1.7.95l.04-.08c-4.72-3.89-11.07.46-9.14 6.28m11.9-4.34l-.04.16l.25 1l.09 1.1c.07.96-.24 2.04-.64 2.9c-1.98 4.23-7.53 5.33-10.96 2.15l-.05.05c5.51 5.25 13.8-.06 11.35-7.36" class="wm-k"/><path fill="#fff" fill-opacity=".9" d="m10 3.5l-.9.08c-1.59.14-3.64 1.46-4.43 2.82l-.52.9c-.3.51-.5 1.22-.57 1.8l.01.3c-.02.2-.1.4-.1.6l.04.9l.07.1l.07-.1l.05-1.4l.06-.1c.18-.69.29-1.37.67-2l.45-.74c.87-1.45 3-2.73 4.7-2.82l.9-.05l.9.06c.73.05 1.36.35 2 .64l.1-.09c-1-.59-2.28-1.01-3.5-.9M7.7 15.53l-.07.07c.63.39 1.37.7 2.17.74c.13.01.24-.09.36-.14c-.1-.02-.17-.12-.26-.13c-1.07-.15-1.15-.12-2-.46l-.1.04z" class="wm-shine"/><path fill="#f8bccb" d="m9.5 5l-.9.2c-.54.11-1.41.61-1.8 1l-.61.6l-.49.7c-.59.82-.93 2.4-.7 3.4l.2.9c.11.54.61 1.41 1 1.8l.6.61l.7.49c.82.59 2.4.93 3.4.7l.9-.2c.54-.11 1.41-.61 1.8-1l.61-.6l.49-.7c.59-.82.93-2.4.7-3.4l-.2-.9c-.11-.54-.61-1.41-1-1.8l-.6-.61l-.7-.49c-.82-.59-2.4-.93-3.4-.7" class="wm-k"/><path fill="#ec8da6" fill-opacity=".62" d="m14.6 7.35l-.04.05c.2.56.42 1.2.39 1.8l-.05.9l-.19.9l-.34.8c-.3.7-1 1.53-1.67 1.91l-.8.46l-.6.23l-.9.2c-1.71.38-3.43-.53-4.6-1.69l-.03.09c1.21 1.67 3.01 2.69 5.13 2.4c.49-.06 1.07-.19 1.5-.43l.8-.46c.58-.34 1.08-.96 1.44-1.51c1.16-1.78.95-3.87-.04-5.65" class="wm-k"/><path fill="#ffe4eb" fill-opacity=".41" d="m9.7 5.4l-.8.11l-.85.29l-.69.4l-.66.57l-.5.64l-.41.79l-.24.9l-.05.9l.11.8l.29.85l.4.69l.57.66l.64.5l.79.41l.9.24l.9.05l.8-.11l.85-.29l.69-.4l.66-.57l.5-.64l.41-.79l.24-.9l.05-.9l-.11-.8l-.29-.85l-.4-.69l-.57-.66l-.64-.5l-.79-.41l-.9-.24z" class="wm-k"/><path fill="#ffe4eb" fill-opacity=".45" d="m8.6 5.68l-.8.36l-.7.5C5.48 7.68 5.18 10.6 6.68 12l.62.58c1.23 1.16 3.84 1.08 5-.16l.58-.62c1.16-1.23 1.08-3.84-.16-5l-.62-.58l-.6-.38l-.8-.3c-.6-.22-1.53-.13-2.1.14" class="wm-k"/><path fill="#fff" fill-opacity=".95" d="m5.8 12.43l.1.05c.02-.08.16-.1.16-.18l-.1-.9c-.03-.72.1-1.43.37-2.1c.85-2.07 3.16-3.38 5.37-2.98c.65.12 1.2.36 1.8.65l.2-.11l-.02-.16c-4.26-3.75-10.17.52-7.88 5.73" class="wm-shine"/><path fill="#7e2443" d="m15.68 15.4l.22.35l2 .68l.1.02l.04-.05l-.09-.5l.39-.2l-2.04-.65l-.1-.01c-.18.11-.35.24-.52.36m-.28.28c-.12.17-.25.34-.36.52l.66 2.14l.2-.39l.5.09l.05-.04l-.65-2.03c-.04-.13-.33-.25-.4-.29" class="wm-deco"/><path fill="#d7385f" d="m16.07 15.5l.03.03l1.5.5l.04-.03l.01-.2l-.05-.04l-1.3-.41c-.1-.03-.17.11-.23.15m-.57.56c-.05.09-.17.12-.14.24l.4 1.3l.04.05l.2-.01l.03-.04c-.17-.51-.35-1.02-.53-1.54" class="wm-deco"/><path fill="#7e2443" fill-opacity=".34" d="M16.2 15.37c-.03.05-.07.11-.1.16c.51.17 1.03.31 1.54.47c-.01-.08-.03-.16-.04-.24zm-.7.69c.06.38.18.76.35 1.24l-.15.1l.06.2c.08.01.16.03.24.04c-.12-.5-.31-1.05-.5-1.58" class="wm-deco"/><path fill="#7e2443" d="M15.8 15.43c.79-.47 1.89-1.56 1.09-2.53c-.18-.21-.41-.41-.69-.45c-1.1-.17-1.33 1.4-1.04 2.15c.15.4.32.52.64.83m-.37.37l-.53-.51c-.66-.35-1.65-.42-2.2.18c-.19.21-.29.45-.25.73c.04.3.25.51.47.7c.92.82 2.07-.35 2.51-1.1" class="wm-deco"/><path fill="#d7385f" d="M15.9 15.04c.54-.46 1.43-1.36.67-2.04c-.11-.1-.29-.26-.47-.26c-.89.05-.94 1.54-.5 2.07l.2.21zm-.86.86l-.02-.1l-.21-.2c-.24-.15-.53-.25-.81-.27c-.46-.04-1.42.23-1.24.87c.05.18.2.35.34.46c.74.58 1.49-.23 1.94-.76" class="wm-deco"/><path fill="#7e2443" fill-opacity=".34" d="M16.7 13.15c-.12.75-.49 1.17-1.1 1.61l.2.26l.1.02c.76-.64 1.09-.9.8-1.89m-1.9 2.5c-.54.62-1.12 1.15-1.9.71l-.04.04c.63.69 1.2.54 1.84-.1l.34-.4l-.02-.1z" class="wm-deco"/><path fill="#fff" fill-opacity=".8" d="M16 12.98c-.59.49-.54 1.06-.2 1.72l.1.03c-.06-.51-.04-.88.3-1.31c.1-.01.2-.01.3-.02l.03-.1c-.35-.32-.22-.19-.53-.32M12.97 16l.02.2l.21.25c.51-.52.72-.54 1.4-.43l.16-.12c-.63-.44-1.21-.56-1.79.1" class="wm-shine"/><path fill="#7e2443" d="M15 14.8c-.71.5.09 1.62.8 1.2c.74-.44-.13-1.68-.8-1.2" class="wm-deco"/><path fill="#d7385f" d="m15.02 15.3l.08.25c.1.14.44.37.6.15l.08-.2l-.05-.2c-.08-.19-.46-.43-.63-.2z" class="wm-deco"/><path fill="#7e2443" fill-opacity=".34" d="m15.6 15.16l-.1.24c-.13.02-.34.09-.43.1l.23.23l.3.03c.25-.36.21-.21 0-.6" class="wm-deco"/></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%23a8345c%22%20fill-opacity%3D%22.2%22%20d%3D%22m4.1%2014.8l.7%201c.57.81%201.68%201.64%202.6%201.97l1.2.43c.53.19%201.34.3%201.9.25l1.3-.11c.99-.09%201.95-.65%202.8-1.06l4.8%204.78c1.25%201.24%203.33-1.01%202.08-2.26l-4.7-4.7c.86-1.82%201.65-3.95.92-6.01l-.4-1.13l-.4-.76l-.7-1l-.9-.9c-.83-.82-2.33-1.53-3.5-1.64l-1.3-.11c-.8-.07-1.75.17-2.5.43C4.62%205.2%202.53%208.76%203.16%2012.3c.15.84.44%201.8.94%202.5%22%20class%3D%22wm-shadow%22%2F%3E%3Cpath%20fill%3D%22%23a8345c%22%20fill-opacity%3D%22.14%22%20d%3D%22M15.5%2015.51c-.29.16-.33.21-.5.5c-.74-.26-2.43-.22-2.25.99c.04.29.24.5.45.69c.73.67%201.62-.05%202.2-.47l.6%201.92l.2-.39l.55.05l-.64-2l.19-.2l2%20.65l-.05-.55l.39-.2l-1.88-.6l-.04-.1c.67-.75%201.1-1.6.18-2.36a.8.8%200%200%200-.6-.2c-1.09.11-1.03%201.53-.8%202.27%22%20class%3D%22wm-shadow%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20d%3D%22m21.2%2019.02l-5-5c-1.09-1.09-3.16.27-2.38%201.88l.2.3l4.88%204.89c1.1%201.1%203.02.03%202.6-1.49c-.05-.17-.17-.45-.3-.58%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22%23ec8da6%22%20d%3D%22m14.5%2015.9l4.9%204.89c.76.77%202.25-.54%201.3-1.49l-4.8-4.81c-.92-.92-2.32.49-1.4%201.41%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22%23d7385f%22%20fill-opacity%3D%22.34%22%20d%3D%22M20.7%2019.3c-.03%201.09-.67%201.62-1.7%201.04l-.01.06c.32.31.34.4.71.55c.66.26%201.36-.38%201.29-1.05c-.03-.26-.16-.39-.29-.6%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22%23f8bccb%22%20fill-opacity%3D%22.33%22%20d%3D%22m14.39%2015l.07.2l4.84%204.84l.4.16c.13-.06.27-.11.4-.16c.07-.15.13-.29.2-.44l-.16-.4l-4.8-4.8c-.53-.02-.68.18-.95.6%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.85%22%20d%3D%22M14.9%2015.86c.11-.75.35-.96%201.1-.72l.07-.04c-.06-.06-.39-.45-.57-.53c-.6-.24-1.25.38-.9.97z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20d%3D%22M9.4%202.8c-1.24.11-2.46.59-3.47%201.3c-3.82%202.66-4.23%208.14-.96%2011.4c.71.71%201.59%201.29%202.53%201.64c1.1.4%202.23.58%203.4.48C17.46%2017.04%2020%208.73%2015%204.5c-.62-.52-1.34-.96-2.1-1.24a7.9%207.9%200%200%200-3.5-.46m5.87%206.5l.08.9c.03.3-.09.97-.15%201.21c-.38%201.63-1.63%203.04-3.2%203.61l-.9.25l-.9.08c-.3.03-.97-.09-1.21-.15c-1.63-.38-3.04-1.63-3.61-3.2l-.25-.9l-.08-.9c-.05-.59.13-1.25.33-1.8c1.45-3.99%207.06-4.52%209.22-.87c.31.52.61%201.16.67%201.77%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23d9a45b%22%20d%3D%22M9.1%203.39c-.6.05-1.26.3-1.8.55c-2.6%201.22-4.22%203.99-3.97%206.86c.05.63.17%201.32.44%201.9l.38.8c1.35%202.9%205.64%204.48%208.55%203.13l.8-.38c2.9-1.35%204.48-5.64%203.13-8.55l-.38-.8c-.93-2-3.82-3.78-6.05-3.6zm1.1%201.11l.9.08c.51.04%201.04.24%201.5.45c2.48%201.19%203.75%203.91%203.12%206.57c-.63%202.68-3.39%204.61-6.12%204.26c-2.49-.31-4.57-2.16-5.01-4.66C4.11%208.48%205.7%205.75%208.3%204.83c.55-.2%201.31-.38%201.9-.33%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20fill-opacity%3D%22.26%22%20d%3D%22m4.7%2011.98l.05-.08l-.17-.7l-.08-1l.09-1l.28-1l.37-.8c.32-.68%201.02-1.46%201.66-1.84l.8-.48c.65-.38%201.76-.64%202.5-.58l1%20.09l.9.24c.63.17%201.18.59%201.7.95l.04-.08c-4.72-3.89-11.07.46-9.14%206.28m11.9-4.34l-.04.16l.25%201l.09%201.1c.07.96-.24%202.04-.64%202.9c-1.98%204.23-7.53%205.33-10.96%202.15l-.05.05c5.51%205.25%2013.8-.06%2011.35-7.36%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.9%22%20d%3D%22m10%203.5l-.9.08c-1.59.14-3.64%201.46-4.43%202.82l-.52.9c-.3.51-.5%201.22-.57%201.8l.01.3c-.02.2-.1.4-.1.6l.04.9l.07.1l.07-.1l.05-1.4l.06-.1c.18-.69.29-1.37.67-2l.45-.74c.87-1.45%203-2.73%204.7-2.82l.9-.05l.9.06c.73.05%201.36.35%202%20.64l.1-.09c-1-.59-2.28-1.01-3.5-.9M7.7%2015.53l-.07.07c.63.39%201.37.7%202.17.74c.13.01.24-.09.36-.14c-.1-.02-.17-.12-.26-.13c-1.07-.15-1.15-.12-2-.46l-.1.04z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%23f8bccb%22%20d%3D%22m9.5%205l-.9.2c-.54.11-1.41.61-1.8%201l-.61.6l-.49.7c-.59.82-.93%202.4-.7%203.4l.2.9c.11.54.61%201.41%201%201.8l.6.61l.7.49c.82.59%202.4.93%203.4.7l.9-.2c.54-.11%201.41-.61%201.8-1l.61-.6l.49-.7c.59-.82.93-2.4.7-3.4l-.2-.9c-.11-.54-.61-1.41-1-1.8l-.6-.61l-.7-.49c-.82-.59-2.4-.93-3.4-.7%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23ec8da6%22%20fill-opacity%3D%22.62%22%20d%3D%22m14.6%207.35l-.04.05c.2.56.42%201.2.39%201.8l-.05.9l-.19.9l-.34.8c-.3.7-1%201.53-1.67%201.91l-.8.46l-.6.23l-.9.2c-1.71.38-3.43-.53-4.6-1.69l-.03.09c1.21%201.67%203.01%202.69%205.13%202.4c.49-.06%201.07-.19%201.5-.43l.8-.46c.58-.34%201.08-.96%201.44-1.51c1.16-1.78.95-3.87-.04-5.65%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23ffe4eb%22%20fill-opacity%3D%22.41%22%20d%3D%22m9.7%205.4l-.8.11l-.85.29l-.69.4l-.66.57l-.5.64l-.41.79l-.24.9l-.05.9l.11.8l.29.85l.4.69l.57.66l.64.5l.79.41l.9.24l.9.05l.8-.11l.85-.29l.69-.4l.66-.57l.5-.64l.41-.79l.24-.9l.05-.9l-.11-.8l-.29-.85l-.4-.69l-.57-.66l-.64-.5l-.79-.41l-.9-.24z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23ffe4eb%22%20fill-opacity%3D%22.45%22%20d%3D%22m8.6%205.68l-.8.36l-.7.5C5.48%207.68%205.18%2010.6%206.68%2012l.62.58c1.23%201.16%203.84%201.08%205-.16l.58-.62c1.16-1.23%201.08-3.84-.16-5l-.62-.58l-.6-.38l-.8-.3c-.6-.22-1.53-.13-2.1.14%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.95%22%20d%3D%22m5.8%2012.43l.1.05c.02-.08.16-.1.16-.18l-.1-.9c-.03-.72.1-1.43.37-2.1c.85-2.07%203.16-3.38%205.37-2.98c.65.12%201.2.36%201.8.65l.2-.11l-.02-.16c-4.26-3.75-10.17.52-7.88%205.73%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20d%3D%22m15.68%2015.4l.22.35l2%20.68l.1.02l.04-.05l-.09-.5l.39-.2l-2.04-.65l-.1-.01c-.18.11-.35.24-.52.36m-.28.28c-.12.17-.25.34-.36.52l.66%202.14l.2-.39l.5.09l.05-.04l-.65-2.03c-.04-.13-.33-.25-.4-.29%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22%23d7385f%22%20d%3D%22m16.07%2015.5l.03.03l1.5.5l.04-.03l.01-.2l-.05-.04l-1.3-.41c-.1-.03-.17.11-.23.15m-.57.56c-.05.09-.17.12-.14.24l.4%201.3l.04.05l.2-.01l.03-.04c-.17-.51-.35-1.02-.53-1.54%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20fill-opacity%3D%22.34%22%20d%3D%22M16.2%2015.37c-.03.05-.07.11-.1.16c.51.17%201.03.31%201.54.47c-.01-.08-.03-.16-.04-.24zm-.7.69c.06.38.18.76.35%201.24l-.15.1l.06.2c.08.01.16.03.24.04c-.12-.5-.31-1.05-.5-1.58%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20d%3D%22M15.8%2015.43c.79-.47%201.89-1.56%201.09-2.53c-.18-.21-.41-.41-.69-.45c-1.1-.17-1.33%201.4-1.04%202.15c.15.4.32.52.64.83m-.37.37l-.53-.51c-.66-.35-1.65-.42-2.2.18c-.19.21-.29.45-.25.73c.04.3.25.51.47.7c.92.82%202.07-.35%202.51-1.1%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22%23d7385f%22%20d%3D%22M15.9%2015.04c.54-.46%201.43-1.36.67-2.04c-.11-.1-.29-.26-.47-.26c-.89.05-.94%201.54-.5%202.07l.2.21zm-.86.86l-.02-.1l-.21-.2c-.24-.15-.53-.25-.81-.27c-.46-.04-1.42.23-1.24.87c.05.18.2.35.34.46c.74.58%201.49-.23%201.94-.76%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20fill-opacity%3D%22.34%22%20d%3D%22M16.7%2013.15c-.12.75-.49%201.17-1.1%201.61l.2.26l.1.02c.76-.64%201.09-.9.8-1.89m-1.9%202.5c-.54.62-1.12%201.15-1.9.71l-.04.04c.63.69%201.2.54%201.84-.1l.34-.4l-.02-.1z%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.8%22%20d%3D%22M16%2012.98c-.59.49-.54%201.06-.2%201.72l.1.03c-.06-.51-.04-.88.3-1.31c.1-.01.2-.01.3-.02l.03-.1c-.35-.32-.22-.19-.53-.32M12.97%2016l.02.2l.21.25c.51-.52.72-.54%201.4-.43l.16-.12c-.63-.44-1.21-.56-1.79.1%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20d%3D%22M15%2014.8c-.71.5.09%201.62.8%201.2c.74-.44-.13-1.68-.8-1.2%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22%23d7385f%22%20d%3D%22m15.02%2015.3l.08.25c.1.14.44.37.6.15l.08-.2l-.05-.2c-.08-.19-.46-.43-.63-.2z%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20fill-opacity%3D%22.34%22%20d%3D%22m15.6%2015.16l-.1.24c-.13.02-.34.09-.43.1l.23.23l.3.03c.25-.36.21-.21%200-.6%22%20class%3D%22wm-deco%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%23a8345c%22%20fill-opacity%3D%22.2%22%20d%3D%22m4.1%2014.8l.7%201c.57.81%201.68%201.64%202.6%201.97l1.2.43c.53.19%201.34.3%201.9.25l1.3-.11c.99-.09%201.95-.65%202.8-1.06l4.8%204.78c1.25%201.24%203.33-1.01%202.08-2.26l-4.7-4.7c.86-1.82%201.65-3.95.92-6.01l-.4-1.13l-.4-.76l-.7-1l-.9-.9c-.83-.82-2.33-1.53-3.5-1.64l-1.3-.11c-.8-.07-1.75.17-2.5.43C4.62%205.2%202.53%208.76%203.16%2012.3c.15.84.44%201.8.94%202.5%22%20class%3D%22wm-shadow%22%2F%3E%3Cpath%20fill%3D%22%23a8345c%22%20fill-opacity%3D%22.14%22%20d%3D%22M15.5%2015.51c-.29.16-.33.21-.5.5c-.74-.26-2.43-.22-2.25.99c.04.29.24.5.45.69c.73.67%201.62-.05%202.2-.47l.6%201.92l.2-.39l.55.05l-.64-2l.19-.2l2%20.65l-.05-.55l.39-.2l-1.88-.6l-.04-.1c.67-.75%201.1-1.6.18-2.36a.8.8%200%200%200-.6-.2c-1.09.11-1.03%201.53-.8%202.27%22%20class%3D%22wm-shadow%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20d%3D%22m21.2%2019.02l-5-5c-1.09-1.09-3.16.27-2.38%201.88l.2.3l4.88%204.89c1.1%201.1%203.02.03%202.6-1.49c-.05-.17-.17-.45-.3-.58%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22%23ec8da6%22%20d%3D%22m14.5%2015.9l4.9%204.89c.76.77%202.25-.54%201.3-1.49l-4.8-4.81c-.92-.92-2.32.49-1.4%201.41%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22%23d7385f%22%20fill-opacity%3D%22.34%22%20d%3D%22M20.7%2019.3c-.03%201.09-.67%201.62-1.7%201.04l-.01.06c.32.31.34.4.71.55c.66.26%201.36-.38%201.29-1.05c-.03-.26-.16-.39-.29-.6%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22%23f8bccb%22%20fill-opacity%3D%22.33%22%20d%3D%22m14.39%2015l.07.2l4.84%204.84l.4.16c.13-.06.27-.11.4-.16c.07-.15.13-.29.2-.44l-.16-.4l-4.8-4.8c-.53-.02-.68.18-.95.6%22%20class%3D%22wm-a%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.85%22%20d%3D%22M14.9%2015.86c.11-.75.35-.96%201.1-.72l.07-.04c-.06-.06-.39-.45-.57-.53c-.6-.24-1.25.38-.9.97z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20d%3D%22M9.4%202.8c-1.24.11-2.46.59-3.47%201.3c-3.82%202.66-4.23%208.14-.96%2011.4c.71.71%201.59%201.29%202.53%201.64c1.1.4%202.23.58%203.4.48C17.46%2017.04%2020%208.73%2015%204.5c-.62-.52-1.34-.96-2.1-1.24a7.9%207.9%200%200%200-3.5-.46m5.87%206.5l.08.9c.03.3-.09.97-.15%201.21c-.38%201.63-1.63%203.04-3.2%203.61l-.9.25l-.9.08c-.3.03-.97-.09-1.21-.15c-1.63-.38-3.04-1.63-3.61-3.2l-.25-.9l-.08-.9c-.05-.59.13-1.25.33-1.8c1.45-3.99%207.06-4.52%209.22-.87c.31.52.61%201.16.67%201.77%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23d9a45b%22%20d%3D%22M9.1%203.39c-.6.05-1.26.3-1.8.55c-2.6%201.22-4.22%203.99-3.97%206.86c.05.63.17%201.32.44%201.9l.38.8c1.35%202.9%205.64%204.48%208.55%203.13l.8-.38c2.9-1.35%204.48-5.64%203.13-8.55l-.38-.8c-.93-2-3.82-3.78-6.05-3.6zm1.1%201.11l.9.08c.51.04%201.04.24%201.5.45c2.48%201.19%203.75%203.91%203.12%206.57c-.63%202.68-3.39%204.61-6.12%204.26c-2.49-.31-4.57-2.16-5.01-4.66C4.11%208.48%205.7%205.75%208.3%204.83c.55-.2%201.31-.38%201.9-.33%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20fill-opacity%3D%22.26%22%20d%3D%22m4.7%2011.98l.05-.08l-.17-.7l-.08-1l.09-1l.28-1l.37-.8c.32-.68%201.02-1.46%201.66-1.84l.8-.48c.65-.38%201.76-.64%202.5-.58l1%20.09l.9.24c.63.17%201.18.59%201.7.95l.04-.08c-4.72-3.89-11.07.46-9.14%206.28m11.9-4.34l-.04.16l.25%201l.09%201.1c.07.96-.24%202.04-.64%202.9c-1.98%204.23-7.53%205.33-10.96%202.15l-.05.05c5.51%205.25%2013.8-.06%2011.35-7.36%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.9%22%20d%3D%22m10%203.5l-.9.08c-1.59.14-3.64%201.46-4.43%202.82l-.52.9c-.3.51-.5%201.22-.57%201.8l.01.3c-.02.2-.1.4-.1.6l.04.9l.07.1l.07-.1l.05-1.4l.06-.1c.18-.69.29-1.37.67-2l.45-.74c.87-1.45%203-2.73%204.7-2.82l.9-.05l.9.06c.73.05%201.36.35%202%20.64l.1-.09c-1-.59-2.28-1.01-3.5-.9M7.7%2015.53l-.07.07c.63.39%201.37.7%202.17.74c.13.01.24-.09.36-.14c-.1-.02-.17-.12-.26-.13c-1.07-.15-1.15-.12-2-.46l-.1.04z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%23f8bccb%22%20d%3D%22m9.5%205l-.9.2c-.54.11-1.41.61-1.8%201l-.61.6l-.49.7c-.59.82-.93%202.4-.7%203.4l.2.9c.11.54.61%201.41%201%201.8l.6.61l.7.49c.82.59%202.4.93%203.4.7l.9-.2c.54-.11%201.41-.61%201.8-1l.61-.6l.49-.7c.59-.82.93-2.4.7-3.4l-.2-.9c-.11-.54-.61-1.41-1-1.8l-.6-.61l-.7-.49c-.82-.59-2.4-.93-3.4-.7%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23ec8da6%22%20fill-opacity%3D%22.62%22%20d%3D%22m14.6%207.35l-.04.05c.2.56.42%201.2.39%201.8l-.05.9l-.19.9l-.34.8c-.3.7-1%201.53-1.67%201.91l-.8.46l-.6.23l-.9.2c-1.71.38-3.43-.53-4.6-1.69l-.03.09c1.21%201.67%203.01%202.69%205.13%202.4c.49-.06%201.07-.19%201.5-.43l.8-.46c.58-.34%201.08-.96%201.44-1.51c1.16-1.78.95-3.87-.04-5.65%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23ffe4eb%22%20fill-opacity%3D%22.41%22%20d%3D%22m9.7%205.4l-.8.11l-.85.29l-.69.4l-.66.57l-.5.64l-.41.79l-.24.9l-.05.9l.11.8l.29.85l.4.69l.57.66l.64.5l.79.41l.9.24l.9.05l.8-.11l.85-.29l.69-.4l.66-.57l.5-.64l.41-.79l.24-.9l.05-.9l-.11-.8l-.29-.85l-.4-.69l-.57-.66l-.64-.5l-.79-.41l-.9-.24z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23ffe4eb%22%20fill-opacity%3D%22.45%22%20d%3D%22m8.6%205.68l-.8.36l-.7.5C5.48%207.68%205.18%2010.6%206.68%2012l.62.58c1.23%201.16%203.84%201.08%205-.16l.58-.62c1.16-1.23%201.08-3.84-.16-5l-.62-.58l-.6-.38l-.8-.3c-.6-.22-1.53-.13-2.1.14%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.95%22%20d%3D%22m5.8%2012.43l.1.05c.02-.08.16-.1.16-.18l-.1-.9c-.03-.72.1-1.43.37-2.1c.85-2.07%203.16-3.38%205.37-2.98c.65.12%201.2.36%201.8.65l.2-.11l-.02-.16c-4.26-3.75-10.17.52-7.88%205.73%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20d%3D%22m15.68%2015.4l.22.35l2%20.68l.1.02l.04-.05l-.09-.5l.39-.2l-2.04-.65l-.1-.01c-.18.11-.35.24-.52.36m-.28.28c-.12.17-.25.34-.36.52l.66%202.14l.2-.39l.5.09l.05-.04l-.65-2.03c-.04-.13-.33-.25-.4-.29%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22%23d7385f%22%20d%3D%22m16.07%2015.5l.03.03l1.5.5l.04-.03l.01-.2l-.05-.04l-1.3-.41c-.1-.03-.17.11-.23.15m-.57.56c-.05.09-.17.12-.14.24l.4%201.3l.04.05l.2-.01l.03-.04c-.17-.51-.35-1.02-.53-1.54%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20fill-opacity%3D%22.34%22%20d%3D%22M16.2%2015.37c-.03.05-.07.11-.1.16c.51.17%201.03.31%201.54.47c-.01-.08-.03-.16-.04-.24zm-.7.69c.06.38.18.76.35%201.24l-.15.1l.06.2c.08.01.16.03.24.04c-.12-.5-.31-1.05-.5-1.58%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20d%3D%22M15.8%2015.43c.79-.47%201.89-1.56%201.09-2.53c-.18-.21-.41-.41-.69-.45c-1.1-.17-1.33%201.4-1.04%202.15c.15.4.32.52.64.83m-.37.37l-.53-.51c-.66-.35-1.65-.42-2.2.18c-.19.21-.29.45-.25.73c.04.3.25.51.47.7c.92.82%202.07-.35%202.51-1.1%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22%23d7385f%22%20d%3D%22M15.9%2015.04c.54-.46%201.43-1.36.67-2.04c-.11-.1-.29-.26-.47-.26c-.89.05-.94%201.54-.5%202.07l.2.21zm-.86.86l-.02-.1l-.21-.2c-.24-.15-.53-.25-.81-.27c-.46-.04-1.42.23-1.24.87c.05.18.2.35.34.46c.74.58%201.49-.23%201.94-.76%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20fill-opacity%3D%22.34%22%20d%3D%22M16.7%2013.15c-.12.75-.49%201.17-1.1%201.61l.2.26l.1.02c.76-.64%201.09-.9.8-1.89m-1.9%202.5c-.54.62-1.12%201.15-1.9.71l-.04.04c.63.69%201.2.54%201.84-.1l.34-.4l-.02-.1z%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20fill-opacity%3D%22.8%22%20d%3D%22M16%2012.98c-.59.49-.54%201.06-.2%201.72l.1.03c-.06-.51-.04-.88.3-1.31c.1-.01.2-.01.3-.02l.03-.1c-.35-.32-.22-.19-.53-.32M12.97%2016l.02.2l.21.25c.51-.52.72-.54%201.4-.43l.16-.12c-.63-.44-1.21-.56-1.79.1%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20d%3D%22M15%2014.8c-.71.5.09%201.62.8%201.2c.74-.44-.13-1.68-.8-1.2%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22%23d7385f%22%20d%3D%22m15.02%2015.3l.08.25c.1.14.44.37.6.15l.08-.2l-.05-.2c-.08-.19-.46-.43-.63-.2z%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22%237e2443%22%20fill-opacity%3D%22.34%22%20d%3D%22m15.6%2015.16l-.1.24c-.13.02-.34.09-.43.1l.23.23l.3.03c.25-.36.21-.21%200-.6%22%20class%3D%22wm-deco%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给 搜索 加一点动效

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

search 呼吸动效演示

呼吸

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

css呼吸动效样式
.icon-search {
  animation: icon-breathe 1.8s ease-in-out infinite;
}

@keyframes icon-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
search 旋转动效演示

旋转

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

css旋转动效样式
.icon-search {
  animation: icon-spin 1.6s linear infinite;
}

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

SVG 健康报告

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

文件体积

6.41 KB

6,564 字节

viewBox

0 0 24 24

矢量坐标系

图元总数

26

<path> ×26

风格

多色填充

填充跟随容器颜色

同时含 width/height 与 viewBox:可以只保留 viewBox,让图标跟随容器自适应缩放。 文件体积 6.41 KB(6,564 字节),图元 26 个,风格为多色填充。

常见问题

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

搜索 图标是什么?▾

它是 with icons Coquette(withicons-coquette)开源图标集中的 search 图标,多色填充,viewBox 为 0 0 24 24,文件仅 6.41 KB,矢量格式可无损缩放到任意尺寸。

如何下载 搜索 图标?▾

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

搜索 图标可以商用吗?▾

该图标采用 MIT(MIT) 开源协议,通常允许在遵守协议的前提下免费使用,常见要求是保留作者版权声明。商用前建议阅读协议原文确认。

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

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

with icons Coquette 中的相近图标

search-x
file-search
mail-search
scan-search
text-search
user-search
folder-search
calendar-search