<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 32 32"><g fill="none"><path fill="url(#ilO9IDd)" d="M27 8c-1.65 0-3-1.35-3-3s1.35-3 3-3s3 1.35 3 3s-1.35 3-3 3m0-4.62a1.609 1.609 0 1 0 0 3.22a1.609 1.609 0 1 0 0-3.22"/><path fill="url(#i1Elded)" d="M27 8c-1.65 0-3-1.35-3-3s1.35-3 3-3s3 1.35 3 3s-1.35 3-3 3m0-4.62a1.609 1.609 0 1 0 0 3.22a1.609 1.609 0 1 0 0-3.22"/><path fill="url(#i5P6Y7d)" d="M27 8c-1.65 0-3-1.35-3-3s1.35-3 3-3s3 1.35 3 3s-1.35 3-3 3m0-4.62a1.609 1.609 0 1 0 0 3.22a1.609 1.609 0 1 0 0-3.22"/><path fill="url(#ilkyf0d)" d="M27 8c-1.65 0-3-1.35-3-3s1.35-3 3-3s3 1.35 3 3s-1.35 3-3 3m0-4.62a1.609 1.609 0 1 0 0 3.22a1.609 1.609 0 1 0 0-3.22"/><path fill="url(#iRlLjUd)" d="M27 8c-1.65 0-3-1.35-3-3s1.35-3 3-3s3 1.35 3 3s-1.35 3-3 3m0-4.62a1.609 1.609 0 1 0 0 3.22a1.609 1.609 0 1 0 0-3.22"/><path fill="url(#iaXHY5P)" d="M27 8c-1.65 0-3-1.35-3-3s1.35-3 3-3s3 1.35 3 3s-1.35 3-3 3m0-4.62a1.609 1.609 0 1 0 0 3.22a1.609 1.609 0 1 0 0-3.22"/><g filter="url(#iF4kvPc)"><path fill="url(#iTBlxfG)" d="m25.35 8l-1.36-1.36l1.36-1.36c.37-.37.98-.37 1.36 0c.37.37.37.98 0 1.36z"/></g><g filter="url(#iTIuJ5b)"><path fill="url(#i5v4hBb)" d="M15.5 27.998c6.35 0 11.497-5.148 11.497-11.498S21.85 5.002 15.5 5.002S4.002 10.15 4.002 16.5S9.15 27.997 15.5 27.997"/></g><path fill="url(#iZvFPpb)" fill-rule="evenodd" d="M29 16.5C29 23.956 22.956 30 15.5 30S2 23.956 2 16.5S8.044 3 15.5 3S29 9.044 29 16.5m-2.46 0c0 6.097-4.943 11.04-11.04 11.04S4.46 22.597 4.46 16.5S9.403 5.46 15.5 5.46s11.04 4.943 11.04 11.04" clip-rule="evenodd"/><path fill="url(#izYjMYb)" fill-rule="evenodd" d="M29 16.5C29 23.956 22.956 30 15.5 30S2 23.956 2 16.5S8.044 3 15.5 3S29 9.044 29 16.5m-2.46 0c0 6.097-4.943 11.04-11.04 11.04S4.46 22.597 4.46 16.5S9.403 5.46 15.5 5.46s11.04 4.943 11.04 11.04" clip-rule="evenodd"/><path fill="url(#ilmkMfd)" fill-rule="evenodd" d="M29 16.5C29 23.956 22.956 30 15.5 30S2 23.956 2 16.5S8.044 3 15.5 3S29 9.044 29 16.5m-2.46 0c0 6.097-4.943 11.04-11.04 11.04S4.46 22.597 4.46 16.5S9.403 5.46 15.5 5.46s11.04 4.943 11.04 11.04" clip-rule="evenodd"/><path fill="url(#iYK78Dc)" fill-rule="evenodd" d="M29 16.5C29 23.956 22.956 30 15.5 30S2 23.956 2 16.5S8.044 3 15.5 3S29 9.044 29 16.5m-2.46 0c0 6.097-4.943 11.04-11.04 11.04S4.46 22.597 4.46 16.5S9.403 5.46 15.5 5.46s11.04 4.943 11.04 11.04" clip-rule="evenodd"/><path fill="url(#i8LYYZG)" fill-rule="evenodd" d="M29 16.5C29 23.956 22.956 30 15.5 30S2 23.956 2 16.5S8.044 3 15.5 3S29 9.044 29 16.5m-2.46 0c0 6.097-4.943 11.04-11.04 11.04S4.46 22.597 4.46 16.5S9.403 5.46 15.5 5.46s11.04 4.943 11.04 11.04" clip-rule="evenodd"/><g filter="url(#ilpxZXb)"><path fill="url(#i33k3Jc)" d="m17.08 16.5l-1.29-8.25c-.05-.33-.53-.33-.58 0l-1.29 8.25l1.29 8.25c.05.33.53.33.58 0z"/><path fill="url(#izofGUd)" d="m17.08 16.5l-1.29-8.25c-.05-.33-.53-.33-.58 0l-1.29 8.25l1.29 8.25c.05.33.53.33.58 0z"/></g><path fill="url(#io43TFd)" d="m15.5 18.08l8.25-1.29c.33-.05.33-.53 0-.58l-8.25-1.29l-8.25 1.29c-.33.05-.33.53 0 .58z"/><path fill="url(#i9sjOJb)" d="m15.5 18.08l8.25-1.29c.33-.05.33-.53 0-.58l-8.25-1.29l-8.25 1.29c-.33.05-.33.53 0 .58z"/><path fill="url(#i1LvMqe)" d="m16.29 17.29l3.29-4.51c.18-.24-.12-.54-.37-.37L14.7 15.7l-3.29 4.51c-.18.24.12.54.37.37z"/><path fill="url(#iEJFCRc)" d="m16.29 17.29l3.29-4.51c.18-.24-.12-.54-.37-.37L14.7 15.7l-3.29 4.51c-.18.24.12.54.37.37z"/><path fill="#818cf8" d="m14.7 17.29l4.51 3.29c.24.18.54-.12.37-.37l-3.29-4.51l-4.51-3.29c-.24-.18-.54.12-.37.37z"/><g filter="url(#iNFaCac)"><path fill="url(#it3Wksb)" d="m13.78 18.21l-3.73-6.52c-.23-.41.22-.86.63-.63l6.53 3.72z"/></g><g filter="url(#i8yGHTd)"><path fill="#818cf8" d="m17.21 14.78l3.7 6.51c.23.41-.22.86-.63.63l-6.5-3.71z"/></g><g filter="url(#i1owh6b)"><path fill="url(#iE63K5d)" d="M15.5 18.93a2.43 2.43 0 1 0 0-4.86a2.43 2.43 0 0 0 0 4.86"/></g><g filter="url(#icwoRLd)"><path stroke="url(#i5YuEyO)" stroke-width="1.5" d="M15.778 28.75c-6.813 0-14.25-6.562-11.75-16.125"/></g><g filter="url(#iNJiJid)"><path stroke="url(#isexkJO)" stroke-width="1.5" d="M15.5 3.437c6.813 0 14.997 6.407 12.205 16.859"/></g><g filter="url(#iipF7ic)"><path stroke="url(#itG8Jsd)" stroke-linecap="round" stroke-width="1.5" d="M28.028 2.531a2.51 2.51 0 0 1 1.703 2.375"/></g><defs><radialGradient id="i1Elded" cx="0" cy="0" r="1" gradientTransform="rotate(-32.005 24.07 -39.569)scale(6.76952 6.23488)" gradientUnits="userSpaceOnUse"><stop offset=".712" stop-color="#FFEA6A" stop-opacity="0"/><stop offset=".942" stop-color="#FFEA6A"/></radialGradient><radialGradient id="i5P6Y7d" cx="0" cy="0" r="1" gradientTransform="matrix(1.33678 -1.49194 1.51953 1.3615 27.289 4.814)" gradientUnits="userSpaceOnUse"><stop offset=".614" stop-color="#C0813E"/><stop offset="1" stop-color="#C0813E" stop-opacity="0"/></radialGradient><radialGradient id="ilkyf0d" cx="0" cy="0" r="1" gradientTransform="rotate(134.772 13.214 7.827)scale(4.64777 4.46393)" gradientUnits="userSpaceOnUse"><stop offset=".71" stop-color="#CA7412" stop-opacity="0"/><stop offset="1" stop-color="#CA7412"/></radialGradient><radialGradient id="iRlLjUd" cx="0" cy="0" r="1" gradientTransform="rotate(-112.148 14.513 -4.905)scale(1.40019 3.90267)" gradientUnits="userSpaceOnUse"><stop offset=".073" stop-color="#7C3D03"/><stop offset=".736" stop-color="#7C3D03" stop-opacity="0"/></radialGradient><radialGradient id="iaXHY5P" cx="0" cy="0" r="1" gradientTransform="matrix(.89844 -.06252 .17425 2.50417 25.434 8)" gradientUnits="userSpaceOnUse"><stop offset=".307" stop-color="#7C3D03"/><stop offset=".736" stop-color="#7C3D03" stop-opacity="0"/></radialGradient><radialGradient id="iTBlxfG" cx="0" cy="0" r="1" gradientTransform="rotate(-135.277 14.332 -2.26)scale(1.14354 2.65509)" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE160"/><stop offset=".788" stop-color="#F3B535"/></radialGradient><radialGradient id="i5v4hBb" cx="0" cy="0" r="1" gradientTransform="matrix(17.14236 6.4991 -8.85744 23.36281 5.207 11.695)" gradientUnits="userSpaceOnUse"><stop stop-color="#B5A7B0"/><stop offset="1" stop-color="#DFD2E2"/></radialGradient><radialGradient id="izYjMYb" cx="0" cy="0" r="1" gradientTransform="rotate(-29.785 47.261 3.51)scale(28.2295 22.1446)" gradientUnits="userSpaceOnUse"><stop offset=".873" stop-color="#FFED6A" stop-opacity="0"/><stop offset="1" stop-color="#FFED6A"/></radialGradient><radialGradient id="ilmkMfd" cx="0" cy="0" r="1" gradientTransform="rotate(119.722 6.315 10.533)scale(21.8559 17.2879)" gradientUnits="userSpaceOnUse"><stop offset=".873" stop-color="#B66635" stop-opacity="0"/><stop offset=".975" stop-color="#B66635"/></radialGradient><radialGradient id="iYK78Dc" cx="0" cy="0" r="1" gradientTransform="rotate(-45.843 27.07 -11.069)scale(12.0221 12.6674)" gradientUnits="userSpaceOnUse"><stop offset=".863" stop-color="#B88245"/><stop offset=".939" stop-color="#B88245" stop-opacity="0"/></radialGradient><radialGradient id="i8LYYZG" cx="0" cy="0" r="1" gradientTransform="matrix(-29.8039 0 0 -19.6734 31.051 16.5)" gradientUnits="userSpaceOnUse"><stop offset=".952" stop-color="#F58D49" stop-opacity="0"/><stop offset="1" stop-color="#F58D49"/></radialGradient><radialGradient id="izofGUd" cx="0" cy="0" r="1" gradientTransform="rotate(105.642 .637 14.734)scale(1.21695 2.23861)" gradientUnits="userSpaceOnUse"><stop offset=".325" stop-color="#5F4D63"/><stop offset=".983" stop-color="#5F4D63" stop-opacity="0"/></radialGradient><radialGradient id="i9sjOJb" cx="0" cy="0" r="1" gradientTransform="matrix(-1.45575 .55084 -.52343 -1.38331 14.38 17.031)" gradientUnits="userSpaceOnUse"><stop offset=".573" stop-color="#5F4D63"/><stop offset="1" stop-color="#5F4D63" stop-opacity="0"/></radialGradient><radialGradient id="iEJFCRc" cx="0" cy="0" r="1" gradientTransform="rotate(129.144 2.849 12.306)scale(.87257 1.3323)" gradientUnits="userSpaceOnUse"><stop offset=".459" stop-color="#5F4D63"/><stop offset="1" stop-color="#5F4D63" stop-opacity="0"/></radialGradient><radialGradient id="iE63K5d" cx="0" cy="0" r="1" gradientTransform="matrix(-3.41602 3.1532 -3.28745 -3.56145 17.34 15.336)" gradientUnits="userSpaceOnUse"><stop stop-color="#C0BCBF"/><stop offset="1" stop-color="#856F79"/></radialGradient><linearGradient id="ilO9IDd" x1="25.242" x2="30" y1="7.498" y2="3.042" gradientUnits="userSpaceOnUse"><stop stop-color="#E2881C"/><stop offset="1" stop-color="#F6C942"/></linearGradient><linearGradient id="iZvFPpb" x1="5.59" x2="24.215" y1="25.813" y2="7.187" gradientUnits="userSpaceOnUse"><stop stop-color="#DE8D39"/><stop offset="1" stop-color="#EDC14B"/></linearGradient><linearGradient id="i33k3Jc" x1="15.5" x2="15.5" y1="8.002" y2="24.997" gradientUnits="userSpaceOnUse"><stop stop-color="#B6ACB7"/><stop offset="1" stop-color="#968C98"/></linearGradient><linearGradient id="io43TFd" x1="21.148" x2="8.243" y1="15.93" y2="15.93" gradientUnits="userSpaceOnUse"><stop stop-color="#B6ABB8"/><stop offset="1" stop-color="#988E9A"/></linearGradient><linearGradient id="i1LvMqe" x1="19.635" x2="11.715" y1="12.813" y2="21.188" gradientUnits="userSpaceOnUse"><stop stop-color="#B6ACB8"/><stop offset="1" stop-color="#958B97"/></linearGradient><linearGradient id="it3Wksb" x1="10.454" x2="14.521" y1="11.802" y2="16.548" gradientUnits="userSpaceOnUse"><stop stop-color="#E43465"/><stop offset="1" stop-color="#E6386A"/></linearGradient><linearGradient id="i5YuEyO" x1="2.465" x2="13.715" y1="14.75" y2="28.906" gradientUnits="userSpaceOnUse"><stop stop-color="#FFBD6A" stop-opacity="0"/><stop offset=".516" stop-color="#FFBD6A"/><stop offset="1" stop-color="#FFBD6A" stop-opacity="0"/></linearGradient><linearGradient id="isexkJO" x1="31.362" x2="19.172" y1="18.355" y2="2.055" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE55A" stop-opacity="0"/><stop offset=".315" stop-color="#FFE55A"/><stop offset=".672" stop-color="#FFE55A"/><stop offset="1" stop-color="#FFE55A" stop-opacity="0"/></linearGradient><linearGradient id="itG8Jsd" x1="27.856" x2="29.903" y1="2.531" y2="4.672" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE967" stop-opacity="0"/><stop offset=".464" stop-color="#FFE967"/><stop offset="1" stop-color="#FFE967" stop-opacity="0"/></linearGradient><filter id="iF4kvPc" width="3.148" height="2.998" x="23.99" y="5.002" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".15"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.741176 0 0 0 0 0.537255 0 0 0 0 0.309804 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_4887"/></filter><filter id="iTIuJ5b" width="23.995" height="23.995" x="3.002" y="5.002" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-1" dy="1"/><feGaussianBlur stdDeviation="1.5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.623529 0 0 0 0 0.482353 0 0 0 0 0.537255 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_4887"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.5" dy=".5"/><feGaussianBlur stdDeviation=".5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.556863 0 0 0 0 0.431373 0 0 0 0 0.482353 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_4887" result="effect2_innerShadow_18_4887"/></filter><filter id="ilpxZXb" width="3.21" height="16.995" x="13.92" y="8.002" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".05"/><feGaussianBlur stdDeviation=".05"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.584314 0 0 0 0 0.521569 0 0 0 0 0.576471 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_4887"/></filter><filter id="iNFaCac" width="7.322" height="7.462" x="9.888" y="10.748" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.5"/><feGaussianBlur stdDeviation=".05"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.952941 0 0 0 0 0.239216 0 0 0 0 0.435294 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_4887"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-.5"/><feGaussianBlur stdDeviation=".125"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="effect1_innerShadow_18_4887" result="effect2_innerShadow_18_4887"/></filter><filter id="i8yGHTd" width="7.192" height="7.452" x="13.78" y="14.63" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".5"/><feGaussianBlur stdDeviation=".05"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.47451 0 0 0 0 0.462745 0 0 0 0 0.470588 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_4887"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-.35"/><feGaussianBlur stdDeviation=".075"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="effect1_innerShadow_18_4887" result="effect2_innerShadow_18_4887"/></filter><filter id="i1owh6b" width="5.01" height="5.01" x="13.07" y="13.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".15" dy="-.15"/><feGaussianBlur stdDeviation=".075"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.447059 0 0 0 0 0.368627 0 0 0 0 0.415686 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_4887"/></filter><filter id="icwoRLd" width="13.496" height="17.438" x="2.782" y="12.062" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_4887" stdDeviation=".25"/></filter><filter id="iNJiJid" width="14.641" height="18.83" x="14.75" y="2.313" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_4887" stdDeviation=".375"/></filter><filter id="iipF7ic" width="2.703" height="3.375" x="27.528" y="2.031" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_4887" stdDeviation=".125"/></filter></defs></g></svg>Icons in Action
WEB APPLICATION HEADER & NAVIGATION
my-app.com/dashboard
Dashboard
Analytics
Settings
Overview Dashboard
PROGRESS STEPPER
3
BUTTON UI ACTIONS
SCALABILITY & CLARITY
12px
16px
24px
32px
48px
“
Highly adaptable, clean vectors that scale perfectly across modern UI components, navigation bars, and mobile actions. Perfectly pre-vetted for production deployment.
IconSearch Presets
Frequently Asked Questions
Q.How do I use this icon in my React/Next.js project?
You have two choices: install the official package listed under the "REACT IMPORT" tab (e.g. npm install @iconify/react) and import the icon directly, or copy the complete React Component code from the "STANDALONE JSX" tab and paste it directly into a local file (e.g. CompassIcon.tsx) to avoid installing any npm packages.
Q.Is this icon free for commercial use?
Yes. This icon is published under the open-source **MIT** license. The license grants full permissions for personal and commercial usage (e.g., in SaaS platforms, client projects, or business landing pages). Attributing the icon creator is generally not required for MIT/ISC licenses, but check details on our dedicated License Guide.
Q.What is the "Download SVG without fill color" toggle?
Many SVGs ship with inline fill="..." attributes. By checking this toggle, we strip these attributes and enforce fill="none", making the SVG fully styleable via CSS classes or Tailwind utility classes like fill-current.