triangle dashed icon

triangle-dashed-light from Phosphor by Phosphor Icons · Light · MIT Free for personal and commercial use.

Name
triangle-dashed-light
Set
Phosphor
Style
Light
Viewbox
256×256
License
MIT

5 other variants in Phosphor

The same icon in other sets

Use the triangle dashed icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M158 216a6 6 0 0 1-6 6h-48a6 6 0 0 1 0-12h48a6 6 0 0 1 6 6m77.07-26.91l-4.66-8.09a6 6 0 1 0-10.4 6l4.66 8.09a9.49 9.49 0 0 1 0 9.72a10.46 10.46 0 0 1-9.21 5.2H192a6 6 0 0 0 0 12h23.45a22.37 22.37 0 0 0 19.6-11.19a21.53 21.53 0 0 0 .02-21.73M64 210H40.55a10.46 10.46 0 0 1-9.21-5.2a9.49 9.49 0 0 1 0-9.72L36 187a6 6 0 0 0-10.4-6l-4.66 8.08a21.53 21.53 0 0 0 0 21.72A22.37 22.37 0 0 0 40.55 222H64a6 6 0 0 0 0-12m138.18-60a6 6 0 0 0 5.2-9l-23-40a6 6 0 1 0-10.4 6l23 40a6 6 0 0 0 5.2 3M147.61 37.22a22.75 22.75 0 0 0-39.22 0L94.69 61a6 6 0 1 0 10.4 6l13.7-23.78a10.75 10.75 0 0 1 18.42 0L150.91 67a6 6 0 0 0 10.4-6ZM79.85 98.8a6 6 0 0 0-8.19 2.2l-23 40A6 6 0 1 0 59 147l23-40a6 6 0 0 0-2.15-8.2"/></svg>

React

import type { SVGProps } from "react";

export function PhTriangleDashedLight(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="M158 216a6 6 0 0 1-6 6h-48a6 6 0 0 1 0-12h48a6 6 0 0 1 6 6m77.07-26.91l-4.66-8.09a6 6 0 1 0-10.4 6l4.66 8.09a9.49 9.49 0 0 1 0 9.72a10.46 10.46 0 0 1-9.21 5.2H192a6 6 0 0 0 0 12h23.45a22.37 22.37 0 0 0 19.6-11.19a21.53 21.53 0 0 0 .02-21.73M64 210H40.55a10.46 10.46 0 0 1-9.21-5.2a9.49 9.49 0 0 1 0-9.72L36 187a6 6 0 0 0-10.4-6l-4.66 8.08a21.53 21.53 0 0 0 0 21.72A22.37 22.37 0 0 0 40.55 222H64a6 6 0 0 0 0-12m138.18-60a6 6 0 0 0 5.2-9l-23-40a6 6 0 1 0-10.4 6l23 40a6 6 0 0 0 5.2 3M147.61 37.22a22.75 22.75 0 0 0-39.22 0L94.69 61a6 6 0 1 0 10.4 6l13.7-23.78a10.75 10.75 0 0 1 18.42 0L150.91 67a6 6 0 0 0 10.4-6ZM79.85 98.8a6 6 0 0 0-8.19 2.2l-23 40A6 6 0 1 0 59 147l23-40a6 6 0 0 0-2.15-8.2"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M158 216a6 6 0 0 1-6 6h-48a6 6 0 0 1 0-12h48a6 6 0 0 1 6 6m77.07-26.91l-4.66-8.09a6 6 0 1 0-10.4 6l4.66 8.09a9.49 9.49 0 0 1 0 9.72a10.46 10.46 0 0 1-9.21 5.2H192a6 6 0 0 0 0 12h23.45a22.37 22.37 0 0 0 19.6-11.19a21.53 21.53 0 0 0 .02-21.73M64 210H40.55a10.46 10.46 0 0 1-9.21-5.2a9.49 9.49 0 0 1 0-9.72L36 187a6 6 0 0 0-10.4-6l-4.66 8.08a21.53 21.53 0 0 0 0 21.72A22.37 22.37 0 0 0 40.55 222H64a6 6 0 0 0 0-12m138.18-60a6 6 0 0 0 5.2-9l-23-40a6 6 0 1 0-10.4 6l23 40a6 6 0 0 0 5.2 3M147.61 37.22a22.75 22.75 0 0 0-39.22 0L94.69 61a6 6 0 1 0 10.4 6l13.7-23.78a10.75 10.75 0 0 1 18.42 0L150.91 67a6 6 0 0 0 10.4-6ZM79.85 98.8a6 6 0 0 0-8.19 2.2l-23 40A6 6 0 1 0 59 147l23-40a6 6 0 0 0-2.15-8.2"/></svg>
</template>

CSS

.icon-triangle-dashed-light {
  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%22M158%20216a6%206%200%200%201-6%206h-48a6%206%200%200%201%200-12h48a6%206%200%200%201%206%206m77.07-26.91l-4.66-8.09a6%206%200%201%200-10.4%206l4.66%208.09a9.49%209.49%200%200%201%200%209.72a10.46%2010.46%200%200%201-9.21%205.2H192a6%206%200%200%200%200%2012h23.45a22.37%2022.37%200%200%200%2019.6-11.19a21.53%2021.53%200%200%200%20.02-21.73M64%20210H40.55a10.46%2010.46%200%200%201-9.21-5.2a9.49%209.49%200%200%201%200-9.72L36%20187a6%206%200%200%200-10.4-6l-4.66%208.08a21.53%2021.53%200%200%200%200%2021.72A22.37%2022.37%200%200%200%2040.55%20222H64a6%206%200%200%200%200-12m138.18-60a6%206%200%200%200%205.2-9l-23-40a6%206%200%201%200-10.4%206l23%2040a6%206%200%200%200%205.2%203M147.61%2037.22a22.75%2022.75%200%200%200-39.22%200L94.69%2061a6%206%200%201%200%2010.4%206l13.7-23.78a10.75%2010.75%200%200%201%2018.42%200L150.91%2067a6%206%200%200%200%2010.4-6ZM79.85%2098.8a6%206%200%200%200-8.19%202.2l-23%2040A6%206%200%201%200%2059%20147l23-40a6%206%200%200%200-2.15-8.2%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%22M158%20216a6%206%200%200%201-6%206h-48a6%206%200%200%201%200-12h48a6%206%200%200%201%206%206m77.07-26.91l-4.66-8.09a6%206%200%201%200-10.4%206l4.66%208.09a9.49%209.49%200%200%201%200%209.72a10.46%2010.46%200%200%201-9.21%205.2H192a6%206%200%200%200%200%2012h23.45a22.37%2022.37%200%200%200%2019.6-11.19a21.53%2021.53%200%200%200%20.02-21.73M64%20210H40.55a10.46%2010.46%200%200%201-9.21-5.2a9.49%209.49%200%200%201%200-9.72L36%20187a6%206%200%200%200-10.4-6l-4.66%208.08a21.53%2021.53%200%200%200%200%2021.72A22.37%2022.37%200%200%200%2040.55%20222H64a6%206%200%200%200%200-12m138.18-60a6%206%200%200%200%205.2-9l-23-40a6%206%200%201%200-10.4%206l23%2040a6%206%200%200%200%205.2%203M147.61%2037.22a22.75%2022.75%200%200%200-39.22%200L94.69%2061a6%206%200%201%200%2010.4%206l13.7-23.78a10.75%2010.75%200%200%201%2018.42%200L150.91%2067a6%206%200%200%200%2010.4-6ZM79.85%2098.8a6%206%200%200%200-8.19%202.2l-23%2040A6%206%200%201%200%2059%20147l23-40a6%206%200%200%200-2.15-8.2%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/triangle-dashed-light.svg?color=%231a73e8&size=48