swatches icon
swatches-light from Phosphor by Phosphor Icons · Light · MIT Free for personal and commercial use.
- Name
- swatches-light
- Set
- Phosphor
- Style
- Light
- Viewbox
- 256×256
- License
- MIT
5 other variants in Phosphor
The same icon in other sets
Use the swatches icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M86 180a10 10 0 1 1-10-10a10 10 0 0 1 10 10m152-23.81V208a14 14 0 0 1-14 14H76a44 44 0 0 1-7.58-.65a42 42 0 0 1-33.81-48.64l25-143.13a13.94 13.94 0 0 1 16.21-11.36l54.67 9.72a14 14 0 0 1 11.3 16.21l-12.67 72.44l71-25.75a14 14 0 0 1 17.89 8.32l19.09 52.22a15.7 15.7 0 0 1 .9 4.81m-133.07 29L130 42.08a2 2 0 0 0-1.58-2.32L73.72 30h-.34a1.84 1.84 0 0 0-1.07.35a2 2 0 0 0-.82 1.3l-25 143.13a30 30 0 0 0 24.09 34.76a29.25 29.25 0 0 0 22-4.89a29.8 29.8 0 0 0 12.33-19.44Zm8.25 13.17L224.71 158a2 2 0 0 0 1.11-1a1.86 1.86 0 0 0 .06-1.46l-19.09-52.21a2 2 0 0 0-2.53-1.17l-77.53 28.09l-10 57.07a42 42 0 0 1-3.55 11.06ZM226 170.27L116.35 210H224a2 2 0 0 0 2-2Z"/></svg>
React
import type { SVGProps } from "react";
export function PhSwatchesLight(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="M86 180a10 10 0 1 1-10-10a10 10 0 0 1 10 10m152-23.81V208a14 14 0 0 1-14 14H76a44 44 0 0 1-7.58-.65a42 42 0 0 1-33.81-48.64l25-143.13a13.94 13.94 0 0 1 16.21-11.36l54.67 9.72a14 14 0 0 1 11.3 16.21l-12.67 72.44l71-25.75a14 14 0 0 1 17.89 8.32l19.09 52.22a15.7 15.7 0 0 1 .9 4.81m-133.07 29L130 42.08a2 2 0 0 0-1.58-2.32L73.72 30h-.34a1.84 1.84 0 0 0-1.07.35a2 2 0 0 0-.82 1.3l-25 143.13a30 30 0 0 0 24.09 34.76a29.25 29.25 0 0 0 22-4.89a29.8 29.8 0 0 0 12.33-19.44Zm8.25 13.17L224.71 158a2 2 0 0 0 1.11-1a1.86 1.86 0 0 0 .06-1.46l-19.09-52.21a2 2 0 0 0-2.53-1.17l-77.53 28.09l-10 57.07a42 42 0 0 1-3.55 11.06ZM226 170.27L116.35 210H224a2 2 0 0 0 2-2Z"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M86 180a10 10 0 1 1-10-10a10 10 0 0 1 10 10m152-23.81V208a14 14 0 0 1-14 14H76a44 44 0 0 1-7.58-.65a42 42 0 0 1-33.81-48.64l25-143.13a13.94 13.94 0 0 1 16.21-11.36l54.67 9.72a14 14 0 0 1 11.3 16.21l-12.67 72.44l71-25.75a14 14 0 0 1 17.89 8.32l19.09 52.22a15.7 15.7 0 0 1 .9 4.81m-133.07 29L130 42.08a2 2 0 0 0-1.58-2.32L73.72 30h-.34a1.84 1.84 0 0 0-1.07.35a2 2 0 0 0-.82 1.3l-25 143.13a30 30 0 0 0 24.09 34.76a29.25 29.25 0 0 0 22-4.89a29.8 29.8 0 0 0 12.33-19.44Zm8.25 13.17L224.71 158a2 2 0 0 0 1.11-1a1.86 1.86 0 0 0 .06-1.46l-19.09-52.21a2 2 0 0 0-2.53-1.17l-77.53 28.09l-10 57.07a42 42 0 0 1-3.55 11.06ZM226 170.27L116.35 210H224a2 2 0 0 0 2-2Z"/></svg> </template>
CSS
.icon-swatches-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%22M86%20180a10%2010%200%201%201-10-10a10%2010%200%200%201%2010%2010m152-23.81V208a14%2014%200%200%201-14%2014H76a44%2044%200%200%201-7.58-.65a42%2042%200%200%201-33.81-48.64l25-143.13a13.94%2013.94%200%200%201%2016.21-11.36l54.67%209.72a14%2014%200%200%201%2011.3%2016.21l-12.67%2072.44l71-25.75a14%2014%200%200%201%2017.89%208.32l19.09%2052.22a15.7%2015.7%200%200%201%20.9%204.81m-133.07%2029L130%2042.08a2%202%200%200%200-1.58-2.32L73.72%2030h-.34a1.84%201.84%200%200%200-1.07.35a2%202%200%200%200-.82%201.3l-25%20143.13a30%2030%200%200%200%2024.09%2034.76a29.25%2029.25%200%200%200%2022-4.89a29.8%2029.8%200%200%200%2012.33-19.44Zm8.25%2013.17L224.71%20158a2%202%200%200%200%201.11-1a1.86%201.86%200%200%200%20.06-1.46l-19.09-52.21a2%202%200%200%200-2.53-1.17l-77.53%2028.09l-10%2057.07a42%2042%200%200%201-3.55%2011.06ZM226%20170.27L116.35%20210H224a2%202%200%200%200%202-2Z%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%22M86%20180a10%2010%200%201%201-10-10a10%2010%200%200%201%2010%2010m152-23.81V208a14%2014%200%200%201-14%2014H76a44%2044%200%200%201-7.58-.65a42%2042%200%200%201-33.81-48.64l25-143.13a13.94%2013.94%200%200%201%2016.21-11.36l54.67%209.72a14%2014%200%200%201%2011.3%2016.21l-12.67%2072.44l71-25.75a14%2014%200%200%201%2017.89%208.32l19.09%2052.22a15.7%2015.7%200%200%201%20.9%204.81m-133.07%2029L130%2042.08a2%202%200%200%200-1.58-2.32L73.72%2030h-.34a1.84%201.84%200%200%200-1.07.35a2%202%200%200%200-.82%201.3l-25%20143.13a30%2030%200%200%200%2024.09%2034.76a29.25%2029.25%200%200%200%2022-4.89a29.8%2029.8%200%200%200%2012.33-19.44Zm8.25%2013.17L224.71%20158a2%202%200%200%200%201.11-1a1.86%201.86%200%200%200%20.06-1.46l-19.09-52.21a2%202%200%200%200-2.53-1.17l-77.53%2028.09l-10%2057.07a42%2042%200%200%201-3.55%2011.06ZM226%20170.27L116.35%20210H224a2%202%200%200%200%202-2Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/swatches-light.svg?color=%231a73e8&size=48
