color filter icon

color-filter-sharp from IonIcons by Ben Sperry · Sharp · MIT Free for personal and commercial use.

Name
color-filter-sharp
Set
IonIcons
Style
Sharp
Viewbox
512×512
License
MIT

2 other variants in IonIcons

color-filtercolor-filter-outline

The same icon in other sets

color-filterIconParkcolor-filterIconPark Outlinecolor-filterIconPark Solidcolor-filterIconPark TwoTonecolor-filterIconoircolor-filter-fillMingCute Iconcolor-filter-fillRemix Iconcolor-filterTabler Icons

Related icons in IonIcons

color-fillcolor-palettecolor-wand

Use the color filter icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M256 185a167.85 167.85 0 0 1 134.9-18.28C382.36 99.83 325.12 48 256 48S129.64 99.83 121.1 166.67A167.85 167.85 0 0 1 256 185m80 146.73a167.5 167.5 0 0 1-52.37 118.08A135 135 0 0 0 344 464c75 0 136-61 136-136a136 136 0 0 0-59.06-112.08A168.53 168.53 0 0 1 336 331.73m-52.42-125.54a167.87 167.87 0 0 1 49.36 89.89a136.14 136.14 0 0 0 58.06-95.7a135.87 135.87 0 0 0-107.43 5.81ZM176.05 331.73a168.53 168.53 0 0 1-85-115.81A136 136 0 0 0 32 328c0 75 61 136 136 136a135 135 0 0 0 60.42-14.19a167.5 167.5 0 0 1-52.37-118.08m3.01-35.65a167.87 167.87 0 0 1 49.36-89.89A135.87 135.87 0 0 0 121 200.38a136.14 136.14 0 0 0 58.06 95.7m123.84 49.25a168.2 168.2 0 0 1-93.8 0A135.9 135.9 0 0 0 256 431.6a135.9 135.9 0 0 0 46.9-86.27M209 311.62a136 136 0 0 0 94 0a135.93 135.93 0 0 0-47-87.22a135.93 135.93 0 0 0-47 87.22"/></svg>

React

import type { SVGProps } from "react";

export function IonColorFilterSharp(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M256 185a167.85 167.85 0 0 1 134.9-18.28C382.36 99.83 325.12 48 256 48S129.64 99.83 121.1 166.67A167.85 167.85 0 0 1 256 185m80 146.73a167.5 167.5 0 0 1-52.37 118.08A135 135 0 0 0 344 464c75 0 136-61 136-136a136 136 0 0 0-59.06-112.08A168.53 168.53 0 0 1 336 331.73m-52.42-125.54a167.87 167.87 0 0 1 49.36 89.89a136.14 136.14 0 0 0 58.06-95.7a135.87 135.87 0 0 0-107.43 5.81ZM176.05 331.73a168.53 168.53 0 0 1-85-115.81A136 136 0 0 0 32 328c0 75 61 136 136 136a135 135 0 0 0 60.42-14.19a167.5 167.5 0 0 1-52.37-118.08m3.01-35.65a167.87 167.87 0 0 1 49.36-89.89A135.87 135.87 0 0 0 121 200.38a136.14 136.14 0 0 0 58.06 95.7m123.84 49.25a168.2 168.2 0 0 1-93.8 0A135.9 135.9 0 0 0 256 431.6a135.9 135.9 0 0 0 46.9-86.27M209 311.62a136 136 0 0 0 94 0a135.93 135.93 0 0 0-47-87.22a135.93 135.93 0 0 0-47 87.22"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M256 185a167.85 167.85 0 0 1 134.9-18.28C382.36 99.83 325.12 48 256 48S129.64 99.83 121.1 166.67A167.85 167.85 0 0 1 256 185m80 146.73a167.5 167.5 0 0 1-52.37 118.08A135 135 0 0 0 344 464c75 0 136-61 136-136a136 136 0 0 0-59.06-112.08A168.53 168.53 0 0 1 336 331.73m-52.42-125.54a167.87 167.87 0 0 1 49.36 89.89a136.14 136.14 0 0 0 58.06-95.7a135.87 135.87 0 0 0-107.43 5.81ZM176.05 331.73a168.53 168.53 0 0 1-85-115.81A136 136 0 0 0 32 328c0 75 61 136 136 136a135 135 0 0 0 60.42-14.19a167.5 167.5 0 0 1-52.37-118.08m3.01-35.65a167.87 167.87 0 0 1 49.36-89.89A135.87 135.87 0 0 0 121 200.38a136.14 136.14 0 0 0 58.06 95.7m123.84 49.25a168.2 168.2 0 0 1-93.8 0A135.9 135.9 0 0 0 256 431.6a135.9 135.9 0 0 0 46.9-86.27M209 311.62a136 136 0 0 0 94 0a135.93 135.93 0 0 0-47-87.22a135.93 135.93 0 0 0-47 87.22"/></svg>
</template>

CSS

.icon-color-filter-sharp {
  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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M256%20185a167.85%20167.85%200%200%201%20134.9-18.28C382.36%2099.83%20325.12%2048%20256%2048S129.64%2099.83%20121.1%20166.67A167.85%20167.85%200%200%201%20256%20185m80%20146.73a167.5%20167.5%200%200%201-52.37%20118.08A135%20135%200%200%200%20344%20464c75%200%20136-61%20136-136a136%20136%200%200%200-59.06-112.08A168.53%20168.53%200%200%201%20336%20331.73m-52.42-125.54a167.87%20167.87%200%200%201%2049.36%2089.89a136.14%20136.14%200%200%200%2058.06-95.7a135.87%20135.87%200%200%200-107.43%205.81ZM176.05%20331.73a168.53%20168.53%200%200%201-85-115.81A136%20136%200%200%200%2032%20328c0%2075%2061%20136%20136%20136a135%20135%200%200%200%2060.42-14.19a167.5%20167.5%200%200%201-52.37-118.08m3.01-35.65a167.87%20167.87%200%200%201%2049.36-89.89A135.87%20135.87%200%200%200%20121%20200.38a136.14%20136.14%200%200%200%2058.06%2095.7m123.84%2049.25a168.2%20168.2%200%200%201-93.8%200A135.9%20135.9%200%200%200%20256%20431.6a135.9%20135.9%200%200%200%2046.9-86.27M209%20311.62a136%20136%200%200%200%2094%200a135.93%20135.93%200%200%200-47-87.22a135.93%20135.93%200%200%200-47%2087.22%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%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M256%20185a167.85%20167.85%200%200%201%20134.9-18.28C382.36%2099.83%20325.12%2048%20256%2048S129.64%2099.83%20121.1%20166.67A167.85%20167.85%200%200%201%20256%20185m80%20146.73a167.5%20167.5%200%200%201-52.37%20118.08A135%20135%200%200%200%20344%20464c75%200%20136-61%20136-136a136%20136%200%200%200-59.06-112.08A168.53%20168.53%200%200%201%20336%20331.73m-52.42-125.54a167.87%20167.87%200%200%201%2049.36%2089.89a136.14%20136.14%200%200%200%2058.06-95.7a135.87%20135.87%200%200%200-107.43%205.81ZM176.05%20331.73a168.53%20168.53%200%200%201-85-115.81A136%20136%200%200%200%2032%20328c0%2075%2061%20136%20136%20136a135%20135%200%200%200%2060.42-14.19a167.5%20167.5%200%200%201-52.37-118.08m3.01-35.65a167.87%20167.87%200%200%201%2049.36-89.89A135.87%20135.87%200%200%200%20121%20200.38a136.14%20136.14%200%200%200%2058.06%2095.7m123.84%2049.25a168.2%20168.2%200%200%201-93.8%200A135.9%20135.9%200%200%200%20256%20431.6a135.9%20135.9%200%200%200%2046.9-86.27M209%20311.62a136%20136%200%200%200%2094%200a135.93%20135.93%200%200%200-47-87.22a135.93%20135.93%200%200%200-47%2087.22%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ion/color-filter-sharp.svg?color=%231a73e8&size=48