compass rose icon
compass-rose-thin from Phosphor by Phosphor Icons · Thin · MIT Free for personal and commercial use.
- Name
- compass-rose-thin
- Set
- Phosphor
- Style
- Thin
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
The same icon in other sets
Related icons in Phosphor
Use the compass rose icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m249 124.12l-29.68-7.42a91.84 91.84 0 0 0-80-80L131.88 7a4 4 0 0 0-7.76 0l-7.42 29.71a91.84 91.84 0 0 0-80 80L7 124.12a4 4 0 0 0 0 7.76l29.68 7.42a91.84 91.84 0 0 0 80 80l7.44 29.7a4 4 0 0 0 7.76 0l7.42-29.68a91.84 91.84 0 0 0 80-80l29.7-7.44a4 4 0 0 0 0-7.76m-38.05-9.51L155.3 100.7l-13.91-55.62a83.85 83.85 0 0 1 69.53 69.53ZM128 24.49l19.57 78.28L128 122.34l-19.57-19.57Zm-13.39 20.59L100.7 100.7l-55.62 13.91a83.85 83.85 0 0 1 69.53-69.53m-11.84 63.35L122.34 128l-19.57 19.57L24.49 128Zm-57.69 33l55.62 13.87l13.91 55.62a83.85 83.85 0 0 1-69.53-69.53ZM128 231.51l-19.57-78.28L128 133.66l19.57 19.57Zm13.39-20.59l13.91-55.62l55.62-13.91a83.85 83.85 0 0 1-69.53 69.53m11.84-63.35L133.66 128l19.57-19.57L231.51 128Z"/></svg>
React
import type { SVGProps } from "react";
export function PhCompassRoseThin(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m249 124.12l-29.68-7.42a91.84 91.84 0 0 0-80-80L131.88 7a4 4 0 0 0-7.76 0l-7.42 29.71a91.84 91.84 0 0 0-80 80L7 124.12a4 4 0 0 0 0 7.76l29.68 7.42a91.84 91.84 0 0 0 80 80l7.44 29.7a4 4 0 0 0 7.76 0l7.42-29.68a91.84 91.84 0 0 0 80-80l29.7-7.44a4 4 0 0 0 0-7.76m-38.05-9.51L155.3 100.7l-13.91-55.62a83.85 83.85 0 0 1 69.53 69.53ZM128 24.49l19.57 78.28L128 122.34l-19.57-19.57Zm-13.39 20.59L100.7 100.7l-55.62 13.91a83.85 83.85 0 0 1 69.53-69.53m-11.84 63.35L122.34 128l-19.57 19.57L24.49 128Zm-57.69 33l55.62 13.87l13.91 55.62a83.85 83.85 0 0 1-69.53-69.53ZM128 231.51l-19.57-78.28L128 133.66l19.57 19.57Zm13.39-20.59l13.91-55.62l55.62-13.91a83.85 83.85 0 0 1-69.53 69.53m11.84-63.35L133.66 128l19.57-19.57L231.51 128Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="m249 124.12l-29.68-7.42a91.84 91.84 0 0 0-80-80L131.88 7a4 4 0 0 0-7.76 0l-7.42 29.71a91.84 91.84 0 0 0-80 80L7 124.12a4 4 0 0 0 0 7.76l29.68 7.42a91.84 91.84 0 0 0 80 80l7.44 29.7a4 4 0 0 0 7.76 0l7.42-29.68a91.84 91.84 0 0 0 80-80l29.7-7.44a4 4 0 0 0 0-7.76m-38.05-9.51L155.3 100.7l-13.91-55.62a83.85 83.85 0 0 1 69.53 69.53ZM128 24.49l19.57 78.28L128 122.34l-19.57-19.57Zm-13.39 20.59L100.7 100.7l-55.62 13.91a83.85 83.85 0 0 1 69.53-69.53m-11.84 63.35L122.34 128l-19.57 19.57L24.49 128Zm-57.69 33l55.62 13.87l13.91 55.62a83.85 83.85 0 0 1-69.53-69.53ZM128 231.51l-19.57-78.28L128 133.66l19.57 19.57Zm13.39-20.59l13.91-55.62l55.62-13.91a83.85 83.85 0 0 1-69.53 69.53m11.84-63.35L133.66 128l19.57-19.57L231.51 128Z"/></svg> </template>
CSS
.icon-compass-rose-thin {
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%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m249%20124.12l-29.68-7.42a91.84%2091.84%200%200%200-80-80L131.88%207a4%204%200%200%200-7.76%200l-7.42%2029.71a91.84%2091.84%200%200%200-80%2080L7%20124.12a4%204%200%200%200%200%207.76l29.68%207.42a91.84%2091.84%200%200%200%2080%2080l7.44%2029.7a4%204%200%200%200%207.76%200l7.42-29.68a91.84%2091.84%200%200%200%2080-80l29.7-7.44a4%204%200%200%200%200-7.76m-38.05-9.51L155.3%20100.7l-13.91-55.62a83.85%2083.85%200%200%201%2069.53%2069.53ZM128%2024.49l19.57%2078.28L128%20122.34l-19.57-19.57Zm-13.39%2020.59L100.7%20100.7l-55.62%2013.91a83.85%2083.85%200%200%201%2069.53-69.53m-11.84%2063.35L122.34%20128l-19.57%2019.57L24.49%20128Zm-57.69%2033l55.62%2013.87l13.91%2055.62a83.85%2083.85%200%200%201-69.53-69.53ZM128%20231.51l-19.57-78.28L128%20133.66l19.57%2019.57Zm13.39-20.59l13.91-55.62l55.62-13.91a83.85%2083.85%200%200%201-69.53%2069.53m11.84-63.35L133.66%20128l19.57-19.57L231.51%20128Z%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22m249%20124.12l-29.68-7.42a91.84%2091.84%200%200%200-80-80L131.88%207a4%204%200%200%200-7.76%200l-7.42%2029.71a91.84%2091.84%200%200%200-80%2080L7%20124.12a4%204%200%200%200%200%207.76l29.68%207.42a91.84%2091.84%200%200%200%2080%2080l7.44%2029.7a4%204%200%200%200%207.76%200l7.42-29.68a91.84%2091.84%200%200%200%2080-80l29.7-7.44a4%204%200%200%200%200-7.76m-38.05-9.51L155.3%20100.7l-13.91-55.62a83.85%2083.85%200%200%201%2069.53%2069.53ZM128%2024.49l19.57%2078.28L128%20122.34l-19.57-19.57Zm-13.39%2020.59L100.7%20100.7l-55.62%2013.91a83.85%2083.85%200%200%201%2069.53-69.53m-11.84%2063.35L122.34%20128l-19.57%2019.57L24.49%20128Zm-57.69%2033l55.62%2013.87l13.91%2055.62a83.85%2083.85%200%200%201-69.53-69.53ZM128%20231.51l-19.57-78.28L128%20133.66l19.57%2019.57Zm13.39-20.59l13.91-55.62l55.62-13.91a83.85%2083.85%200%200%201-69.53%2069.53m11.84-63.35L133.66%20128l19.57-19.57L231.51%20128Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/compass-rose-thin.svg?color=%231a73e8&size=48
