Gentleface › Photo & image › color-filter

color-filter icon

Color filter: color filter, rgb channels, colour filter, color channels. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M1 9C1 8.364 1.117 7.75 1.351 7.159C1.605 6.517 1.976 5.952 2.464 5.464C2.669 5.258 2.887 5.074 3.119 4.91C3.176 4.656 3.254 4.406 3.351 4.16C3.605 3.518 3.976 2.953 4.464 2.464C4.953 1.976 5.518 1.605 6.16 1.351C6.751 1.117 7.364 1 8 1C8.636 1 9.249 1.117 9.84 1.351C10.482 1.605 11.047 1.976 11.536 2.464C12.024 2.953 12.395 3.518 12.649 4.16C12.747 4.407 12.824 4.657 12.881 4.912C13.113 5.076 13.331 5.26 13.536 5.464C14.024 5.953 14.395 6.518 14.649 7.16C14.883 7.751 15 8.364 15 9C15 9.636 14.883 10.249 14.649 10.84C14.395 11.482 14.024 12.047 13.536 12.536C13.047 13.024 12.482 13.395 11.84 13.649C11.249 13.883 10.636 14 10 14C9.364 14 8.751 13.883 8.16 13.649C8.106 13.628 8.054 13.606 8.002 13.583C7.949 13.607 7.895 13.629 7.841 13.65C7.25 13.884 6.636 14.002 6 14.002C5.364 14.002 4.75 13.884 4.159 13.65C3.517 13.396 2.952 13.025 2.464 12.536C1.976 12.048 1.605 11.483 1.351 10.841C1.117 10.25 1 9.636 1 9L1 9L1 9ZM9.472 2.281C8.999 2.094 8.509 2 8 2C7.491 2 7.001 2.094 6.528 2.281C6.014 2.484 5.562 2.781 5.172 3.172C4.85 3.493 4.592 3.857 4.397 4.262C4.914 4.086 5.449 3.998 6 3.998C6.636 3.998 7.25 4.116 7.841 4.35C7.895 4.371 7.949 4.393 8.002 4.417C8.054 4.394 8.106 4.372 8.16 4.351C8.751 4.117 9.364 4 10 4C10.551 4 11.086 4.088 11.604 4.264C11.409 3.858 11.151 3.494 10.828 3.172C10.438 2.781 9.986 2.484 9.472 2.281ZM4.527 5.279C4.354 5.348 4.188 5.427 4.029 5.517C4.01 5.676 4 5.837 4 6C4 6.509 4.094 6.999 4.281 7.472C4.455 7.913 4.699 8.309 5.011 8.659C5.046 8.144 5.159 7.644 5.351 7.16C5.605 6.518 5.976 5.953 6.464 5.464C6.596 5.333 6.733 5.21 6.876 5.095C6.59 5.031 6.298 4.998 6 4.998C5.491 4.998 5 5.092 4.527 5.279ZM9.127 5.096C9.269 5.21 9.405 5.333 9.536 5.464C10.024 5.952 10.395 6.517 10.649 7.159C10.841 7.644 10.954 8.144 10.989 8.659C11.301 8.309 11.545 7.913 11.719 7.472C11.906 6.999 12 6.509 12 6C12 5.838 11.99 5.677 11.971 5.519C11.812 5.429 11.646 5.349 11.472 5.281C10.999 5.094 10.509 5 10 5C9.703 5 9.412 5.032 9.127 5.096ZM6.029 9.481C6.188 9.571 6.354 9.651 6.528 9.719C7.001 9.906 7.491 10 8 10C8.509 10 8.999 9.906 9.472 9.719C9.646 9.65 9.812 9.571 9.972 9.481C9.991 9.323 10 9.162 10 9C10 8.491 9.907 8 9.72 7.527C9.516 7.013 9.219 6.561 8.829 6.171C8.578 5.92 8.303 5.708 8.001 5.534C7.699 5.708 7.423 5.92 7.172 6.172C6.781 6.562 6.484 7.014 6.281 7.528C6.094 8.001 6 8.491 6 9C6 9.162 6.01 9.323 6.029 9.481ZM2 9C2 9.509 2.093 10 2.28 10.473C2.484 10.987 2.781 11.439 3.171 11.829C3.562 12.22 4.014 12.517 4.527 12.721C5 12.908 5.491 13.002 6 13.002C6.298 13.002 6.59 12.969 6.876 12.905C6.733 12.79 6.596 12.667 6.464 12.536C5.976 12.047 5.605 11.482 5.351 10.84C5.253 10.593 5.176 10.343 5.119 10.088C4.887 9.924 4.669 9.74 4.464 9.536C3.976 9.047 3.605 8.482 3.351 7.84C3.159 7.355 3.046 6.855 3.011 6.34C2.699 6.69 2.455 7.086 2.28 7.527C2.093 8 2 8.491 2 9L2 9L2 9ZM9.127 12.904C9.412 12.968 9.703 13 10 13C10.509 13 10.999 12.906 11.472 12.719C11.986 12.516 12.438 12.219 12.828 11.828C13.219 11.438 13.516 10.986 13.719 10.472C13.906 9.999 14 9.509 14 9C14 8.491 13.906 8.001 13.719 7.528C13.545 7.087 13.301 6.691 12.989 6.341C12.954 6.856 12.841 7.356 12.649 7.84C12.395 8.482 12.024 9.047 11.536 9.536C11.331 9.74 11.113 9.924 10.881 10.088C10.825 10.342 10.747 10.594 10.649 10.841C10.395 11.483 10.024 12.048 9.536 12.536C9.405 12.667 9.269 12.79 9.127 12.904ZM8.001 12.466C8.303 12.292 8.578 12.08 8.829 11.829C9.151 11.507 9.41 11.142 9.605 10.736C9.087 10.912 8.552 11 8 11C7.449 11 6.914 10.912 6.396 10.736C6.591 11.142 6.849 11.506 7.172 11.828C7.423 12.08 7.699 12.292 8.001 12.466Z"/></svg>

React

// Gentleface "color-filter" (line-round), MIT. https://gentleface.com/icons/color-filter
import type { SVGProps } from 'react';

export function ColorFilterIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M1 9C1 8.364 1.117 7.75 1.351 7.159C1.605 6.517 1.976 5.952 2.464 5.464C2.669 5.258 2.887 5.074 3.119 4.91C3.176 4.656 3.254 4.406 3.351 4.16C3.605 3.518 3.976 2.953 4.464 2.464C4.953 1.976 5.518 1.605 6.16 1.351C6.751 1.117 7.364 1 8 1C8.636 1 9.249 1.117 9.84 1.351C10.482 1.605 11.047 1.976 11.536 2.464C12.024 2.953 12.395 3.518 12.649 4.16C12.747 4.407 12.824 4.657 12.881 4.912C13.113 5.076 13.331 5.26 13.536 5.464C14.024 5.953 14.395 6.518 14.649 7.16C14.883 7.751 15 8.364 15 9C15 9.636 14.883 10.249 14.649 10.84C14.395 11.482 14.024 12.047 13.536 12.536C13.047 13.024 12.482 13.395 11.84 13.649C11.249 13.883 10.636 14 10 14C9.364 14 8.751 13.883 8.16 13.649C8.106 13.628 8.054 13.606 8.002 13.583C7.949 13.607 7.895 13.629 7.841 13.65C7.25 13.884 6.636 14.002 6 14.002C5.364 14.002 4.75 13.884 4.159 13.65C3.517 13.396 2.952 13.025 2.464 12.536C1.976 12.048 1.605 11.483 1.351 10.841C1.117 10.25 1 9.636 1 9L1 9L1 9ZM9.472 2.281C8.999 2.094 8.509 2 8 2C7.491 2 7.001 2.094 6.528 2.281C6.014 2.484 5.562 2.781 5.172 3.172C4.85 3.493 4.592 3.857 4.397 4.262C4.914 4.086 5.449 3.998 6 3.998C6.636 3.998 7.25 4.116 7.841 4.35C7.895 4.371 7.949 4.393 8.002 4.417C8.054 4.394 8.106 4.372 8.16 4.351C8.751 4.117 9.364 4 10 4C10.551 4 11.086 4.088 11.604 4.264C11.409 3.858 11.151 3.494 10.828 3.172C10.438 2.781 9.986 2.484 9.472 2.281ZM4.527 5.279C4.354 5.348 4.188 5.427 4.029 5.517C4.01 5.676 4 5.837 4 6C4 6.509 4.094 6.999 4.281 7.472C4.455 7.913 4.699 8.309 5.011 8.659C5.046 8.144 5.159 7.644 5.351 7.16C5.605 6.518 5.976 5.953 6.464 5.464C6.596 5.333 6.733 5.21 6.876 5.095C6.59 5.031 6.298 4.998 6 4.998C5.491 4.998 5 5.092 4.527 5.279ZM9.127 5.096C9.269 5.21 9.405 5.333 9.536 5.464C10.024 5.952 10.395 6.517 10.649 7.159C10.841 7.644 10.954 8.144 10.989 8.659C11.301 8.309 11.545 7.913 11.719 7.472C11.906 6.999 12 6.509 12 6C12 5.838 11.99 5.677 11.971 5.519C11.812 5.429 11.646 5.349 11.472 5.281C10.999 5.094 10.509 5 10 5C9.703 5 9.412 5.032 9.127 5.096ZM6.029 9.481C6.188 9.571 6.354 9.651 6.528 9.719C7.001 9.906 7.491 10 8 10C8.509 10 8.999 9.906 9.472 9.719C9.646 9.65 9.812 9.571 9.972 9.481C9.991 9.323 10 9.162 10 9C10 8.491 9.907 8 9.72 7.527C9.516 7.013 9.219 6.561 8.829 6.171C8.578 5.92 8.303 5.708 8.001 5.534C7.699 5.708 7.423 5.92 7.172 6.172C6.781 6.562 6.484 7.014 6.281 7.528C6.094 8.001 6 8.491 6 9C6 9.162 6.01 9.323 6.029 9.481ZM2 9C2 9.509 2.093 10 2.28 10.473C2.484 10.987 2.781 11.439 3.171 11.829C3.562 12.22 4.014 12.517 4.527 12.721C5 12.908 5.491 13.002 6 13.002C6.298 13.002 6.59 12.969 6.876 12.905C6.733 12.79 6.596 12.667 6.464 12.536C5.976 12.047 5.605 11.482 5.351 10.84C5.253 10.593 5.176 10.343 5.119 10.088C4.887 9.924 4.669 9.74 4.464 9.536C3.976 9.047 3.605 8.482 3.351 7.84C3.159 7.355 3.046 6.855 3.011 6.34C2.699 6.69 2.455 7.086 2.28 7.527C2.093 8 2 8.491 2 9L2 9L2 9ZM9.127 12.904C9.412 12.968 9.703 13 10 13C10.509 13 10.999 12.906 11.472 12.719C11.986 12.516 12.438 12.219 12.828 11.828C13.219 11.438 13.516 10.986 13.719 10.472C13.906 9.999 14 9.509 14 9C14 8.491 13.906 8.001 13.719 7.528C13.545 7.087 13.301 6.691 12.989 6.341C12.954 6.856 12.841 7.356 12.649 7.84C12.395 8.482 12.024 9.047 11.536 9.536C11.331 9.74 11.113 9.924 10.881 10.088C10.825 10.342 10.747 10.594 10.649 10.841C10.395 11.483 10.024 12.048 9.536 12.536C9.405 12.667 9.269 12.79 9.127 12.904ZM8.001 12.466C8.303 12.292 8.578 12.08 8.829 11.829C9.151 11.507 9.41 11.142 9.605 10.736C9.087 10.912 8.552 11 8 11C7.449 11 6.914 10.912 6.396 10.736C6.591 11.142 6.849 11.506 7.172 11.828C7.423 12.08 7.699 12.292 8.001 12.466Z" />
    </svg>
  );
}

Vue

Vue: see /icons/color-filter.md

Svelte

Svelte: see /icons/color-filter.md

HTML img

HTML img: see /icons/color-filter.md

CSS

CSS: see /icons/color-filter.md

Data URL

Data URL: see /icons/color-filter.md

Sprite

Sprite: see /icons/color-filter.md

SwiftUI

SwiftUI: see /icons/color-filter.md

Compose

Compose: see /icons/color-filter.md

Android XML

Android XML: see /icons/color-filter.md

Flutter

Flutter: see /icons/color-filter.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

With npm: import { ColorFilterIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

color filter, rgb channels, colour filter, color channels, photo filter

Don’t confuse with

filter: the funnel filters a list or data (filter)

Tags

color filter, colour filter, rgb, channels, color channels, additive color, red green blue, filters, photo filter, mix, circles

Category

Photo & image

Component name

ColorFilterIcon

History

2026-10-29 released in 0.2.0
2026-10-30 added

Since

version 0.2.0

More photo & image icons

aperture background-remove blur blur-off camera camera-off camera-plus camera-rotate camera-sparkle camera-x collage droplet-half exposure focus gif hdr · all photo & image icons

For agents

Metadata: /icons/color-filter.json · Markdown: /icons/color-filter.md · SVG: https://gentleface.com/svg/{style}/16/color-filter.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/color-filter.png

color-filter icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp

Code line-round

Meaning

More photo & image icons

For agents

color-filter icon