Gentleface › Photo & image › color-filter-sparkle

color-filter-sparkle icon

Color filter sparkle: ai color grading, auto color grade. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Animated color-filter-sparkle-split · line-round

The sparkle twinkles out. The three colour rings part outward from the centre, hold apart like separated channels, then slide back together, and as they recombine the sparkle twinkles in.

Download SVG

Native SVG animation, with no CSS or script. It loops by itself. Inline it to take the text color: in an <img> it draws black. To play it once on hover or click, run 0.2 s to 1.6 s. Examples and helper.

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="M6.33 10.713C6.33 10.729 6.329 10.745 6.327 10.761C6.214 10.864 6.126 10.991 6.07 11.133C6.053 11.142 6.037 11.15 6.019 11.157C5.891 11.209 5.764 11.208 5.636 11.154C5.509 11.101 5.42 11.01 5.368 10.882C5.262 10.621 5.179 10.356 5.119 10.086C4.693 9.787 4.323 9.429 4.009 9.012C3.673 8.566 3.418 8.078 3.245 7.547C3.117 7.153 3.039 6.75 3.011 6.34C2.699 6.69 2.455 7.086 2.28 7.527C2.093 8 2 8.491 2 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.411 13.002 6.81 12.941 7.195 12.82C7.202 12.744 7.225 12.673 7.264 12.607C7.272 12.594 7.28 12.582 7.288 12.57C7.781 12.669 8.193 12.786 8.525 12.92C8.893 13.068 9.194 13.251 9.427 13.468C9.425 13.475 9.424 13.483 9.422 13.491C9.388 13.628 9.314 13.731 9.197 13.802C9.081 13.873 8.955 13.892 8.818 13.858C8.536 13.79 8.264 13.698 8.001 13.584C7.365 13.862 6.697 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.249 1 9.636 1 9C1 8.364 1.117 7.751 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.206 14.987 9.412 14.962 9.617C14.944 9.756 14.882 9.868 14.775 9.952C14.668 10.035 14.545 10.068 14.405 10.051C14.3 10.007 14.201 9.959 14.108 9.909C14.094 9.895 14.081 9.88 14.069 9.864C13.985 9.757 13.952 9.633 13.969 9.493C13.99 9.329 14 9.165 14 9C14 8.491 13.906 8.001 13.719 7.528C13.543 7.082 13.296 6.683 12.979 6.331C12.949 6.446 12.887 6.539 12.793 6.608C12.699 6.677 12.592 6.709 12.473 6.704C12.467 6.703 12.461 6.703 12.455 6.703C12.38 6.462 12.217 6.258 11.998 6.133C11.999 6.088 12 6.044 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.411 5.032 9.126 5.096C9.404 5.318 9.655 5.568 9.882 5.847C10.132 6.155 10.342 6.488 10.512 6.844C10.457 7.172 10.396 7.47 10.329 7.738C10.207 7.784 10.086 7.782 9.964 7.732C9.836 7.679 9.746 7.589 9.693 7.461C9.545 7.105 9.349 6.777 9.105 6.477C8.851 6.164 8.555 5.895 8.219 5.671C8.148 5.623 8.075 5.577 8.001 5.535C7.699 5.708 7.423 5.921 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.009 9.322 6.028 9.481C6.304 9.637 6.596 9.759 6.903 9.847C7.039 9.885 7.139 9.964 7.206 10.083C7.267 10.194 7.283 10.312 7.254 10.437C7.12 10.464 6.981 10.489 6.836 10.514C6.664 10.542 6.502 10.615 6.367 10.726C6.355 10.722 6.343 10.717 6.33 10.713ZM8.002 4.416C8.054 4.394 8.107 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.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.483 3.998 6.955 4.067 7.418 4.204C7.618 4.263 7.813 4.334 8.002 4.416ZM5.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.589 5.031 6.297 4.998 6 4.998C5.491 4.998 5 5.092 4.527 5.279C4.354 5.348 4.188 5.427 4.029 5.517C4.01 5.676 4 5.837 4 6C4 6.423 4.065 6.835 4.196 7.238C4.335 7.662 4.538 8.053 4.807 8.41C4.872 8.496 4.94 8.579 5.011 8.659ZM11.5 16C11 13 10 12 7 11.5C10 11 11 10 11.5 7C12 10 13 11 16 11.5C13 12 12 13 11.5 16Z"/></svg>

React

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

export function ColorFilterSparkleIcon(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="M6.33 10.713C6.33 10.729 6.329 10.745 6.327 10.761C6.214 10.864 6.126 10.991 6.07 11.133C6.053 11.142 6.037 11.15 6.019 11.157C5.891 11.209 5.764 11.208 5.636 11.154C5.509 11.101 5.42 11.01 5.368 10.882C5.262 10.621 5.179 10.356 5.119 10.086C4.693 9.787 4.323 9.429 4.009 9.012C3.673 8.566 3.418 8.078 3.245 7.547C3.117 7.153 3.039 6.75 3.011 6.34C2.699 6.69 2.455 7.086 2.28 7.527C2.093 8 2 8.491 2 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.411 13.002 6.81 12.941 7.195 12.82C7.202 12.744 7.225 12.673 7.264 12.607C7.272 12.594 7.28 12.582 7.288 12.57C7.781 12.669 8.193 12.786 8.525 12.92C8.893 13.068 9.194 13.251 9.427 13.468C9.425 13.475 9.424 13.483 9.422 13.491C9.388 13.628 9.314 13.731 9.197 13.802C9.081 13.873 8.955 13.892 8.818 13.858C8.536 13.79 8.264 13.698 8.001 13.584C7.365 13.862 6.697 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.249 1 9.636 1 9C1 8.364 1.117 7.751 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.206 14.987 9.412 14.962 9.617C14.944 9.756 14.882 9.868 14.775 9.952C14.668 10.035 14.545 10.068 14.405 10.051C14.3 10.007 14.201 9.959 14.108 9.909C14.094 9.895 14.081 9.88 14.069 9.864C13.985 9.757 13.952 9.633 13.969 9.493C13.99 9.329 14 9.165 14 9C14 8.491 13.906 8.001 13.719 7.528C13.543 7.082 13.296 6.683 12.979 6.331C12.949 6.446 12.887 6.539 12.793 6.608C12.699 6.677 12.592 6.709 12.473 6.704C12.467 6.703 12.461 6.703 12.455 6.703C12.38 6.462 12.217 6.258 11.998 6.133C11.999 6.088 12 6.044 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.411 5.032 9.126 5.096C9.404 5.318 9.655 5.568 9.882 5.847C10.132 6.155 10.342 6.488 10.512 6.844C10.457 7.172 10.396 7.47 10.329 7.738C10.207 7.784 10.086 7.782 9.964 7.732C9.836 7.679 9.746 7.589 9.693 7.461C9.545 7.105 9.349 6.777 9.105 6.477C8.851 6.164 8.555 5.895 8.219 5.671C8.148 5.623 8.075 5.577 8.001 5.535C7.699 5.708 7.423 5.921 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.009 9.322 6.028 9.481C6.304 9.637 6.596 9.759 6.903 9.847C7.039 9.885 7.139 9.964 7.206 10.083C7.267 10.194 7.283 10.312 7.254 10.437C7.12 10.464 6.981 10.489 6.836 10.514C6.664 10.542 6.502 10.615 6.367 10.726C6.355 10.722 6.343 10.717 6.33 10.713ZM8.002 4.416C8.054 4.394 8.107 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.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.483 3.998 6.955 4.067 7.418 4.204C7.618 4.263 7.813 4.334 8.002 4.416ZM5.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.589 5.031 6.297 4.998 6 4.998C5.491 4.998 5 5.092 4.527 5.279C4.354 5.348 4.188 5.427 4.029 5.517C4.01 5.676 4 5.837 4 6C4 6.423 4.065 6.835 4.196 7.238C4.335 7.662 4.538 8.053 4.807 8.41C4.872 8.496 4.94 8.579 5.011 8.659ZM11.5 16C11 13 10 12 7 11.5C10 11 11 10 11.5 7C12 10 13 11 16 11.5C13 12 12 13 11.5 16Z" />
    </svg>
  );
}

Vue

Vue: see /icons/color-filter-sparkle.md

Svelte

Svelte: see /icons/color-filter-sparkle.md

HTML img

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

CSS

CSS: see /icons/color-filter-sparkle.md

Data URL

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

Sprite

Sprite: see /icons/color-filter-sparkle.md

SwiftUI

SwiftUI: see /icons/color-filter-sparkle.md

Compose

Compose: see /icons/color-filter-sparkle.md

Android XML

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

Flutter

Flutter: see /icons/color-filter-sparkle.md

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. 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 { ColorFilterSparkleIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

ai color grading, auto color grade

Example

AI color-grading preset in a photo editor

Built from

color-filter + sparkle

Tags

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

Category

Photo & image

Component name

ColorFilterSparkleIcon

History

2026-11-06 added, released in 0.4.0

Since

version 0.4.0

Family 2

color-filter color-filter-off

More photo & image icons

aperture background-remove background-remove-stripes background-replace blur blur-off bolt-auto camera camera-alert camera-arrow-up camera-gear camera-link camera-off camera-pencil camera-plus camera-rotate · all photo & image icons

For agents

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

color-filter-sparkle icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp