下载 compass-outline 图标
SVG 矢量源文件,或 PNG 按 16~512 预设与 16~1024 自定义尺寸导出,任意尺寸边缘锐利。
PNG 由矢量源实时渲染,任意尺寸边缘锐利无锯齿;下载与预览均免费,无需注册。
compass-outline 的预览与使用场景
切换预览颜色后,下方三底色、真实界面场景与各尺寸渲染会实时跟随。
在真实界面里长这样
各尺寸下的可读性
复制 compass-outline 图标代码
内联 SVG、React、Vue 与 CSS mask 四种主流引用方式,代码基于当前源文件生成,复制即用。
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75ZM1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12ZM13.8489 9.18125C13.244 9.34164 12.4287 9.66626 11.2543 10.136C10.7129 10.3526 10.6121 10.4036 10.538 10.4686C10.5134 10.4902 10.4902 10.5134 10.4686 10.538C10.4036 10.6121 10.3526 10.7129 10.136 11.2543C9.66626 12.4287 9.34164 13.244 9.18125 13.8489C9.01425 14.4789 9.0961 14.6399 9.12239 14.6786C9.17553 14.7568 9.24298 14.8242 9.32118 14.8774C9.35986 14.9037 9.52089 14.9855 10.1508 14.8185C10.7558 14.6581 11.571 14.3335 12.7454 13.8637C13.2868 13.6472 13.3876 13.5961 13.4617 13.5311L13.9562 14.095L13.4617 13.5311C13.4864 13.5095 13.5095 13.4864 13.5311 13.4617L14.095 13.9562L13.5311 13.4617C13.5961 13.3876 13.6472 13.2868 13.8637 12.7454C14.3335 11.571 14.6581 10.7558 14.8185 10.1508C14.9855 9.52089 14.9037 9.35986 14.8774 9.32118C14.8242 9.24298 14.7568 9.17553 14.6786 9.12239C14.6399 9.0961 14.4789 9.01425 13.8489 9.18125ZM13.4646 7.73134C14.1544 7.54845 14.9007 7.45976 15.5217 7.88173C15.7563 8.04115 15.9586 8.2435 16.118 8.47811C16.54 9.09908 16.4513 9.84532 16.2684 10.5352C16.0817 11.2394 15.7215 12.14 15.2766 13.2522L15.2565 13.3025C15.2452 13.3307 15.234 13.3586 15.223 13.3864C15.0598 13.7958 14.9155 14.1582 14.6589 14.4507C14.5941 14.5246 14.5246 14.5941 14.4507 14.6589C14.1582 14.9155 13.7958 15.0598 13.3864 15.223C13.3587 15.234 13.3307 15.2452 13.3025 15.2564L13.024 14.5601L13.3025 15.2565L13.2522 15.2766C12.14 15.7215 11.2394 16.0817 10.5352 16.2684C9.84532 16.4513 9.09908 16.54 8.47811 16.118L8.89964 15.4977L8.47811 16.118C8.2435 15.9586 8.04115 15.7563 7.88173 15.5217C7.45976 14.9007 7.54845 14.1544 7.73134 13.4646C7.91804 12.7603 8.27829 11.8597 8.72318 10.7476L8.74331 10.6973C8.75458 10.6691 8.76572 10.6411 8.77677 10.6134C8.93992 10.2039 9.08429 9.8416 9.34085 9.54904C9.40562 9.47517 9.47517 9.40562 9.54904 9.34085C9.8416 9.08429 10.2039 8.93992 10.6134 8.77677C10.6411 8.76572 10.6691 8.75458 10.6973 8.74331L10.7476 8.72318C11.8598 8.27828 12.7603 7.91804 13.4646 7.73134Z" clip-rule="evenodd"/></svg>export function CompassOutlineIcon(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: `<path fill="currentColor" fill-rule="evenodd" d="M12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75ZM1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12ZM13.8489 9.18125C13.244 9.34164 12.4287 9.66626 11.2543 10.136C10.7129 10.3526 10.6121 10.4036 10.538 10.4686C10.5134 10.4902 10.4902 10.5134 10.4686 10.538C10.4036 10.6121 10.3526 10.7129 10.136 11.2543C9.66626 12.4287 9.34164 13.244 9.18125 13.8489C9.01425 14.4789 9.0961 14.6399 9.12239 14.6786C9.17553 14.7568 9.24298 14.8242 9.32118 14.8774C9.35986 14.9037 9.52089 14.9855 10.1508 14.8185C10.7558 14.6581 11.571 14.3335 12.7454 13.8637C13.2868 13.6472 13.3876 13.5961 13.4617 13.5311L13.9562 14.095L13.4617 13.5311C13.4864 13.5095 13.5095 13.4864 13.5311 13.4617L14.095 13.9562L13.5311 13.4617C13.5961 13.3876 13.6472 13.2868 13.8637 12.7454C14.3335 11.571 14.6581 10.7558 14.8185 10.1508C14.9855 9.52089 14.9037 9.35986 14.8774 9.32118C14.8242 9.24298 14.7568 9.17553 14.6786 9.12239C14.6399 9.0961 14.4789 9.01425 13.8489 9.18125ZM13.4646 7.73134C14.1544 7.54845 14.9007 7.45976 15.5217 7.88173C15.7563 8.04115 15.9586 8.2435 16.118 8.47811C16.54 9.09908 16.4513 9.84532 16.2684 10.5352C16.0817 11.2394 15.7215 12.14 15.2766 13.2522L15.2565 13.3025C15.2452 13.3307 15.234 13.3586 15.223 13.3864C15.0598 13.7958 14.9155 14.1582 14.6589 14.4507C14.5941 14.5246 14.5246 14.5941 14.4507 14.6589C14.1582 14.9155 13.7958 15.0598 13.3864 15.223C13.3587 15.234 13.3307 15.2452 13.3025 15.2564L13.024 14.5601L13.3025 15.2565L13.2522 15.2766C12.14 15.7215 11.2394 16.0817 10.5352 16.2684C9.84532 16.4513 9.09908 16.54 8.47811 16.118L8.89964 15.4977L8.47811 16.118C8.2435 15.9586 8.04115 15.7563 7.88173 15.5217C7.45976 14.9007 7.54845 14.1544 7.73134 13.4646C7.91804 12.7603 8.27829 11.8597 8.72318 10.7476L8.74331 10.6973C8.75458 10.6691 8.76572 10.6411 8.77677 10.6134C8.93992 10.2039 9.08429 9.8416 9.34085 9.54904C9.40562 9.47517 9.47517 9.40562 9.54904 9.34085C9.8416 9.08429 10.2039 8.93992 10.6134 8.77677C10.6411 8.76572 10.6691 8.75458 10.6973 8.74331L10.7476 8.72318C11.8598 8.27828 12.7603 7.91804 13.4646 7.73134Z" clip-rule="evenodd"/>` }}
/>
);
}<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 = `<path fill="currentColor" fill-rule="evenodd" d="M12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75ZM1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12ZM13.8489 9.18125C13.244 9.34164 12.4287 9.66626 11.2543 10.136C10.7129 10.3526 10.6121 10.4036 10.538 10.4686C10.5134 10.4902 10.4902 10.5134 10.4686 10.538C10.4036 10.6121 10.3526 10.7129 10.136 11.2543C9.66626 12.4287 9.34164 13.244 9.18125 13.8489C9.01425 14.4789 9.0961 14.6399 9.12239 14.6786C9.17553 14.7568 9.24298 14.8242 9.32118 14.8774C9.35986 14.9037 9.52089 14.9855 10.1508 14.8185C10.7558 14.6581 11.571 14.3335 12.7454 13.8637C13.2868 13.6472 13.3876 13.5961 13.4617 13.5311L13.9562 14.095L13.4617 13.5311C13.4864 13.5095 13.5095 13.4864 13.5311 13.4617L14.095 13.9562L13.5311 13.4617C13.5961 13.3876 13.6472 13.2868 13.8637 12.7454C14.3335 11.571 14.6581 10.7558 14.8185 10.1508C14.9855 9.52089 14.9037 9.35986 14.8774 9.32118C14.8242 9.24298 14.7568 9.17553 14.6786 9.12239C14.6399 9.0961 14.4789 9.01425 13.8489 9.18125ZM13.4646 7.73134C14.1544 7.54845 14.9007 7.45976 15.5217 7.88173C15.7563 8.04115 15.9586 8.2435 16.118 8.47811C16.54 9.09908 16.4513 9.84532 16.2684 10.5352C16.0817 11.2394 15.7215 12.14 15.2766 13.2522L15.2565 13.3025C15.2452 13.3307 15.234 13.3586 15.223 13.3864C15.0598 13.7958 14.9155 14.1582 14.6589 14.4507C14.5941 14.5246 14.5246 14.5941 14.4507 14.6589C14.1582 14.9155 13.7958 15.0598 13.3864 15.223C13.3587 15.234 13.3307 15.2452 13.3025 15.2564L13.024 14.5601L13.3025 15.2565L13.2522 15.2766C12.14 15.7215 11.2394 16.0817 10.5352 16.2684C9.84532 16.4513 9.09908 16.54 8.47811 16.118L8.89964 15.4977L8.47811 16.118C8.2435 15.9586 8.04115 15.7563 7.88173 15.5217C7.45976 14.9007 7.54845 14.1544 7.73134 13.4646C7.91804 12.7603 8.27829 11.8597 8.72318 10.7476L8.74331 10.6973C8.75458 10.6691 8.76572 10.6411 8.77677 10.6134C8.93992 10.2039 9.08429 9.8416 9.34085 9.54904C9.40562 9.47517 9.47517 9.40562 9.54904 9.34085C9.8416 9.08429 10.2039 8.93992 10.6134 8.77677C10.6411 8.76572 10.6691 8.75458 10.6973 8.74331L10.7476 8.72318C11.8598 8.27828 12.7603 7.91804 13.4646 7.73134Z" clip-rule="evenodd"/>`;
</script>.compass-outline {
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%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M12%202.75C6.89137%202.75%202.75%206.89137%202.75%2012C2.75%2017.1086%206.89137%2021.25%2012%2021.25C17.1086%2021.25%2021.25%2017.1086%2021.25%2012C21.25%206.89137%2017.1086%202.75%2012%202.75ZM1.25%2012C1.25%206.06294%206.06294%201.25%2012%201.25C17.9371%201.25%2022.75%206.06294%2022.75%2012C22.75%2017.9371%2017.9371%2022.75%2012%2022.75C6.06294%2022.75%201.25%2017.9371%201.25%2012ZM13.8489%209.18125C13.244%209.34164%2012.4287%209.66626%2011.2543%2010.136C10.7129%2010.3526%2010.6121%2010.4036%2010.538%2010.4686C10.5134%2010.4902%2010.4902%2010.5134%2010.4686%2010.538C10.4036%2010.6121%2010.3526%2010.7129%2010.136%2011.2543C9.66626%2012.4287%209.34164%2013.244%209.18125%2013.8489C9.01425%2014.4789%209.0961%2014.6399%209.12239%2014.6786C9.17553%2014.7568%209.24298%2014.8242%209.32118%2014.8774C9.35986%2014.9037%209.52089%2014.9855%2010.1508%2014.8185C10.7558%2014.6581%2011.571%2014.3335%2012.7454%2013.8637C13.2868%2013.6472%2013.3876%2013.5961%2013.4617%2013.5311L13.9562%2014.095L13.4617%2013.5311C13.4864%2013.5095%2013.5095%2013.4864%2013.5311%2013.4617L14.095%2013.9562L13.5311%2013.4617C13.5961%2013.3876%2013.6472%2013.2868%2013.8637%2012.7454C14.3335%2011.571%2014.6581%2010.7558%2014.8185%2010.1508C14.9855%209.52089%2014.9037%209.35986%2014.8774%209.32118C14.8242%209.24298%2014.7568%209.17553%2014.6786%209.12239C14.6399%209.0961%2014.4789%209.01425%2013.8489%209.18125ZM13.4646%207.73134C14.1544%207.54845%2014.9007%207.45976%2015.5217%207.88173C15.7563%208.04115%2015.9586%208.2435%2016.118%208.47811C16.54%209.09908%2016.4513%209.84532%2016.2684%2010.5352C16.0817%2011.2394%2015.7215%2012.14%2015.2766%2013.2522L15.2565%2013.3025C15.2452%2013.3307%2015.234%2013.3586%2015.223%2013.3864C15.0598%2013.7958%2014.9155%2014.1582%2014.6589%2014.4507C14.5941%2014.5246%2014.5246%2014.5941%2014.4507%2014.6589C14.1582%2014.9155%2013.7958%2015.0598%2013.3864%2015.223C13.3587%2015.234%2013.3307%2015.2452%2013.3025%2015.2564L13.024%2014.5601L13.3025%2015.2565L13.2522%2015.2766C12.14%2015.7215%2011.2394%2016.0817%2010.5352%2016.2684C9.84532%2016.4513%209.09908%2016.54%208.47811%2016.118L8.89964%2015.4977L8.47811%2016.118C8.2435%2015.9586%208.04115%2015.7563%207.88173%2015.5217C7.45976%2014.9007%207.54845%2014.1544%207.73134%2013.4646C7.91804%2012.7603%208.27829%2011.8597%208.72318%2010.7476L8.74331%2010.6973C8.75458%2010.6691%208.76572%2010.6411%208.77677%2010.6134C8.93992%2010.2039%209.08429%209.8416%209.34085%209.54904C9.40562%209.47517%209.47517%209.40562%209.54904%209.34085C9.8416%209.08429%2010.2039%208.93992%2010.6134%208.77677C10.6411%208.76572%2010.6691%208.75458%2010.6973%208.74331L10.7476%208.72318C11.8598%208.27828%2012.7603%207.91804%2013.4646%207.73134Z%22%20clip-rule%3D%22evenodd%22%2F%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%3Cpath%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%20d%3D%22M12%202.75C6.89137%202.75%202.75%206.89137%202.75%2012C2.75%2017.1086%206.89137%2021.25%2012%2021.25C17.1086%2021.25%2021.25%2017.1086%2021.25%2012C21.25%206.89137%2017.1086%202.75%2012%202.75ZM1.25%2012C1.25%206.06294%206.06294%201.25%2012%201.25C17.9371%201.25%2022.75%206.06294%2022.75%2012C22.75%2017.9371%2017.9371%2022.75%2012%2022.75C6.06294%2022.75%201.25%2017.9371%201.25%2012ZM13.8489%209.18125C13.244%209.34164%2012.4287%209.66626%2011.2543%2010.136C10.7129%2010.3526%2010.6121%2010.4036%2010.538%2010.4686C10.5134%2010.4902%2010.4902%2010.5134%2010.4686%2010.538C10.4036%2010.6121%2010.3526%2010.7129%2010.136%2011.2543C9.66626%2012.4287%209.34164%2013.244%209.18125%2013.8489C9.01425%2014.4789%209.0961%2014.6399%209.12239%2014.6786C9.17553%2014.7568%209.24298%2014.8242%209.32118%2014.8774C9.35986%2014.9037%209.52089%2014.9855%2010.1508%2014.8185C10.7558%2014.6581%2011.571%2014.3335%2012.7454%2013.8637C13.2868%2013.6472%2013.3876%2013.5961%2013.4617%2013.5311L13.9562%2014.095L13.4617%2013.5311C13.4864%2013.5095%2013.5095%2013.4864%2013.5311%2013.4617L14.095%2013.9562L13.5311%2013.4617C13.5961%2013.3876%2013.6472%2013.2868%2013.8637%2012.7454C14.3335%2011.571%2014.6581%2010.7558%2014.8185%2010.1508C14.9855%209.52089%2014.9037%209.35986%2014.8774%209.32118C14.8242%209.24298%2014.7568%209.17553%2014.6786%209.12239C14.6399%209.0961%2014.4789%209.01425%2013.8489%209.18125ZM13.4646%207.73134C14.1544%207.54845%2014.9007%207.45976%2015.5217%207.88173C15.7563%208.04115%2015.9586%208.2435%2016.118%208.47811C16.54%209.09908%2016.4513%209.84532%2016.2684%2010.5352C16.0817%2011.2394%2015.7215%2012.14%2015.2766%2013.2522L15.2565%2013.3025C15.2452%2013.3307%2015.234%2013.3586%2015.223%2013.3864C15.0598%2013.7958%2014.9155%2014.1582%2014.6589%2014.4507C14.5941%2014.5246%2014.5246%2014.5941%2014.4507%2014.6589C14.1582%2014.9155%2013.7958%2015.0598%2013.3864%2015.223C13.3587%2015.234%2013.3307%2015.2452%2013.3025%2015.2564L13.024%2014.5601L13.3025%2015.2565L13.2522%2015.2766C12.14%2015.7215%2011.2394%2016.0817%2010.5352%2016.2684C9.84532%2016.4513%209.09908%2016.54%208.47811%2016.118L8.89964%2015.4977L8.47811%2016.118C8.2435%2015.9586%208.04115%2015.7563%207.88173%2015.5217C7.45976%2014.9007%207.54845%2014.1544%207.73134%2013.4646C7.91804%2012.7603%208.27829%2011.8597%208.72318%2010.7476L8.74331%2010.6973C8.75458%2010.6691%208.76572%2010.6411%208.77677%2010.6134C8.93992%2010.2039%209.08429%209.8416%209.34085%209.54904C9.40562%209.47517%209.47517%209.40562%209.54904%209.34085C9.8416%209.08429%2010.2039%208.93992%2010.6134%208.77677C10.6411%208.76572%2010.6691%208.75458%2010.6973%208.74331L10.7476%208.72318C11.8598%208.27828%2012.7603%207.91804%2013.4646%207.73134Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}给 compass-outline 加一点动效
单文件 CSS 即可播放,无需任何依赖;描画动效仅对描边类图标生效。
呼吸
透明度往复渐变,适合状态提示与在线指示。
.icon-compass-outline {
animation: icon-breathe 1.8s ease-in-out infinite;
}
@keyframes icon-breathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}旋转
匀速循环旋转,适合加载中场景。
.icon-compass-outline {
animation: icon-spin 1.6s linear infinite;
}
@keyframes icon-spin {
to { transform: rotate(360deg); }
}SVG 健康报告
对源文件的客观技术指标,供工程侧评估引用方式。
文件体积
2.33 KB
2,387 字节
viewBox
0 0 24 24
矢量坐标系
图元总数
1
<path> ×1
风格
单色(跟随 currentColor)
填充跟随容器颜色
同时含 width/height 与 viewBox:可以只保留 viewBox,让图标跟随容器自适应缩放。 文件体积 2.33 KB(2,387 字节),图元 1 个,风格为单色(跟随 currentColor)。
常见问题
关于 compass-outline 图标的下载、商用与改色。
compass-outline 图标是什么?▾
它是 Solar(solar)开源图标集中的 compass-outline 图标,单色(跟随 currentColor),viewBox 为 0 0 24 24,文件仅 2.33 KB,矢量格式可无损缩放到任意尺寸。
如何下载 compass-outline 图标?▾
点击「下载与导出」中的 SVG 源文件按钮保存矢量文件;也可以按 512 / 256 / 128 / 64 / 32 / 16px 预设导出 PNG,或在输入框填 16~1024 之间的任意尺寸。需要 iOS、Android 全套尺寸时,用素材包生成器一键打包。
compass-outline 图标可以商用吗?▾
该图标采用 CC BY 4.0(CC-BY-4.0) 开源协议,通常允许在遵守协议的前提下免费使用,常见要求是保留作者版权声明。商用前建议阅读协议原文确认。
如何修改 compass-outline 图标的颜色?▾
在「预览与场景」的色板中切换颜色,三底色与全部场景会实时跟随;点击任一相近图标可打开预览弹层,复制对应颜色的 SVG 源码或 PNG。也可以复制 SVG 源码后自行修改 fill 值。