首页 SVG 图标
withicons-halloweenhome
来自 with icons Halloween 开源图标集，矢量 SVG 可无损缩放到任意尺寸，支持在线改色、复制 React/Vue/HTML 代码。
- 图标 ID
- withicons-halloween:home
- 中文名
- 首页
- 集合规模
- 1,000 枚
- 基础网格
- 24px
- 色彩
- 多色
- 开源协议
- MIT
- 作者
- Evergrow
下载 首页 图标
SVG 矢量源文件，或 PNG 按 16~512 预设与 16~1024 自定义尺寸导出，任意尺寸边缘锐利。
px
PNG 由矢量源实时渲染，任意尺寸边缘锐利无锯齿；下载与预览均免费，无需注册。
首页 的预览与使用场景
切换预览颜色后，下方三底色、真实界面场景与各尺寸渲染会实时跟随。
预览颜色
浅色背景
深色背景灰底融入在真实界面里长这样
继续按钮内 · 主操作搜索首页…输入框 · 前缀图标首页导航菜单 · 选中态暂无内容空状态 · 引导提示9:41首页手机桌面 · App 图标
首页手机桌面 · App 图标首页withicons-halloween.design/icons/home浏览器 · 标签页与站点图标各尺寸下的可读性
24px32px48px64px96px128px复制 首页 图标代码
内联 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"><defs><radialGradient id="SVGT98fveuM" cx="12" cy="13.81" r="13.85" fx="8.64" fy="8.74" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8b55e0"/><stop offset=".45" stop-color="#8b55e0"/><stop offset="1" stop-color="#7344c9"/></radialGradient><radialGradient id="SVG42Yu6d8z" cx="12" cy="14.2" r="13.01" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff1b8"/><stop offset=".5" stop-color="#ffb52e"/><stop offset="1" stop-color="#ff9f2e"/></radialGradient><radialGradient id="SVGPbNaLerc" cx="12" cy="13.23" r="12" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffb52e" stop-opacity=".36"/><stop offset=".55" stop-color="#ffb52e" stop-opacity=".162"/><stop offset="1" stop-color="#ffb52e" stop-opacity="0"/></radialGradient></defs><path fill="url(#SVGPbNaLerc)" d="M0 0h24v24H0Z" class="wm-deco"/><path fill="#2a1642" fill-opacity=".3" d="m11.83 3.4l-.4.24l-9.28 7.33l-.24.21l-.16.24l-.1.39l.1.48l.25.32l.39.2l.4.03l.32-.11l.96-.72l.08.04v7.84l.05.48l.15.56l.15.32l.29.45l.48.48l.56.36l.4.16l.48.11l.48.04l10.08-.01l.8-.14l.72-.34l.63-.55l.42-.64l.16-.4l.1-.4l.04-.32l.01-8.02l.08-.02l.96.72l.32.11l.32-.01l.36-.14l.31-.32l.14-.4l-.03-.4l-.14-.29l-.24-.24l-9.36-7.4l-.24-.16l-.24-.1l-.32-.02z" class="wm-shadow"/><path fill="url(#SVG42Yu6d8z)" d="m11.68 2.55l-.4.24L2 10.12l-.24.21l-.16.24l-.1.39l.1.48l.25.32l.39.2l.4.03l.32-.11l.96-.72l.08.04v7.84l.05.48l.15.56l.15.32l.29.45l.48.48l.56.36l.4.16l.48.11l.48.04l10.08-.01l.8-.14l.72-.34l.63-.55l.42-.64l.16-.4l.1-.4l.04-.32l.01-8.02l.08-.02l.96.72l.32.11l.32-.01l.36-.14l.31-.32l.14-.4l-.03-.4l-.14-.29l-.24-.24l-9.36-7.4l-.24-.16l-.24-.1l-.32-.02z" class="wm-shine"/><path fill="#1d1029" d="m10.6 14.56l.44-.06l2.24.03l.32.1l.29.17l.19.16l.23.32l.13.32l.06.4l-.02 4.98l-4.8.02l-.17-.04l.01-5.2l.17-.48l.23-.31l.32-.26z" class="wm-shine"/><path fill="url(#SVGT98fveuM)" fill-rule="evenodd" stroke="#1d1029" stroke-linejoin="round" stroke-width=".72" d="m11.68 2.55l-.4.24L2 10.12l-.24.21l-.16.24l-.1.39l.1.48l.25.32l.39.2l.4.03l.32-.11l.96-.72l.08.04v7.84l.05.48l.15.56l.15.32l.29.45l.48.48l.56.36l.4.16l.48.11l.48.04l10.08-.01l.8-.14l.72-.34l.63-.55l.42-.64l.16-.4l.1-.4l.04-.32l.01-8.02l.08-.02l.96.72l.32.11l.32-.01l.36-.14l.31-.32l.14-.4l-.03-.4l-.14-.29l-.24-.24l-9.36-7.4l-.24-.16l-.24-.1l-.32-.02zM10.6 14.56l.44-.06l2.24.03l.32.1l.29.17l.19.16l.23.32l.13.32l.06.4l-.02 4.98l-4.8.02l-.17-.04l.01-5.2l.17-.48l.23-.31l.32-.26z" class="wm-k"/><path fill="#86d13a" d="M11.8 18.53q-.57-.84-1.15-.3q.46.73 1.15.3m.4 0q.58-.84 1.15-.3q-.46.73-1.15.3" class="wm-deco"/><path fill="#fff6e2" fill-opacity=".45" d="M11.84 3.18L2.4 10.6l-.21.2l-.05.16l.1.29l.16.09h.24l1.12-.8l8.32-6.57l.4-.19l.4.19l8.97 7.07l-.01-.17l-.19-.23l-9.25-7.31l-.32-.19zm-7.2 8.07l-.02 7.79l.19.88l.47.67l-.18-.99l-.01-7.84l-.14-.32zm10.32 3.91l.16.84l-.02 4.96l-.12.4l.54.01l.06-.09l.01-4.72l-.07-.48l-.16-.4z" class="wm-shine"/><path fill="#7344c9" stroke="#1d1029" stroke-linejoin="round" stroke-width=".3" d="m3.5 3.19l.26-.63l.19.63l.65-.63l.95-.16l.58.68q-.37.47-.9.42q-.26.53-.68.32q-.42.57-.73.21l-.32.31q-.31-.31-.63.05q-.42-.57-.84-.36q-.26-.53-.79-.48l-.36-.47l.57-.68l.95.16l.65.63l.19-.63z" class="wm-deco"/><path fill="#fff1b8" d="M3.18 3.37a.14.14 0 1 0 .28 0a.14.14 0 1 0-.28 0m.36 0a.14.14 0 1 0 .28 0a.14.14 0 1 0-.28 0" class="wm-deco"/></g></svg>reactReact 组件（TSX）
export function HomeIcon(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"><defs><radialGradient id="SVGT98fveuM" cx="12" cy="13.81" r="13.85" fx="8.64" fy="8.74" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8b55e0"/><stop offset=".45" stop-color="#8b55e0"/><stop offset="1" stop-color="#7344c9"/></radialGradient><radialGradient id="SVG42Yu6d8z" cx="12" cy="14.2" r="13.01" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff1b8"/><stop offset=".5" stop-color="#ffb52e"/><stop offset="1" stop-color="#ff9f2e"/></radialGradient><radialGradient id="SVGPbNaLerc" cx="12" cy="13.23" r="12" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffb52e" stop-opacity=".36"/><stop offset=".55" stop-color="#ffb52e" stop-opacity=".162"/><stop offset="1" stop-color="#ffb52e" stop-opacity="0"/></radialGradient></defs><path fill="url(#SVGPbNaLerc)" d="M0 0h24v24H0Z" class="wm-deco"/><path fill="#2a1642" fill-opacity=".3" d="m11.83 3.4l-.4.24l-9.28 7.33l-.24.21l-.16.24l-.1.39l.1.48l.25.32l.39.2l.4.03l.32-.11l.96-.72l.08.04v7.84l.05.48l.15.56l.15.32l.29.45l.48.48l.56.36l.4.16l.48.11l.48.04l10.08-.01l.8-.14l.72-.34l.63-.55l.42-.64l.16-.4l.1-.4l.04-.32l.01-8.02l.08-.02l.96.72l.32.11l.32-.01l.36-.14l.31-.32l.14-.4l-.03-.4l-.14-.29l-.24-.24l-9.36-7.4l-.24-.16l-.24-.1l-.32-.02z" class="wm-shadow"/><path fill="url(#SVG42Yu6d8z)" d="m11.68 2.55l-.4.24L2 10.12l-.24.21l-.16.24l-.1.39l.1.48l.25.32l.39.2l.4.03l.32-.11l.96-.72l.08.04v7.84l.05.48l.15.56l.15.32l.29.45l.48.48l.56.36l.4.16l.48.11l.48.04l10.08-.01l.8-.14l.72-.34l.63-.55l.42-.64l.16-.4l.1-.4l.04-.32l.01-8.02l.08-.02l.96.72l.32.11l.32-.01l.36-.14l.31-.32l.14-.4l-.03-.4l-.14-.29l-.24-.24l-9.36-7.4l-.24-.16l-.24-.1l-.32-.02z" class="wm-shine"/><path fill="#1d1029" d="m10.6 14.56l.44-.06l2.24.03l.32.1l.29.17l.19.16l.23.32l.13.32l.06.4l-.02 4.98l-4.8.02l-.17-.04l.01-5.2l.17-.48l.23-.31l.32-.26z" class="wm-shine"/><path fill="url(#SVGT98fveuM)" fill-rule="evenodd" stroke="#1d1029" stroke-linejoin="round" stroke-width=".72" d="m11.68 2.55l-.4.24L2 10.12l-.24.21l-.16.24l-.1.39l.1.48l.25.32l.39.2l.4.03l.32-.11l.96-.72l.08.04v7.84l.05.48l.15.56l.15.32l.29.45l.48.48l.56.36l.4.16l.48.11l.48.04l10.08-.01l.8-.14l.72-.34l.63-.55l.42-.64l.16-.4l.1-.4l.04-.32l.01-8.02l.08-.02l.96.72l.32.11l.32-.01l.36-.14l.31-.32l.14-.4l-.03-.4l-.14-.29l-.24-.24l-9.36-7.4l-.24-.16l-.24-.1l-.32-.02zM10.6 14.56l.44-.06l2.24.03l.32.1l.29.17l.19.16l.23.32l.13.32l.06.4l-.02 4.98l-4.8.02l-.17-.04l.01-5.2l.17-.48l.23-.31l.32-.26z" class="wm-k"/><path fill="#86d13a" d="M11.8 18.53q-.57-.84-1.15-.3q.46.73 1.15.3m.4 0q.58-.84 1.15-.3q-.46.73-1.15.3" class="wm-deco"/><path fill="#fff6e2" fill-opacity=".45" d="M11.84 3.18L2.4 10.6l-.21.2l-.05.16l.1.29l.16.09h.24l1.12-.8l8.32-6.57l.4-.19l.4.19l8.97 7.07l-.01-.17l-.19-.23l-9.25-7.31l-.32-.19zm-7.2 8.07l-.02 7.79l.19.88l.47.67l-.18-.99l-.01-7.84l-.14-.32zm10.32 3.91l.16.84l-.02 4.96l-.12.4l.54.01l.06-.09l.01-4.72l-.07-.48l-.16-.4z" class="wm-shine"/><path fill="#7344c9" stroke="#1d1029" stroke-linejoin="round" stroke-width=".3" d="m3.5 3.19l.26-.63l.19.63l.65-.63l.95-.16l.58.68q-.37.47-.9.42q-.26.53-.68.32q-.42.57-.73.21l-.32.31q-.31-.31-.63.05q-.42-.57-.84-.36q-.26-.53-.79-.48l-.36-.47l.57-.68l.95.16l.65.63l.19-.63z" class="wm-deco"/><path fill="#fff1b8" d="M3.18 3.37a.14.14 0 1 0 .28 0a.14.14 0 1 0-.28 0m.36 0a.14.14 0 1 0 .28 0a.14.14 0 1 0-.28 0" 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"><defs><radialGradient id="SVGT98fveuM" cx="12" cy="13.81" r="13.85" fx="8.64" fy="8.74" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8b55e0"/><stop offset=".45" stop-color="#8b55e0"/><stop offset="1" stop-color="#7344c9"/></radialGradient><radialGradient id="SVG42Yu6d8z" cx="12" cy="14.2" r="13.01" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff1b8"/><stop offset=".5" stop-color="#ffb52e"/><stop offset="1" stop-color="#ff9f2e"/></radialGradient><radialGradient id="SVGPbNaLerc" cx="12" cy="13.23" r="12" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffb52e" stop-opacity=".36"/><stop offset=".55" stop-color="#ffb52e" stop-opacity=".162"/><stop offset="1" stop-color="#ffb52e" stop-opacity="0"/></radialGradient></defs><path fill="url(#SVGPbNaLerc)" d="M0 0h24v24H0Z" class="wm-deco"/><path fill="#2a1642" fill-opacity=".3" d="m11.83 3.4l-.4.24l-9.28 7.33l-.24.21l-.16.24l-.1.39l.1.48l.25.32l.39.2l.4.03l.32-.11l.96-.72l.08.04v7.84l.05.48l.15.56l.15.32l.29.45l.48.48l.56.36l.4.16l.48.11l.48.04l10.08-.01l.8-.14l.72-.34l.63-.55l.42-.64l.16-.4l.1-.4l.04-.32l.01-8.02l.08-.02l.96.72l.32.11l.32-.01l.36-.14l.31-.32l.14-.4l-.03-.4l-.14-.29l-.24-.24l-9.36-7.4l-.24-.16l-.24-.1l-.32-.02z" class="wm-shadow"/><path fill="url(#SVG42Yu6d8z)" d="m11.68 2.55l-.4.24L2 10.12l-.24.21l-.16.24l-.1.39l.1.48l.25.32l.39.2l.4.03l.32-.11l.96-.72l.08.04v7.84l.05.48l.15.56l.15.32l.29.45l.48.48l.56.36l.4.16l.48.11l.48.04l10.08-.01l.8-.14l.72-.34l.63-.55l.42-.64l.16-.4l.1-.4l.04-.32l.01-8.02l.08-.02l.96.72l.32.11l.32-.01l.36-.14l.31-.32l.14-.4l-.03-.4l-.14-.29l-.24-.24l-9.36-7.4l-.24-.16l-.24-.1l-.32-.02z" class="wm-shine"/><path fill="#1d1029" d="m10.6 14.56l.44-.06l2.24.03l.32.1l.29.17l.19.16l.23.32l.13.32l.06.4l-.02 4.98l-4.8.02l-.17-.04l.01-5.2l.17-.48l.23-.31l.32-.26z" class="wm-shine"/><path fill="url(#SVGT98fveuM)" fill-rule="evenodd" stroke="#1d1029" stroke-linejoin="round" stroke-width=".72" d="m11.68 2.55l-.4.24L2 10.12l-.24.21l-.16.24l-.1.39l.1.48l.25.32l.39.2l.4.03l.32-.11l.96-.72l.08.04v7.84l.05.48l.15.56l.15.32l.29.45l.48.48l.56.36l.4.16l.48.11l.48.04l10.08-.01l.8-.14l.72-.34l.63-.55l.42-.64l.16-.4l.1-.4l.04-.32l.01-8.02l.08-.02l.96.72l.32.11l.32-.01l.36-.14l.31-.32l.14-.4l-.03-.4l-.14-.29l-.24-.24l-9.36-7.4l-.24-.16l-.24-.1l-.32-.02zM10.6 14.56l.44-.06l2.24.03l.32.1l.29.17l.19.16l.23.32l.13.32l.06.4l-.02 4.98l-4.8.02l-.17-.04l.01-5.2l.17-.48l.23-.31l.32-.26z" class="wm-k"/><path fill="#86d13a" d="M11.8 18.53q-.57-.84-1.15-.3q.46.73 1.15.3m.4 0q.58-.84 1.15-.3q-.46.73-1.15.3" class="wm-deco"/><path fill="#fff6e2" fill-opacity=".45" d="M11.84 3.18L2.4 10.6l-.21.2l-.05.16l.1.29l.16.09h.24l1.12-.8l8.32-6.57l.4-.19l.4.19l8.97 7.07l-.01-.17l-.19-.23l-9.25-7.31l-.32-.19zm-7.2 8.07l-.02 7.79l.19.88l.47.67l-.18-.99l-.01-7.84l-.14-.32zm10.32 3.91l.16.84l-.02 4.96l-.12.4l.54.01l.06-.09l.01-4.72l-.07-.48l-.16-.4z" class="wm-shine"/><path fill="#7344c9" stroke="#1d1029" stroke-linejoin="round" stroke-width=".3" d="m3.5 3.19l.26-.63l.19.63l.65-.63l.95-.16l.58.68q-.37.47-.9.42q-.26.53-.68.32q-.42.57-.73.21l-.32.31q-.31-.31-.63.05q-.42-.57-.84-.36q-.26-.53-.79-.48l-.36-.47l.57-.68l.95.16l.65.63l.19-.63z" class="wm-deco"/><path fill="#fff1b8" d="M3.18 3.37a.14.14 0 1 0 .28 0a.14.14 0 1 0-.28 0m.36 0a.14.14 0 1 0 .28 0a.14.14 0 1 0-.28 0" class="wm-deco"/></g>`;
</script>cssCSS mask（随 currentColor 改色）
.home {
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%3Cdefs%3E%3CradialGradient%20id%3D%22SVGT98fveuM%22%20cx%3D%2212%22%20cy%3D%2213.81%22%20r%3D%2213.85%22%20fx%3D%228.64%22%20fy%3D%228.74%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%238b55e0%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%238b55e0%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%237344c9%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVG42Yu6d8z%22%20cx%3D%2212%22%20cy%3D%2214.2%22%20r%3D%2213.01%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff1b8%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23ffb52e%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ff9f2e%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGPbNaLerc%22%20cx%3D%2212%22%20cy%3D%2213.23%22%20r%3D%2212%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffb52e%22%20stop-opacity%3D%22.36%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23ffb52e%22%20stop-opacity%3D%22.162%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffb52e%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23SVGPbNaLerc)%22%20d%3D%22M0%200h24v24H0Z%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22%232a1642%22%20fill-opacity%3D%22.3%22%20d%3D%22m11.83%203.4l-.4.24l-9.28%207.33l-.24.21l-.16.24l-.1.39l.1.48l.25.32l.39.2l.4.03l.32-.11l.96-.72l.08.04v7.84l.05.48l.15.56l.15.32l.29.45l.48.48l.56.36l.4.16l.48.11l.48.04l10.08-.01l.8-.14l.72-.34l.63-.55l.42-.64l.16-.4l.1-.4l.04-.32l.01-8.02l.08-.02l.96.72l.32.11l.32-.01l.36-.14l.31-.32l.14-.4l-.03-.4l-.14-.29l-.24-.24l-9.36-7.4l-.24-.16l-.24-.1l-.32-.02z%22%20class%3D%22wm-shadow%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG42Yu6d8z)%22%20d%3D%22m11.68%202.55l-.4.24L2%2010.12l-.24.21l-.16.24l-.1.39l.1.48l.25.32l.39.2l.4.03l.32-.11l.96-.72l.08.04v7.84l.05.48l.15.56l.15.32l.29.45l.48.48l.56.36l.4.16l.48.11l.48.04l10.08-.01l.8-.14l.72-.34l.63-.55l.42-.64l.16-.4l.1-.4l.04-.32l.01-8.02l.08-.02l.96.72l.32.11l.32-.01l.36-.14l.31-.32l.14-.4l-.03-.4l-.14-.29l-.24-.24l-9.36-7.4l-.24-.16l-.24-.1l-.32-.02z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%231d1029%22%20d%3D%22m10.6%2014.56l.44-.06l2.24.03l.32.1l.29.17l.19.16l.23.32l.13.32l.06.4l-.02%204.98l-4.8.02l-.17-.04l.01-5.2l.17-.48l.23-.31l.32-.26z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGT98fveuM)%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%231d1029%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%22.72%22%20d%3D%22m11.68%202.55l-.4.24L2%2010.12l-.24.21l-.16.24l-.1.39l.1.48l.25.32l.39.2l.4.03l.32-.11l.96-.72l.08.04v7.84l.05.48l.15.56l.15.32l.29.45l.48.48l.56.36l.4.16l.48.11l.48.04l10.08-.01l.8-.14l.72-.34l.63-.55l.42-.64l.16-.4l.1-.4l.04-.32l.01-8.02l.08-.02l.96.72l.32.11l.32-.01l.36-.14l.31-.32l.14-.4l-.03-.4l-.14-.29l-.24-.24l-9.36-7.4l-.24-.16l-.24-.1l-.32-.02zM10.6%2014.56l.44-.06l2.24.03l.32.1l.29.17l.19.16l.23.32l.13.32l.06.4l-.02%204.98l-4.8.02l-.17-.04l.01-5.2l.17-.48l.23-.31l.32-.26z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%2386d13a%22%20d%3D%22M11.8%2018.53q-.57-.84-1.15-.3q.46.73%201.15.3m.4%200q.58-.84%201.15-.3q-.46.73-1.15.3%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22%23fff6e2%22%20fill-opacity%3D%22.45%22%20d%3D%22M11.84%203.18L2.4%2010.6l-.21.2l-.05.16l.1.29l.16.09h.24l1.12-.8l8.32-6.57l.4-.19l.4.19l8.97%207.07l-.01-.17l-.19-.23l-9.25-7.31l-.32-.19zm-7.2%208.07l-.02%207.79l.19.88l.47.67l-.18-.99l-.01-7.84l-.14-.32zm10.32%203.91l.16.84l-.02%204.96l-.12.4l.54.01l.06-.09l.01-4.72l-.07-.48l-.16-.4z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%237344c9%22%20stroke%3D%22%231d1029%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%22.3%22%20d%3D%22m3.5%203.19l.26-.63l.19.63l.65-.63l.95-.16l.58.68q-.37.47-.9.42q-.26.53-.68.32q-.42.57-.73.21l-.32.31q-.31-.31-.63.05q-.42-.57-.84-.36q-.26-.53-.79-.48l-.36-.47l.57-.68l.95.16l.65.63l.19-.63z%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22%23fff1b8%22%20d%3D%22M3.18%203.37a.14.14%200%201%200%20.28%200a.14.14%200%201%200-.28%200m.36%200a.14.14%200%201%200%20.28%200a.14.14%200%201%200-.28%200%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%3Cdefs%3E%3CradialGradient%20id%3D%22SVGT98fveuM%22%20cx%3D%2212%22%20cy%3D%2213.81%22%20r%3D%2213.85%22%20fx%3D%228.64%22%20fy%3D%228.74%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%238b55e0%22%2F%3E%3Cstop%20offset%3D%22.45%22%20stop-color%3D%22%238b55e0%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%237344c9%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVG42Yu6d8z%22%20cx%3D%2212%22%20cy%3D%2214.2%22%20r%3D%2213.01%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fff1b8%22%2F%3E%3Cstop%20offset%3D%22.5%22%20stop-color%3D%22%23ffb52e%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ff9f2e%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGPbNaLerc%22%20cx%3D%2212%22%20cy%3D%2213.23%22%20r%3D%2212%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23ffb52e%22%20stop-opacity%3D%22.36%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23ffb52e%22%20stop-opacity%3D%22.162%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffb52e%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%22url(%23SVGPbNaLerc)%22%20d%3D%22M0%200h24v24H0Z%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22%232a1642%22%20fill-opacity%3D%22.3%22%20d%3D%22m11.83%203.4l-.4.24l-9.28%207.33l-.24.21l-.16.24l-.1.39l.1.48l.25.32l.39.2l.4.03l.32-.11l.96-.72l.08.04v7.84l.05.48l.15.56l.15.32l.29.45l.48.48l.56.36l.4.16l.48.11l.48.04l10.08-.01l.8-.14l.72-.34l.63-.55l.42-.64l.16-.4l.1-.4l.04-.32l.01-8.02l.08-.02l.96.72l.32.11l.32-.01l.36-.14l.31-.32l.14-.4l-.03-.4l-.14-.29l-.24-.24l-9.36-7.4l-.24-.16l-.24-.1l-.32-.02z%22%20class%3D%22wm-shadow%22%2F%3E%3Cpath%20fill%3D%22url(%23SVG42Yu6d8z)%22%20d%3D%22m11.68%202.55l-.4.24L2%2010.12l-.24.21l-.16.24l-.1.39l.1.48l.25.32l.39.2l.4.03l.32-.11l.96-.72l.08.04v7.84l.05.48l.15.56l.15.32l.29.45l.48.48l.56.36l.4.16l.48.11l.48.04l10.08-.01l.8-.14l.72-.34l.63-.55l.42-.64l.16-.4l.1-.4l.04-.32l.01-8.02l.08-.02l.96.72l.32.11l.32-.01l.36-.14l.31-.32l.14-.4l-.03-.4l-.14-.29l-.24-.24l-9.36-7.4l-.24-.16l-.24-.1l-.32-.02z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%231d1029%22%20d%3D%22m10.6%2014.56l.44-.06l2.24.03l.32.1l.29.17l.19.16l.23.32l.13.32l.06.4l-.02%204.98l-4.8.02l-.17-.04l.01-5.2l.17-.48l.23-.31l.32-.26z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGT98fveuM)%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22%231d1029%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%22.72%22%20d%3D%22m11.68%202.55l-.4.24L2%2010.12l-.24.21l-.16.24l-.1.39l.1.48l.25.32l.39.2l.4.03l.32-.11l.96-.72l.08.04v7.84l.05.48l.15.56l.15.32l.29.45l.48.48l.56.36l.4.16l.48.11l.48.04l10.08-.01l.8-.14l.72-.34l.63-.55l.42-.64l.16-.4l.1-.4l.04-.32l.01-8.02l.08-.02l.96.72l.32.11l.32-.01l.36-.14l.31-.32l.14-.4l-.03-.4l-.14-.29l-.24-.24l-9.36-7.4l-.24-.16l-.24-.1l-.32-.02zM10.6%2014.56l.44-.06l2.24.03l.32.1l.29.17l.19.16l.23.32l.13.32l.06.4l-.02%204.98l-4.8.02l-.17-.04l.01-5.2l.17-.48l.23-.31l.32-.26z%22%20class%3D%22wm-k%22%2F%3E%3Cpath%20fill%3D%22%2386d13a%22%20d%3D%22M11.8%2018.53q-.57-.84-1.15-.3q.46.73%201.15.3m.4%200q.58-.84%201.15-.3q-.46.73-1.15.3%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22%23fff6e2%22%20fill-opacity%3D%22.45%22%20d%3D%22M11.84%203.18L2.4%2010.6l-.21.2l-.05.16l.1.29l.16.09h.24l1.12-.8l8.32-6.57l.4-.19l.4.19l8.97%207.07l-.01-.17l-.19-.23l-9.25-7.31l-.32-.19zm-7.2%208.07l-.02%207.79l.19.88l.47.67l-.18-.99l-.01-7.84l-.14-.32zm10.32%203.91l.16.84l-.02%204.96l-.12.4l.54.01l.06-.09l.01-4.72l-.07-.48l-.16-.4z%22%20class%3D%22wm-shine%22%2F%3E%3Cpath%20fill%3D%22%237344c9%22%20stroke%3D%22%231d1029%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%22.3%22%20d%3D%22m3.5%203.19l.26-.63l.19.63l.65-.63l.95-.16l.58.68q-.37.47-.9.42q-.26.53-.68.32q-.42.57-.73.21l-.32.31q-.31-.31-.63.05q-.42-.57-.84-.36q-.26-.53-.79-.48l-.36-.47l.57-.68l.95.16l.65.63l.19-.63z%22%20class%3D%22wm-deco%22%2F%3E%3Cpath%20fill%3D%22%23fff1b8%22%20d%3D%22M3.18%203.37a.14.14%200%201%200%20.28%200a.14.14%200%201%200-.28%200m.36%200a.14.14%200%201%200%20.28%200a.14.14%200%201%200-.28%200%22%20class%3D%22wm-deco%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}给 首页 加一点动效
单文件 CSS 即可播放，无需任何依赖；描画动效仅对描边类图标生效。
呼吸
透明度往复渐变，适合状态提示与在线指示。
css呼吸动效样式
.icon-home {
animation: icon-breathe 1.8s ease-in-out infinite;
}
@keyframes icon-breathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}旋转
匀速循环旋转，适合加载中场景。
css旋转动效样式
.icon-home {
animation: icon-spin 1.6s linear infinite;
}
@keyframes icon-spin {
to { transform: rotate(360deg); }
}描画
线条从无到有依次绘出，适合线性图标与首屏引导。
css描画动效样式
.icon-home path {
stroke-dasharray: 120;
animation: icon-draw 1.2s ease forwards;
}
@keyframes icon-draw {
from { stroke-dashoffset: 120; }
to { stroke-dashoffset: 0; }
}SVG 健康报告
对源文件的客观技术指标，供工程侧评估引用方式。
文件体积
3.35 KB
3,429 字节
viewBox
0 0 24 24
矢量坐标系
图元总数
9
<path> ×9
风格
多色填充
描边可随字号加粗
同时含 width/height 与 viewBox：可以只保留 viewBox，让图标跟随容器自适应缩放。 文件体积 3.35 KB（3,429 字节），图元 9 个，风格为多色填充。
常见问题
关于 首页 图标的下载、商用与改色。
首页 图标是什么？▾
它是 with icons Halloween（withicons-halloween）开源图标集中的 home 图标，多色填充，viewBox 为 0 0 24 24，文件仅 3.35 KB，矢量格式可无损缩放到任意尺寸。
如何下载 首页 图标？▾
点击「下载与导出」中的 SVG 源文件按钮保存矢量文件；也可以按 512 / 256 / 128 / 64 / 32 / 16px 预设导出 PNG，或在输入框填 16~1024 之间的任意尺寸。需要 iOS、Android 全套尺寸时，用素材包生成器一键打包。
首页 图标可以商用吗？▾
该图标采用 MIT（MIT） 开源协议，通常允许在遵守协议的前提下免费使用，常见要求是保留作者版权声明。商用前建议阅读协议原文确认。
如何修改 首页 图标的颜色？▾
在「预览与场景」的色板中切换颜色，三底色与全部场景会实时跟随；点击任一相近图标可打开预览弹层，复制对应颜色的 SVG 源码或 PNG。也可以复制 SVG 源码后自行修改 fill 值。