Add icons to this collection by clicking the heart icon.
Compass icon - also known as direction, location, compass, orientation, Tools and utensils, cardinal points, and maps and location. Created in a clean gradient style with a white, silver, gray, navy, and pink finish, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.
<svg
xmlns="http://www.w3.org/2000/svg"
width="512"
height="512"
viewBox="0 0 502 502"
>
<linearGradient
id="b"
x1="251"
x2="251"
y1="158.671"
y2=".473"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#f4d952" />
<stop offset="1" stop-color="#f9edaf" />
</linearGradient>
<linearGradient
id="c"
x1="40.119"
x2="414.807"
y1="322.963"
y2="322.963"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ac6c58" />
<stop offset="1" stop-color="#da9b8c" />
</linearGradient>
<linearGradient
id="d"
x1="105.391"
x2="373.099"
y1="322.963"
y2="322.963"
gradientTransform="rotate(-90 251 322.963)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#d4dbdb" />
<stop offset="1" stop-color="#f3f3f3" />
</linearGradient>
<linearGradient
id="e"
x1="251"
x2="251"
y1="382.36"
y2="270.035"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#74d2e8" />
<stop offset="1" stop-color="#baeaf5" />
</linearGradient>
<linearGradient
id="f"
x1="265.393"
x2="265.393"
y1="349.517"
y2="247.289"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ec6f80" />
<stop offset="1" stop-color="#eca0aa" />
</linearGradient>
<linearGradient id="a">
<stop offset="0" stop-color="#4e5660" />
<stop offset="1" stop-color="#64768d" />
</linearGradient>
<linearGradient
id="g"
x1="251"
x2="251"
y1="182.287"
y2="221.646"
gradientTransform="rotate(-90 251 322.963)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="h"
x1="251"
x2="251"
y1="182.287"
y2="221.646"
gradientTransform="rotate(180 251 322.963)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="i"
x1="251"
x2="251"
y1="182.287"
y2="221.646"
gradientTransform="rotate(90 251 322.963)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<path
fill="url(#b)"
d="M251 202.1c-55.72 0-101.051-45.331-101.051-101.05S195.28 0 251 0s101.05 45.331 101.05 101.05c0 55.72-45.33 101.05-101.05 101.05zm0-147.107c-25.396 0-46.057 20.661-46.057 46.057s20.661 46.057 46.057 46.057 46.057-20.661 46.057-46.057S276.396 54.993 251 54.993z"
/>
<circle cx="251" cy="322.963" r="179.037" fill="url(#c)" />
<circle cx="251" cy="322.963" r="128.673" fill="url(#d)" />
<path
fill="#c2c8cf"
d="M287.569 377.312c-3.515-7.396-12.17-10.764-19.772-7.72a53.55 53.55 0 0 1-5.703 1.919l-52.241 14.36c-4.04 1.11-7.978.748-11.397-.667-5.376-2.225-11.523-1.404-15.851 2.485-8.666 7.789-6.237 22.075 4.6 26.357 9.84 3.889 17.935 3.492 17.876 3.478 4.366 0 8.736-.593 12.989-1.762l52.242-14.359a83.02 83.02 0 0 0 9.107-3.081c8.256-3.338 11.973-12.967 8.15-21.01z"
/>
<path
fill="url(#e)"
d="m292.147 260.056-52.241 14.36a53.567 53.567 0 0 0-37.453 37.453l-14.36 52.241c-3.639 13.237 8.523 25.399 21.76 21.76l52.241-14.36a53.567 53.567 0 0 0 37.453-37.453l14.36-52.241c3.638-13.237-8.523-25.398-21.76-21.76z"
/>
<path
fill="url(#f)"
d="M313.907 281.816c3.639-13.237-8.523-25.399-21.76-21.76l-52.241 14.36a53.532 53.532 0 0 0-23.679 13.773l69.548 69.548a53.522 53.522 0 0 0 13.773-23.679z"
/>
<path
fill="url(#g)"
d="M122.327 322.963c0 7.921.72 15.673 2.09 23.198 16.325-.369 29.415-10.609 29.415-23.198 0-12.588-13.089-22.829-29.415-23.198a129.439 129.439 0 0 0-2.09 23.198z"
/>
<path
fill="url(#h)"
d="M251 451.637c7.921 0 15.672-.72 23.198-2.09-.369-16.326-10.609-29.415-23.198-29.415-12.588 0-22.829 13.089-23.198 29.415a129.514 129.514 0 0 0 23.198 2.09z"
/>
<path
fill="url(#i)"
d="M379.673 322.963c0-7.921-.72-15.673-2.09-23.198-16.325.369-29.415 10.609-29.415 23.198 0 12.588 13.089 22.829 29.415 23.198a129.422 129.422 0 0 0 2.09-23.198z"
/>
<path
fill="#e05d6f"
d="M268.688 316.775a11.468 11.468 0 0 1-8.132-3.368c-4.491-4.491-4.491-11.772 0-16.264l15.886-15.886c4.492-4.49 11.772-4.49 16.264 0 4.491 4.491 4.491 11.772 0 16.264l-15.886 15.886a11.47 11.47 0 0 1-8.132 3.368z"
/>
<path
fill="#17c5d9"
d="M217.427 368.036a11.468 11.468 0 0 1-8.132-3.368c-4.491-4.491-4.491-11.772 0-16.264l15.886-15.886c4.491-4.49 11.772-4.49 16.264 0 4.491 4.491 4.491 11.772 0 16.264l-15.886 15.886a11.468 11.468 0 0 1-8.132 3.368z"
/>
<ellipse cx="163.184" cy="238.501" fill="#eaadcd" rx="14.925" ry="11.994" />
<ellipse cx="338.816" cy="238.501" fill="#eaadcd" rx="14.925" ry="11.994" />
<circle
cx="313.229"
cy="208.945"
r="29.557"
fill="#fff"
transform="rotate(-81.43 313.314 208.887)"
/>
<path
fill="#3b3b44"
d="M295.658 210.392c.755 9.046 8.331 16.153 17.571 16.153 9.241 0 16.817-7.108 17.572-16.153z"
/>
<path
fill="#a86455"
d="M313.229 179.388c-16.324 0-29.557 13.233-29.557 29.557 0 .486.014.968.037 1.447h59.04c.023-.48.037-.962.037-1.447 0-16.324-13.233-29.557-29.557-29.557z"
/>
<circle
cx="188.771"
cy="208.945"
r="29.557"
fill="#fff"
transform="rotate(-80.68 188.841 208.909)"
/>
<path
fill="#3b3b44"
d="M171.199 210.392c.755 9.046 8.331 16.153 17.572 16.153s16.817-7.108 17.572-16.153z"
/>
<path
fill="#a86455"
d="M188.771 179.388c-16.324 0-29.557 13.233-29.557 29.557 0 .486.014.968.037 1.447h59.04c.023-.48.037-.962.037-1.447 0-16.324-13.234-29.557-29.557-29.557z"
/>
<path
fill="#3b3b44"
d="M262.365 241.95a7.478 7.478 0 0 1-5.098-2c-3.748-3.477-8.786-3.476-12.535 0a7.502 7.502 0 0 1-10.599-.4 7.502 7.502 0 0 1 .4-10.6c9.542-8.845 23.392-8.847 32.934 0a7.5 7.5 0 0 1-5.102 13z"
/>
<g fill="#fffde3">
<path
d="M327.506 89.39c-4.363 0-8.374-2.878-9.618-7.284a68.999 68.999 0 0 0-10.229-21.313c-3.203-4.499-2.152-10.743 2.347-13.946 4.501-3.203 10.743-2.151 13.946 2.347a88.958 88.958 0 0 1 13.183 27.476c1.502 5.315-1.59 10.841-6.904 12.342a10.1 10.1 0 0 1-2.725.378zM285.057 39.2a9.96 9.96 0 0 1-4.281-.968 69.586 69.586 0 0 0-7.444-3.018c-5.23-1.773-8.033-7.451-6.26-12.682 1.772-5.23 7.449-8.033 12.682-6.26a89.486 89.486 0 0 1 9.599 3.891c4.989 2.368 7.114 8.333 4.746 13.322a10.003 10.003 0 0 1-9.042 5.715z"
/>
</g>
</svg>
More icons in the same style and category