color filter icon

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

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

2 other variants in IonIcons

color-filter-outlinecolor-filter-sharp

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="M253.72 202.53a4 4 0 0 0 4.56 0a151.88 151.88 0 0 1 128.44-20.41a4 4 0 0 0 5.15-4C388.8 105.86 329 48 256 48s-132.8 57.86-135.87 130.15a4 4 0 0 0 5.15 4a151.88 151.88 0 0 1 128.44 20.41Zm151.59 10.03a152.53 152.53 0 0 1-83.08 108.23a4 4 0 0 0-2.28 3.69c0 1.17.05 2.34.05 3.52a151.58 151.58 0 0 1-47.15 109.94a4 4 0 0 0 .64 6.31A135.24 135.24 0 0 0 344 464c72.07 0 134.1-60.28 136-132.34a136.07 136.07 0 0 0-68.76-121.87a4 4 0 0 0-5.93 2.77"/><path fill="currentColor" d="M390.57 203.67a4 4 0 0 0-2.69-4.4a135.84 135.84 0 0 0-114.4 12.49a4 4 0 0 0-.64 6.29a151.92 151.92 0 0 1 44.47 81.4a4 4 0 0 0 5.94 2.72a136.29 136.29 0 0 0 67.32-98.5M192 328c0-1.18 0-2.35.05-3.52a4 4 0 0 0-2.28-3.69a152.53 152.53 0 0 1-83.08-108.23a4 4 0 0 0-5.88-2.77a136.07 136.07 0 0 0-68.76 121.87C34 403.72 96 464 168.05 464a135.24 135.24 0 0 0 70.46-19.75a4 4 0 0 0 .64-6.31A151.58 151.58 0 0 1 192 328"/><path fill="currentColor" d="M168 192a135.3 135.3 0 0 0-43.88 7.27a4 4 0 0 0-2.69 4.4a136.29 136.29 0 0 0 67.32 98.5a4 4 0 0 0 5.94-2.72a151.92 151.92 0 0 1 44.47-81.4a4 4 0 0 0-.64-6.29A135.2 135.2 0 0 0 168 192m88 144a151.4 151.4 0 0 1-42.72-6.12a4 4 0 0 0-5.15 4a135.7 135.7 0 0 0 45.18 95.4a4 4 0 0 0 5.38 0a135.7 135.7 0 0 0 45.18-95.4a4 4 0 0 0-5.15-4A151.4 151.4 0 0 1 256 336m46.57-27.67a135.94 135.94 0 0 0-43.87-81.58a4.06 4.06 0 0 0-5.4 0a135.94 135.94 0 0 0-43.87 81.58a4 4 0 0 0 2.69 4.4a136.06 136.06 0 0 0 87.76 0a4 4 0 0 0 2.69-4.4"/></svg>

React

import type { SVGProps } from "react";

export function IonColorFilter(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="M253.72 202.53a4 4 0 0 0 4.56 0a151.88 151.88 0 0 1 128.44-20.41a4 4 0 0 0 5.15-4C388.8 105.86 329 48 256 48s-132.8 57.86-135.87 130.15a4 4 0 0 0 5.15 4a151.88 151.88 0 0 1 128.44 20.41Zm151.59 10.03a152.53 152.53 0 0 1-83.08 108.23a4 4 0 0 0-2.28 3.69c0 1.17.05 2.34.05 3.52a151.58 151.58 0 0 1-47.15 109.94a4 4 0 0 0 .64 6.31A135.24 135.24 0 0 0 344 464c72.07 0 134.1-60.28 136-132.34a136.07 136.07 0 0 0-68.76-121.87a4 4 0 0 0-5.93 2.77"/><path fill="currentColor" d="M390.57 203.67a4 4 0 0 0-2.69-4.4a135.84 135.84 0 0 0-114.4 12.49a4 4 0 0 0-.64 6.29a151.92 151.92 0 0 1 44.47 81.4a4 4 0 0 0 5.94 2.72a136.29 136.29 0 0 0 67.32-98.5M192 328c0-1.18 0-2.35.05-3.52a4 4 0 0 0-2.28-3.69a152.53 152.53 0 0 1-83.08-108.23a4 4 0 0 0-5.88-2.77a136.07 136.07 0 0 0-68.76 121.87C34 403.72 96 464 168.05 464a135.24 135.24 0 0 0 70.46-19.75a4 4 0 0 0 .64-6.31A151.58 151.58 0 0 1 192 328"/><path fill="currentColor" d="M168 192a135.3 135.3 0 0 0-43.88 7.27a4 4 0 0 0-2.69 4.4a136.29 136.29 0 0 0 67.32 98.5a4 4 0 0 0 5.94-2.72a151.92 151.92 0 0 1 44.47-81.4a4 4 0 0 0-.64-6.29A135.2 135.2 0 0 0 168 192m88 144a151.4 151.4 0 0 1-42.72-6.12a4 4 0 0 0-5.15 4a135.7 135.7 0 0 0 45.18 95.4a4 4 0 0 0 5.38 0a135.7 135.7 0 0 0 45.18-95.4a4 4 0 0 0-5.15-4A151.4 151.4 0 0 1 256 336m46.57-27.67a135.94 135.94 0 0 0-43.87-81.58a4.06 4.06 0 0 0-5.4 0a135.94 135.94 0 0 0-43.87 81.58a4 4 0 0 0 2.69 4.4a136.06 136.06 0 0 0 87.76 0a4 4 0 0 0 2.69-4.4"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M253.72 202.53a4 4 0 0 0 4.56 0a151.88 151.88 0 0 1 128.44-20.41a4 4 0 0 0 5.15-4C388.8 105.86 329 48 256 48s-132.8 57.86-135.87 130.15a4 4 0 0 0 5.15 4a151.88 151.88 0 0 1 128.44 20.41Zm151.59 10.03a152.53 152.53 0 0 1-83.08 108.23a4 4 0 0 0-2.28 3.69c0 1.17.05 2.34.05 3.52a151.58 151.58 0 0 1-47.15 109.94a4 4 0 0 0 .64 6.31A135.24 135.24 0 0 0 344 464c72.07 0 134.1-60.28 136-132.34a136.07 136.07 0 0 0-68.76-121.87a4 4 0 0 0-5.93 2.77"/><path fill="currentColor" d="M390.57 203.67a4 4 0 0 0-2.69-4.4a135.84 135.84 0 0 0-114.4 12.49a4 4 0 0 0-.64 6.29a151.92 151.92 0 0 1 44.47 81.4a4 4 0 0 0 5.94 2.72a136.29 136.29 0 0 0 67.32-98.5M192 328c0-1.18 0-2.35.05-3.52a4 4 0 0 0-2.28-3.69a152.53 152.53 0 0 1-83.08-108.23a4 4 0 0 0-5.88-2.77a136.07 136.07 0 0 0-68.76 121.87C34 403.72 96 464 168.05 464a135.24 135.24 0 0 0 70.46-19.75a4 4 0 0 0 .64-6.31A151.58 151.58 0 0 1 192 328"/><path fill="currentColor" d="M168 192a135.3 135.3 0 0 0-43.88 7.27a4 4 0 0 0-2.69 4.4a136.29 136.29 0 0 0 67.32 98.5a4 4 0 0 0 5.94-2.72a151.92 151.92 0 0 1 44.47-81.4a4 4 0 0 0-.64-6.29A135.2 135.2 0 0 0 168 192m88 144a151.4 151.4 0 0 1-42.72-6.12a4 4 0 0 0-5.15 4a135.7 135.7 0 0 0 45.18 95.4a4 4 0 0 0 5.38 0a135.7 135.7 0 0 0 45.18-95.4a4 4 0 0 0-5.15-4A151.4 151.4 0 0 1 256 336m46.57-27.67a135.94 135.94 0 0 0-43.87-81.58a4.06 4.06 0 0 0-5.4 0a135.94 135.94 0 0 0-43.87 81.58a4 4 0 0 0 2.69 4.4a136.06 136.06 0 0 0 87.76 0a4 4 0 0 0 2.69-4.4"/></svg>
</template>

CSS

.icon-color-filter {
  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%22M253.72%20202.53a4%204%200%200%200%204.56%200a151.88%20151.88%200%200%201%20128.44-20.41a4%204%200%200%200%205.15-4C388.8%20105.86%20329%2048%20256%2048s-132.8%2057.86-135.87%20130.15a4%204%200%200%200%205.15%204a151.88%20151.88%200%200%201%20128.44%2020.41Zm151.59%2010.03a152.53%20152.53%200%200%201-83.08%20108.23a4%204%200%200%200-2.28%203.69c0%201.17.05%202.34.05%203.52a151.58%20151.58%200%200%201-47.15%20109.94a4%204%200%200%200%20.64%206.31A135.24%20135.24%200%200%200%20344%20464c72.07%200%20134.1-60.28%20136-132.34a136.07%20136.07%200%200%200-68.76-121.87a4%204%200%200%200-5.93%202.77%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M390.57%20203.67a4%204%200%200%200-2.69-4.4a135.84%20135.84%200%200%200-114.4%2012.49a4%204%200%200%200-.64%206.29a151.92%20151.92%200%200%201%2044.47%2081.4a4%204%200%200%200%205.94%202.72a136.29%20136.29%200%200%200%2067.32-98.5M192%20328c0-1.18%200-2.35.05-3.52a4%204%200%200%200-2.28-3.69a152.53%20152.53%200%200%201-83.08-108.23a4%204%200%200%200-5.88-2.77a136.07%20136.07%200%200%200-68.76%20121.87C34%20403.72%2096%20464%20168.05%20464a135.24%20135.24%200%200%200%2070.46-19.75a4%204%200%200%200%20.64-6.31A151.58%20151.58%200%200%201%20192%20328%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M168%20192a135.3%20135.3%200%200%200-43.88%207.27a4%204%200%200%200-2.69%204.4a136.29%20136.29%200%200%200%2067.32%2098.5a4%204%200%200%200%205.94-2.72a151.92%20151.92%200%200%201%2044.47-81.4a4%204%200%200%200-.64-6.29A135.2%20135.2%200%200%200%20168%20192m88%20144a151.4%20151.4%200%200%201-42.72-6.12a4%204%200%200%200-5.15%204a135.7%20135.7%200%200%200%2045.18%2095.4a4%204%200%200%200%205.38%200a135.7%20135.7%200%200%200%2045.18-95.4a4%204%200%200%200-5.15-4A151.4%20151.4%200%200%201%20256%20336m46.57-27.67a135.94%20135.94%200%200%200-43.87-81.58a4.06%204.06%200%200%200-5.4%200a135.94%20135.94%200%200%200-43.87%2081.58a4%204%200%200%200%202.69%204.4a136.06%20136.06%200%200%200%2087.76%200a4%204%200%200%200%202.69-4.4%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%22M253.72%20202.53a4%204%200%200%200%204.56%200a151.88%20151.88%200%200%201%20128.44-20.41a4%204%200%200%200%205.15-4C388.8%20105.86%20329%2048%20256%2048s-132.8%2057.86-135.87%20130.15a4%204%200%200%200%205.15%204a151.88%20151.88%200%200%201%20128.44%2020.41Zm151.59%2010.03a152.53%20152.53%200%200%201-83.08%20108.23a4%204%200%200%200-2.28%203.69c0%201.17.05%202.34.05%203.52a151.58%20151.58%200%200%201-47.15%20109.94a4%204%200%200%200%20.64%206.31A135.24%20135.24%200%200%200%20344%20464c72.07%200%20134.1-60.28%20136-132.34a136.07%20136.07%200%200%200-68.76-121.87a4%204%200%200%200-5.93%202.77%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M390.57%20203.67a4%204%200%200%200-2.69-4.4a135.84%20135.84%200%200%200-114.4%2012.49a4%204%200%200%200-.64%206.29a151.92%20151.92%200%200%201%2044.47%2081.4a4%204%200%200%200%205.94%202.72a136.29%20136.29%200%200%200%2067.32-98.5M192%20328c0-1.18%200-2.35.05-3.52a4%204%200%200%200-2.28-3.69a152.53%20152.53%200%200%201-83.08-108.23a4%204%200%200%200-5.88-2.77a136.07%20136.07%200%200%200-68.76%20121.87C34%20403.72%2096%20464%20168.05%20464a135.24%20135.24%200%200%200%2070.46-19.75a4%204%200%200%200%20.64-6.31A151.58%20151.58%200%200%201%20192%20328%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M168%20192a135.3%20135.3%200%200%200-43.88%207.27a4%204%200%200%200-2.69%204.4a136.29%20136.29%200%200%200%2067.32%2098.5a4%204%200%200%200%205.94-2.72a151.92%20151.92%200%200%201%2044.47-81.4a4%204%200%200%200-.64-6.29A135.2%20135.2%200%200%200%20168%20192m88%20144a151.4%20151.4%200%200%201-42.72-6.12a4%204%200%200%200-5.15%204a135.7%20135.7%200%200%200%2045.18%2095.4a4%204%200%200%200%205.38%200a135.7%20135.7%200%200%200%2045.18-95.4a4%204%200%200%200-5.15-4A151.4%20151.4%200%200%201%20256%20336m46.57-27.67a135.94%20135.94%200%200%200-43.87-81.58a4.06%204.06%200%200%200-5.4%200a135.94%20135.94%200%200%200-43.87%2081.58a4%204%200%200%200%202.69%204.4a136.06%20136.06%200%200%200%2087.76%200a4%204%200%200%200%202.69-4.4%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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