orange icon
orange-thin from Phosphor by Phosphor Icons · Thin · MIT Free for personal and commercial use.
- Name
- orange-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 orange icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M155.62 72.69A60.09 60.09 0 0 0 196 16a4 4 0 0 0-4-4h-8a60.09 60.09 0 0 0-56 38.5A60.09 60.09 0 0 0 72 12h-8a4 4 0 0 0 0 8h8a52.06 52.06 0 0 1 51.84 48.11a84 84 0 1 0 31.78 4.58M184 20h3.85A52.07 52.07 0 0 1 136 68h-3.85A52.07 52.07 0 0 1 184 20m-56 208a76 76 0 1 1 76-76a76.08 76.08 0 0 1-76 76m51.94-67.34A53.45 53.45 0 0 1 136.66 204a5 5 0 0 1-.66.05a4 4 0 0 1-.66-7.95a45.33 45.33 0 0 0 36.72-36.71a4 4 0 1 1 7.88 1.32Z"/></svg>
React
import type { SVGProps } from "react";
export function PhOrangeThin(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="M155.62 72.69A60.09 60.09 0 0 0 196 16a4 4 0 0 0-4-4h-8a60.09 60.09 0 0 0-56 38.5A60.09 60.09 0 0 0 72 12h-8a4 4 0 0 0 0 8h8a52.06 52.06 0 0 1 51.84 48.11a84 84 0 1 0 31.78 4.58M184 20h3.85A52.07 52.07 0 0 1 136 68h-3.85A52.07 52.07 0 0 1 184 20m-56 208a76 76 0 1 1 76-76a76.08 76.08 0 0 1-76 76m51.94-67.34A53.45 53.45 0 0 1 136.66 204a5 5 0 0 1-.66.05a4 4 0 0 1-.66-7.95a45.33 45.33 0 0 0 36.72-36.71a4 4 0 1 1 7.88 1.32Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M155.62 72.69A60.09 60.09 0 0 0 196 16a4 4 0 0 0-4-4h-8a60.09 60.09 0 0 0-56 38.5A60.09 60.09 0 0 0 72 12h-8a4 4 0 0 0 0 8h8a52.06 52.06 0 0 1 51.84 48.11a84 84 0 1 0 31.78 4.58M184 20h3.85A52.07 52.07 0 0 1 136 68h-3.85A52.07 52.07 0 0 1 184 20m-56 208a76 76 0 1 1 76-76a76.08 76.08 0 0 1-76 76m51.94-67.34A53.45 53.45 0 0 1 136.66 204a5 5 0 0 1-.66.05a4 4 0 0 1-.66-7.95a45.33 45.33 0 0 0 36.72-36.71a4 4 0 1 1 7.88 1.32Z"/></svg> </template>
CSS
.icon-orange-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%22M155.62%2072.69A60.09%2060.09%200%200%200%20196%2016a4%204%200%200%200-4-4h-8a60.09%2060.09%200%200%200-56%2038.5A60.09%2060.09%200%200%200%2072%2012h-8a4%204%200%200%200%200%208h8a52.06%2052.06%200%200%201%2051.84%2048.11a84%2084%200%201%200%2031.78%204.58M184%2020h3.85A52.07%2052.07%200%200%201%20136%2068h-3.85A52.07%2052.07%200%200%201%20184%2020m-56%20208a76%2076%200%201%201%2076-76a76.08%2076.08%200%200%201-76%2076m51.94-67.34A53.45%2053.45%200%200%201%20136.66%20204a5%205%200%200%201-.66.05a4%204%200%200%201-.66-7.95a45.33%2045.33%200%200%200%2036.72-36.71a4%204%200%201%201%207.88%201.32Z%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%22M155.62%2072.69A60.09%2060.09%200%200%200%20196%2016a4%204%200%200%200-4-4h-8a60.09%2060.09%200%200%200-56%2038.5A60.09%2060.09%200%200%200%2072%2012h-8a4%204%200%200%200%200%208h8a52.06%2052.06%200%200%201%2051.84%2048.11a84%2084%200%201%200%2031.78%204.58M184%2020h3.85A52.07%2052.07%200%200%201%20136%2068h-3.85A52.07%2052.07%200%200%201%20184%2020m-56%20208a76%2076%200%201%201%2076-76a76.08%2076.08%200%200%201-76%2076m51.94-67.34A53.45%2053.45%200%200%201%20136.66%20204a5%205%200%200%201-.66.05a4%204%200%200%201-.66-7.95a45.33%2045.33%200%200%200%2036.72-36.71a4%204%200%201%201%207.88%201.32Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/orange-thin.svg?color=%231a73e8&size=48
