compass logo
compass from SVG Logos by Gil Barbara · Color · CC0-1.0 Free for personal and commercial use.
- Name
- compass
- Set
- SVG Logos
- Style
- Color
- Viewbox
- 256×256
- License
- CC0
The same logo in other sets
compass-filledAnt Design IconscompassBootstrap IconscompassBoxIcons v2compassBoxIcons v2 SolidcompassCarboncompassCodiconscompassElement Pluscompass-fillEva IconscompassFramework7 IconscompassFont Awesome 6 RegularcompassFont Awesome 6 SolidcompassFont Awesome RegularcompassFont Awesome SolidcompassFeather IconscompassFluent EmojicompassFluent Emoji FlatcompassFluent Emoji High ContrastcompassHuge IconscompassIconParkcompassIconPark OutlinecompassIconPark SolidcompassIconPark TwoTonecompassIconoircompassIonIcons
Use the compass logo
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><defs><path id="SVGQqsuGbWs" d="M255.774 0c-3.374 68.465-13.363 131.709-40.03 191.254c-20.467 45.706-67.265 69.496-120.04 62.802c-43.38-5.502-83.16-42.607-92.844-86.6c-10.806-49.09 9.47-100.444 53.017-122.797C117.348 13.104 184.551 4.125 255.774 0"/></defs><mask id="SVG0vHdfbjo" fill="#fff"><use href="#SVGQqsuGbWs"/></mask><use fill="#fff" href="#SVGQqsuGbWs"/><g mask="url(#SVG0vHdfbjo)"><path fill="#e21708" d="M113.79 76.094s-5.894 32.657-8.24 49.203c-11.936-9.303-35.559-26.23-35.559-26.23s18.533 24.924 27.284 36.056c-16.625 1.884-49.951 7.073-49.951 7.073s34.083 5.482 49.956 7.317c-9.206 11.657-27.374 35.291-27.374 35.291s24.681-17.048 35.771-25.593c2.263 15.86 8.112 49.638 8.112 49.638s5.35-33.75 7.384-50.199c10.965 8.546 34.115 26.396 34.115 26.396s-16.128-24.142-24.959-35.544c16.042-1.884 48.637-7.306 48.637-7.306s-32.913-5.241-48.52-7.046c8.077-10.947 24.997-36.095 24.997-36.095s-23.71 18.388-34.29 26.856c-1.958-16.342-7.364-49.817-7.364-49.817M255.8.46c-3.374 68.465-13.363 131.709-40.03 191.255c-20.468 45.705-67.265 69.495-120.04 62.801c-43.38-5.501-83.16-42.606-92.844-86.6c-10.806-49.09 9.47-100.444 53.017-122.797C117.374 13.566 184.577 4.587 255.8.461"/><path fill="#fa524a" fill-opacity=".3" d="M6.195 103.901c3.892-11.462 9.58-22.166 16.937-31.596c2.778-3.42 5.865-6.837 9.296-10.36a98 98 0 0 1 9.643-8.215c3.125-2.28 6.569-4.52 10.265-6.7a98 98 0 0 1 3.567-1.924c14.884-7.64 30.1-13.956 45.633-19.2C141.8 12.31 184.158 5.915 228.179 2.345C239.039 1.518 248.439.973 255.8.46C180.864 16.623 141.051 32.526 92.565 53.73S2.687 121 .493 134.19c1.29-11.934 3.101-21.743 5.702-30.289"/><path fill="#ae0e10" fill-opacity=".3" d="M97.011 259.082a110 110 0 0 1-14.533-2.836c-18.214-5.252-37.246-16.484-52.433-32.87c-13.227-14.42-22.987-32.097-27.16-51.051a122 122 0 0 1-2.858-26.637c.544 79.974 93.994 92.336 118.985 92.336c39.67.001 39.175-7.9 100.79-51.235a380 380 0 0 1-4.032 9.335c-14.427 32.217-41.942 53.545-75.407 60.983c-8.783 1.945-17.868 2.933-27.225 2.933a138 138 0 0 1-16.127-.958"/></g></svg>
React
import type { SVGProps } from "react";
export function LogosCompass(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><defs><path id="SVGQqsuGbWs" d="M255.774 0c-3.374 68.465-13.363 131.709-40.03 191.254c-20.467 45.706-67.265 69.496-120.04 62.802c-43.38-5.502-83.16-42.607-92.844-86.6c-10.806-49.09 9.47-100.444 53.017-122.797C117.348 13.104 184.551 4.125 255.774 0"/></defs><mask id="SVG0vHdfbjo" fill="#fff"><use href="#SVGQqsuGbWs"/></mask><use fill="#fff" href="#SVGQqsuGbWs"/><g mask="url(#SVG0vHdfbjo)"><path fill="#e21708" d="M113.79 76.094s-5.894 32.657-8.24 49.203c-11.936-9.303-35.559-26.23-35.559-26.23s18.533 24.924 27.284 36.056c-16.625 1.884-49.951 7.073-49.951 7.073s34.083 5.482 49.956 7.317c-9.206 11.657-27.374 35.291-27.374 35.291s24.681-17.048 35.771-25.593c2.263 15.86 8.112 49.638 8.112 49.638s5.35-33.75 7.384-50.199c10.965 8.546 34.115 26.396 34.115 26.396s-16.128-24.142-24.959-35.544c16.042-1.884 48.637-7.306 48.637-7.306s-32.913-5.241-48.52-7.046c8.077-10.947 24.997-36.095 24.997-36.095s-23.71 18.388-34.29 26.856c-1.958-16.342-7.364-49.817-7.364-49.817M255.8.46c-3.374 68.465-13.363 131.709-40.03 191.255c-20.468 45.705-67.265 69.495-120.04 62.801c-43.38-5.501-83.16-42.606-92.844-86.6c-10.806-49.09 9.47-100.444 53.017-122.797C117.374 13.566 184.577 4.587 255.8.461"/><path fill="#fa524a" fillOpacity=".3" d="M6.195 103.901c3.892-11.462 9.58-22.166 16.937-31.596c2.778-3.42 5.865-6.837 9.296-10.36a98 98 0 0 1 9.643-8.215c3.125-2.28 6.569-4.52 10.265-6.7a98 98 0 0 1 3.567-1.924c14.884-7.64 30.1-13.956 45.633-19.2C141.8 12.31 184.158 5.915 228.179 2.345C239.039 1.518 248.439.973 255.8.46C180.864 16.623 141.051 32.526 92.565 53.73S2.687 121 .493 134.19c1.29-11.934 3.101-21.743 5.702-30.289"/><path fill="#ae0e10" fillOpacity=".3" d="M97.011 259.082a110 110 0 0 1-14.533-2.836c-18.214-5.252-37.246-16.484-52.433-32.87c-13.227-14.42-22.987-32.097-27.16-51.051a122 122 0 0 1-2.858-26.637c.544 79.974 93.994 92.336 118.985 92.336c39.67.001 39.175-7.9 100.79-51.235a380 380 0 0 1-4.032 9.335c-14.427 32.217-41.942 53.545-75.407 60.983c-8.783 1.945-17.868 2.933-27.225 2.933a138 138 0 0 1-16.127-.958"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><defs><path id="SVGQqsuGbWs" d="M255.774 0c-3.374 68.465-13.363 131.709-40.03 191.254c-20.467 45.706-67.265 69.496-120.04 62.802c-43.38-5.502-83.16-42.607-92.844-86.6c-10.806-49.09 9.47-100.444 53.017-122.797C117.348 13.104 184.551 4.125 255.774 0"/></defs><mask id="SVG0vHdfbjo" fill="#fff"><use href="#SVGQqsuGbWs"/></mask><use fill="#fff" href="#SVGQqsuGbWs"/><g mask="url(#SVG0vHdfbjo)"><path fill="#e21708" d="M113.79 76.094s-5.894 32.657-8.24 49.203c-11.936-9.303-35.559-26.23-35.559-26.23s18.533 24.924 27.284 36.056c-16.625 1.884-49.951 7.073-49.951 7.073s34.083 5.482 49.956 7.317c-9.206 11.657-27.374 35.291-27.374 35.291s24.681-17.048 35.771-25.593c2.263 15.86 8.112 49.638 8.112 49.638s5.35-33.75 7.384-50.199c10.965 8.546 34.115 26.396 34.115 26.396s-16.128-24.142-24.959-35.544c16.042-1.884 48.637-7.306 48.637-7.306s-32.913-5.241-48.52-7.046c8.077-10.947 24.997-36.095 24.997-36.095s-23.71 18.388-34.29 26.856c-1.958-16.342-7.364-49.817-7.364-49.817M255.8.46c-3.374 68.465-13.363 131.709-40.03 191.255c-20.468 45.705-67.265 69.495-120.04 62.801c-43.38-5.501-83.16-42.606-92.844-86.6c-10.806-49.09 9.47-100.444 53.017-122.797C117.374 13.566 184.577 4.587 255.8.461"/><path fill="#fa524a" fill-opacity=".3" d="M6.195 103.901c3.892-11.462 9.58-22.166 16.937-31.596c2.778-3.42 5.865-6.837 9.296-10.36a98 98 0 0 1 9.643-8.215c3.125-2.28 6.569-4.52 10.265-6.7a98 98 0 0 1 3.567-1.924c14.884-7.64 30.1-13.956 45.633-19.2C141.8 12.31 184.158 5.915 228.179 2.345C239.039 1.518 248.439.973 255.8.46C180.864 16.623 141.051 32.526 92.565 53.73S2.687 121 .493 134.19c1.29-11.934 3.101-21.743 5.702-30.289"/><path fill="#ae0e10" fill-opacity=".3" d="M97.011 259.082a110 110 0 0 1-14.533-2.836c-18.214-5.252-37.246-16.484-52.433-32.87c-13.227-14.42-22.987-32.097-27.16-51.051a122 122 0 0 1-2.858-26.637c.544 79.974 93.994 92.336 118.985 92.336c39.67.001 39.175-7.9 100.79-51.235a380 380 0 0 1-4.032 9.335c-14.427 32.217-41.942 53.545-75.407 60.983c-8.783 1.945-17.868 2.933-27.225 2.933a138 138 0 0 1-16.127-.958"/></g></svg> </template>
CSS
.icon-compass {
width: 24px;
height: 24px;
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%20256%20256%22%3E%3Cdefs%3E%3Cpath%20id%3D%22SVGQqsuGbWs%22%20d%3D%22M255.774%200c-3.374%2068.465-13.363%20131.709-40.03%20191.254c-20.467%2045.706-67.265%2069.496-120.04%2062.802c-43.38-5.502-83.16-42.607-92.844-86.6c-10.806-49.09%209.47-100.444%2053.017-122.797C117.348%2013.104%20184.551%204.125%20255.774%200%22%2F%3E%3C%2Fdefs%3E%3Cmask%20id%3D%22SVG0vHdfbjo%22%20fill%3D%22%23fff%22%3E%3Cuse%20href%3D%22%23SVGQqsuGbWs%22%2F%3E%3C%2Fmask%3E%3Cuse%20fill%3D%22%23fff%22%20href%3D%22%23SVGQqsuGbWs%22%2F%3E%3Cg%20mask%3D%22url(%23SVG0vHdfbjo)%22%3E%3Cpath%20fill%3D%22%23e21708%22%20d%3D%22M113.79%2076.094s-5.894%2032.657-8.24%2049.203c-11.936-9.303-35.559-26.23-35.559-26.23s18.533%2024.924%2027.284%2036.056c-16.625%201.884-49.951%207.073-49.951%207.073s34.083%205.482%2049.956%207.317c-9.206%2011.657-27.374%2035.291-27.374%2035.291s24.681-17.048%2035.771-25.593c2.263%2015.86%208.112%2049.638%208.112%2049.638s5.35-33.75%207.384-50.199c10.965%208.546%2034.115%2026.396%2034.115%2026.396s-16.128-24.142-24.959-35.544c16.042-1.884%2048.637-7.306%2048.637-7.306s-32.913-5.241-48.52-7.046c8.077-10.947%2024.997-36.095%2024.997-36.095s-23.71%2018.388-34.29%2026.856c-1.958-16.342-7.364-49.817-7.364-49.817M255.8.46c-3.374%2068.465-13.363%20131.709-40.03%20191.255c-20.468%2045.705-67.265%2069.495-120.04%2062.801c-43.38-5.501-83.16-42.606-92.844-86.6c-10.806-49.09%209.47-100.444%2053.017-122.797C117.374%2013.566%20184.577%204.587%20255.8.461%22%2F%3E%3Cpath%20fill%3D%22%23fa524a%22%20fill-opacity%3D%22.3%22%20d%3D%22M6.195%20103.901c3.892-11.462%209.58-22.166%2016.937-31.596c2.778-3.42%205.865-6.837%209.296-10.36a98%2098%200%200%201%209.643-8.215c3.125-2.28%206.569-4.52%2010.265-6.7a98%2098%200%200%201%203.567-1.924c14.884-7.64%2030.1-13.956%2045.633-19.2C141.8%2012.31%20184.158%205.915%20228.179%202.345C239.039%201.518%20248.439.973%20255.8.46C180.864%2016.623%20141.051%2032.526%2092.565%2053.73S2.687%20121%20.493%20134.19c1.29-11.934%203.101-21.743%205.702-30.289%22%2F%3E%3Cpath%20fill%3D%22%23ae0e10%22%20fill-opacity%3D%22.3%22%20d%3D%22M97.011%20259.082a110%20110%200%200%201-14.533-2.836c-18.214-5.252-37.246-16.484-52.433-32.87c-13.227-14.42-22.987-32.097-27.16-51.051a122%20122%200%200%201-2.858-26.637c.544%2079.974%2093.994%2092.336%20118.985%2092.336c39.67.001%2039.175-7.9%20100.79-51.235a380%20380%200%200%201-4.032%209.335c-14.427%2032.217-41.942%2053.545-75.407%2060.983c-8.783%201.945-17.868%202.933-27.225%202.933a138%20138%200%200%201-16.127-.958%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%20256%20256%22%3E%3Cdefs%3E%3Cpath%20id%3D%22SVGQqsuGbWs%22%20d%3D%22M255.774%200c-3.374%2068.465-13.363%20131.709-40.03%20191.254c-20.467%2045.706-67.265%2069.496-120.04%2062.802c-43.38-5.502-83.16-42.607-92.844-86.6c-10.806-49.09%209.47-100.444%2053.017-122.797C117.348%2013.104%20184.551%204.125%20255.774%200%22%2F%3E%3C%2Fdefs%3E%3Cmask%20id%3D%22SVG0vHdfbjo%22%20fill%3D%22%23fff%22%3E%3Cuse%20href%3D%22%23SVGQqsuGbWs%22%2F%3E%3C%2Fmask%3E%3Cuse%20fill%3D%22%23fff%22%20href%3D%22%23SVGQqsuGbWs%22%2F%3E%3Cg%20mask%3D%22url(%23SVG0vHdfbjo)%22%3E%3Cpath%20fill%3D%22%23e21708%22%20d%3D%22M113.79%2076.094s-5.894%2032.657-8.24%2049.203c-11.936-9.303-35.559-26.23-35.559-26.23s18.533%2024.924%2027.284%2036.056c-16.625%201.884-49.951%207.073-49.951%207.073s34.083%205.482%2049.956%207.317c-9.206%2011.657-27.374%2035.291-27.374%2035.291s24.681-17.048%2035.771-25.593c2.263%2015.86%208.112%2049.638%208.112%2049.638s5.35-33.75%207.384-50.199c10.965%208.546%2034.115%2026.396%2034.115%2026.396s-16.128-24.142-24.959-35.544c16.042-1.884%2048.637-7.306%2048.637-7.306s-32.913-5.241-48.52-7.046c8.077-10.947%2024.997-36.095%2024.997-36.095s-23.71%2018.388-34.29%2026.856c-1.958-16.342-7.364-49.817-7.364-49.817M255.8.46c-3.374%2068.465-13.363%20131.709-40.03%20191.255c-20.468%2045.705-67.265%2069.495-120.04%2062.801c-43.38-5.501-83.16-42.606-92.844-86.6c-10.806-49.09%209.47-100.444%2053.017-122.797C117.374%2013.566%20184.577%204.587%20255.8.461%22%2F%3E%3Cpath%20fill%3D%22%23fa524a%22%20fill-opacity%3D%22.3%22%20d%3D%22M6.195%20103.901c3.892-11.462%209.58-22.166%2016.937-31.596c2.778-3.42%205.865-6.837%209.296-10.36a98%2098%200%200%201%209.643-8.215c3.125-2.28%206.569-4.52%2010.265-6.7a98%2098%200%200%201%203.567-1.924c14.884-7.64%2030.1-13.956%2045.633-19.2C141.8%2012.31%20184.158%205.915%20228.179%202.345C239.039%201.518%20248.439.973%20255.8.46C180.864%2016.623%20141.051%2032.526%2092.565%2053.73S2.687%20121%20.493%20134.19c1.29-11.934%203.101-21.743%205.702-30.289%22%2F%3E%3Cpath%20fill%3D%22%23ae0e10%22%20fill-opacity%3D%22.3%22%20d%3D%22M97.011%20259.082a110%20110%200%200%201-14.533-2.836c-18.214-5.252-37.246-16.484-52.433-32.87c-13.227-14.42-22.987-32.097-27.16-51.051a122%20122%200%200%201-2.858-26.637c.544%2079.974%2093.994%2092.336%20118.985%2092.336c39.67.001%2039.175-7.9%20100.79-51.235a380%20380%200%200%201-4.032%209.335c-14.427%2032.217-41.942%2053.545-75.407%2060.983c-8.783%201.945-17.868%202.933-27.225%202.933a138%20138%200%200%201-16.127-.958%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/logos/compass.svg?color=%231a73e8&size=48
