# bell-sparkle icon Bell sparkle. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/bell-sparkle - Category: Notifications & status - Use it for: notification summary, priority notifications, summarize notifications, notification digest, smart notifications - Example: Summarize notifications setting - Built from: bell + sparkle - Tags: notification, alert, sparkle - Family: bell, bell-alert, bell-check, bell-clock, bell-dot, bell-gear, bell-off, bell-pencil, bell-plus, bell-ring, bell-snooze, bell-x - Component name: BellSparkleIcon - Added: 2026-10-15 ## Alternatives - `list-sparkle`: an AI summary of a document or thread, not of notifications - `bell-alert`: critical alerts set by a rule, not chosen by AI ## Files 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. - line-round: https://gentleface.com/svg/line-round/16/bell-sparkle.svg · PNG https://gentleface.com/png/line-round/16/bell-sparkle.png · https://gentleface.com/png/line-round/32/bell-sparkle.png · https://gentleface.com/png/line-round/48/bell-sparkle.png - line-soft: https://gentleface.com/svg/line-soft/16/bell-sparkle.svg · PNG https://gentleface.com/png/line-soft/16/bell-sparkle.png · https://gentleface.com/png/line-soft/32/bell-sparkle.png · https://gentleface.com/png/line-soft/48/bell-sparkle.png - line-sharp: https://gentleface.com/svg/line-sharp/16/bell-sparkle.svg · PNG https://gentleface.com/png/line-sharp/16/bell-sparkle.png · https://gentleface.com/png/line-sharp/32/bell-sparkle.png · https://gentleface.com/png/line-sharp/48/bell-sparkle.png - solid-round: https://gentleface.com/svg/solid-round/16/bell-sparkle.svg · PNG https://gentleface.com/png/solid-round/16/bell-sparkle.png · https://gentleface.com/png/solid-round/32/bell-sparkle.png · https://gentleface.com/png/solid-round/48/bell-sparkle.png - solid-soft: https://gentleface.com/svg/solid-soft/16/bell-sparkle.svg · PNG https://gentleface.com/png/solid-soft/16/bell-sparkle.png · https://gentleface.com/png/solid-soft/32/bell-sparkle.png · https://gentleface.com/png/solid-soft/48/bell-sparkle.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/bell-sparkle.svg · PNG https://gentleface.com/png/solid-sharp/16/bell-sparkle.png · https://gentleface.com/png/solid-sharp/32/bell-sparkle.png · https://gentleface.com/png/solid-sharp/48/bell-sparkle.png The SVG of every style: https://gentleface.com/icons/bell-sparkle.json (`svg`). ## Code (line-round) 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. For another style, take its SVG from the JSON and swap the path `d`. ### SVG ```svg ``` ### React ```tsx // Gentleface "bell-sparkle" (line-round), MIT. https://gentleface.com/icons/bell-sparkle import type { SVGProps } from 'react'; export function BellSparkleIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "bell-sparkle" (line-round), MIT. https://gentleface.com/icons/bell-sparkle. Takes the text color. */ .icon-bell-sparkle { display: inline-block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M2 6.5L2 4C2 3.491 2.094 3.001 2.281 2.528C2.484 2.014 2.781 1.562 3.172 1.172C3.562 0.781 4.014 0.484 4.528 0.281C5.001 0.094 5.491 0 6 0C6.509 0 6.999 0.094 7.472 0.281C7.986 0.484 8.438 0.781 8.828 1.172C9.219 1.562 9.516 2.014 9.719 2.528C9.906 3.001 10 3.491 10 4L10 6.5C10 6.993 10.094 7.466 10.281 7.921C10.219 8.146 10.152 8.347 10.08 8.525C10.07 8.549 10.06 8.574 10.05 8.598C10.043 8.601 10.035 8.604 10.028 8.608C9.9 8.661 9.773 8.662 9.645 8.61C9.517 8.558 9.426 8.469 9.373 8.341C9.124 7.753 9 7.139 9 6.5L9 4C9 3.619 8.93 3.25 8.789 2.896C8.637 2.511 8.414 2.172 8.121 1.879C7.828 1.586 7.489 1.363 7.104 1.211C6.75 1.07 6.381 1 6 1C5.619 1 5.25 1.07 4.896 1.211C4.511 1.363 4.172 1.586 3.879 1.879C3.586 2.172 3.363 2.511 3.211 2.896C3.07 3.25 3 3.619 3 4L3 6.5C3 7.245 2.833 7.951 2.5 8.618L2.309 9L8.5 9C8.641 9 8.759 9.048 8.856 9.144C8.952 9.241 9 9.359 9 9.5C9 9.641 8.952 9.759 8.856 9.856C8.759 9.952 8.641 10 8.5 10L8 10C8 10.089 7.994 10.177 7.983 10.263C7.653 10.358 7.27 10.441 6.836 10.514C6.291 10.604 5.923 11.12 6.014 11.664C6.033 11.781 6.073 11.893 6.132 11.996C6.088 11.999 6.044 12 6 12C5.746 12 5.5 11.953 5.264 11.86C5.007 11.758 4.781 11.609 4.586 11.414C4.391 11.219 4.242 10.993 4.14 10.736C4.047 10.5 4 10.254 4 10L0.5 10C0.359 10 0.241 9.952 0.144 9.856C0.048 9.759 0 9.641 0 9.5C0 9.359 0.048 9.241 0.144 9.144C0.241 9.048 0.359 9 0.5 9L1.191 9L1.606 8.171C1.869 7.645 2 7.088 2 6.5ZM11.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'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M2 6.5L2 4C2 3.491 2.094 3.001 2.281 2.528C2.484 2.014 2.781 1.562 3.172 1.172C3.562 0.781 4.014 0.484 4.528 0.281C5.001 0.094 5.491 0 6 0C6.509 0 6.999 0.094 7.472 0.281C7.986 0.484 8.438 0.781 8.828 1.172C9.219 1.562 9.516 2.014 9.719 2.528C9.906 3.001 10 3.491 10 4L10 6.5C10 6.993 10.094 7.466 10.281 7.921C10.219 8.146 10.152 8.347 10.08 8.525C10.07 8.549 10.06 8.574 10.05 8.598C10.043 8.601 10.035 8.604 10.028 8.608C9.9 8.661 9.773 8.662 9.645 8.61C9.517 8.558 9.426 8.469 9.373 8.341C9.124 7.753 9 7.139 9 6.5L9 4C9 3.619 8.93 3.25 8.789 2.896C8.637 2.511 8.414 2.172 8.121 1.879C7.828 1.586 7.489 1.363 7.104 1.211C6.75 1.07 6.381 1 6 1C5.619 1 5.25 1.07 4.896 1.211C4.511 1.363 4.172 1.586 3.879 1.879C3.586 2.172 3.363 2.511 3.211 2.896C3.07 3.25 3 3.619 3 4L3 6.5C3 7.245 2.833 7.951 2.5 8.618L2.309 9L8.5 9C8.641 9 8.759 9.048 8.856 9.144C8.952 9.241 9 9.359 9 9.5C9 9.641 8.952 9.759 8.856 9.856C8.759 9.952 8.641 10 8.5 10L8 10C8 10.089 7.994 10.177 7.983 10.263C7.653 10.358 7.27 10.441 6.836 10.514C6.291 10.604 5.923 11.12 6.014 11.664C6.033 11.781 6.073 11.893 6.132 11.996C6.088 11.999 6.044 12 6 12C5.746 12 5.5 11.953 5.264 11.86C5.007 11.758 4.781 11.609 4.586 11.414C4.391 11.219 4.242 10.993 4.14 10.736C4.047 10.5 4 10.254 4 10L0.5 10C0.359 10 0.241 9.952 0.144 9.856C0.048 9.759 0 9.641 0 9.5C0 9.359 0.048 9.241 0.144 9.144C0.241 9.048 0.359 9 0.5 9L1.191 9L1.606 8.171C1.869 7.645 2 7.088 2 6.5ZM11.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'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } ``` ### Data URL ```text data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M2 6.5L2 4C2 3.491 2.094 3.001 2.281 2.528C2.484 2.014 2.781 1.562 3.172 1.172C3.562 0.781 4.014 0.484 4.528 0.281C5.001 0.094 5.491 0 6 0C6.509 0 6.999 0.094 7.472 0.281C7.986 0.484 8.438 0.781 8.828 1.172C9.219 1.562 9.516 2.014 9.719 2.528C9.906 3.001 10 3.491 10 4L10 6.5C10 6.993 10.094 7.466 10.281 7.921C10.219 8.146 10.152 8.347 10.08 8.525C10.07 8.549 10.06 8.574 10.05 8.598C10.043 8.601 10.035 8.604 10.028 8.608C9.9 8.661 9.773 8.662 9.645 8.61C9.517 8.558 9.426 8.469 9.373 8.341C9.124 7.753 9 7.139 9 6.5L9 4C9 3.619 8.93 3.25 8.789 2.896C8.637 2.511 8.414 2.172 8.121 1.879C7.828 1.586 7.489 1.363 7.104 1.211C6.75 1.07 6.381 1 6 1C5.619 1 5.25 1.07 4.896 1.211C4.511 1.363 4.172 1.586 3.879 1.879C3.586 2.172 3.363 2.511 3.211 2.896C3.07 3.25 3 3.619 3 4L3 6.5C3 7.245 2.833 7.951 2.5 8.618L2.309 9L8.5 9C8.641 9 8.759 9.048 8.856 9.144C8.952 9.241 9 9.359 9 9.5C9 9.641 8.952 9.759 8.856 9.856C8.759 9.952 8.641 10 8.5 10L8 10C8 10.089 7.994 10.177 7.983 10.263C7.653 10.358 7.27 10.441 6.836 10.514C6.291 10.604 5.923 11.12 6.014 11.664C6.033 11.781 6.073 11.893 6.132 11.996C6.088 11.999 6.044 12 6 12C5.746 12 5.5 11.953 5.264 11.86C5.007 11.758 4.781 11.609 4.586 11.414C4.391 11.219 4.242 10.993 4.14 10.736C4.047 10.5 4 10.254 4 10L0.5 10C0.359 10 0.241 9.952 0.144 9.856C0.048 9.759 0 9.641 0 9.5C0 9.359 0.048 9.241 0.144 9.144C0.241 9.048 0.359 9 0.5 9L1.191 9L1.606 8.171C1.869 7.645 2 7.088 2 6.5ZM11.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'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "bell-sparkle" (line-round), MIT. https://gentleface.com/icons/bell-sparkle import SwiftUI struct BellSparkleIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 2, y: 6.5)) p.addLine(to: CGPoint(x: 2, y: 4)) p.addCurve(to: CGPoint(x: 2.281, y: 2.528), control1: CGPoint(x: 2, y: 3.491), control2: CGPoint(x: 2.094, y: 3.001)) p.addCurve(to: CGPoint(x: 3.172, y: 1.172), control1: CGPoint(x: 2.484, y: 2.014), control2: CGPoint(x: 2.781, y: 1.562)) p.addCurve(to: CGPoint(x: 4.528, y: 0.281), control1: CGPoint(x: 3.562, y: 0.781), control2: CGPoint(x: 4.014, y: 0.484)) p.addCurve(to: CGPoint(x: 6, y: 0), control1: CGPoint(x: 5.001, y: 0.094), control2: CGPoint(x: 5.491, y: 0)) p.addCurve(to: CGPoint(x: 7.472, y: 0.281), control1: CGPoint(x: 6.509, y: 0), control2: CGPoint(x: 6.999, y: 0.094)) p.addCurve(to: CGPoint(x: 8.828, y: 1.172), control1: CGPoint(x: 7.986, y: 0.484), control2: CGPoint(x: 8.438, y: 0.781)) p.addCurve(to: CGPoint(x: 9.719, y: 2.528), control1: CGPoint(x: 9.219, y: 1.562), control2: CGPoint(x: 9.516, y: 2.014)) p.addCurve(to: CGPoint(x: 10, y: 4), control1: CGPoint(x: 9.906, y: 3.001), control2: CGPoint(x: 10, y: 3.491)) p.addLine(to: CGPoint(x: 10, y: 6.5)) p.addCurve(to: CGPoint(x: 10.281, y: 7.921), control1: CGPoint(x: 10, y: 6.993), control2: CGPoint(x: 10.094, y: 7.466)) p.addCurve(to: CGPoint(x: 10.08, y: 8.525), control1: CGPoint(x: 10.219, y: 8.146), control2: CGPoint(x: 10.152, y: 8.347)) p.addCurve(to: CGPoint(x: 10.05, y: 8.598), control1: CGPoint(x: 10.07, y: 8.549), control2: CGPoint(x: 10.06, y: 8.574)) p.addCurve(to: CGPoint(x: 10.028, y: 8.608), control1: CGPoint(x: 10.043, y: 8.601), control2: CGPoint(x: 10.035, y: 8.604)) p.addCurve(to: CGPoint(x: 9.645, y: 8.61), control1: CGPoint(x: 9.9, y: 8.661), control2: CGPoint(x: 9.773, y: 8.662)) p.addCurve(to: CGPoint(x: 9.373, y: 8.341), control1: CGPoint(x: 9.517, y: 8.558), control2: CGPoint(x: 9.426, y: 8.469)) p.addCurve(to: CGPoint(x: 9, y: 6.5), control1: CGPoint(x: 9.124, y: 7.753), control2: CGPoint(x: 9, y: 7.139)) p.addLine(to: CGPoint(x: 9, y: 4)) p.addCurve(to: CGPoint(x: 8.789, y: 2.896), control1: CGPoint(x: 9, y: 3.619), control2: CGPoint(x: 8.93, y: 3.25)) p.addCurve(to: CGPoint(x: 8.121, y: 1.879), control1: CGPoint(x: 8.637, y: 2.511), control2: CGPoint(x: 8.414, y: 2.172)) p.addCurve(to: CGPoint(x: 7.104, y: 1.211), control1: CGPoint(x: 7.828, y: 1.586), control2: CGPoint(x: 7.489, y: 1.363)) p.addCurve(to: CGPoint(x: 6, y: 1), control1: CGPoint(x: 6.75, y: 1.07), control2: CGPoint(x: 6.381, y: 1)) p.addCurve(to: CGPoint(x: 4.896, y: 1.211), control1: CGPoint(x: 5.619, y: 1), control2: CGPoint(x: 5.25, y: 1.07)) p.addCurve(to: CGPoint(x: 3.879, y: 1.879), control1: CGPoint(x: 4.511, y: 1.363), control2: CGPoint(x: 4.172, y: 1.586)) p.addCurve(to: CGPoint(x: 3.211, y: 2.896), control1: CGPoint(x: 3.586, y: 2.172), control2: CGPoint(x: 3.363, y: 2.511)) p.addCurve(to: CGPoint(x: 3, y: 4), control1: CGPoint(x: 3.07, y: 3.25), control2: CGPoint(x: 3, y: 3.619)) p.addLine(to: CGPoint(x: 3, y: 6.5)) p.addCurve(to: CGPoint(x: 2.5, y: 8.618), control1: CGPoint(x: 3, y: 7.245), control2: CGPoint(x: 2.833, y: 7.951)) p.addLine(to: CGPoint(x: 2.309, y: 9)) p.addLine(to: CGPoint(x: 8.5, y: 9)) p.addCurve(to: CGPoint(x: 8.856, y: 9.144), control1: CGPoint(x: 8.641, y: 9), control2: CGPoint(x: 8.759, y: 9.048)) p.addCurve(to: CGPoint(x: 9, y: 9.5), control1: CGPoint(x: 8.952, y: 9.241), control2: CGPoint(x: 9, y: 9.359)) p.addCurve(to: CGPoint(x: 8.856, y: 9.856), control1: CGPoint(x: 9, y: 9.641), control2: CGPoint(x: 8.952, y: 9.759)) p.addCurve(to: CGPoint(x: 8.5, y: 10), control1: CGPoint(x: 8.759, y: 9.952), control2: CGPoint(x: 8.641, y: 10)) p.addLine(to: CGPoint(x: 8, y: 10)) p.addCurve(to: CGPoint(x: 7.983, y: 10.263), control1: CGPoint(x: 8, y: 10.089), control2: CGPoint(x: 7.994, y: 10.177)) p.addCurve(to: CGPoint(x: 6.836, y: 10.514), control1: CGPoint(x: 7.653, y: 10.358), control2: CGPoint(x: 7.27, y: 10.441)) p.addCurve(to: CGPoint(x: 6.014, y: 11.664), control1: CGPoint(x: 6.291, y: 10.604), control2: CGPoint(x: 5.923, y: 11.12)) p.addCurve(to: CGPoint(x: 6.132, y: 11.996), control1: CGPoint(x: 6.033, y: 11.781), control2: CGPoint(x: 6.073, y: 11.893)) p.addCurve(to: CGPoint(x: 6, y: 12), control1: CGPoint(x: 6.088, y: 11.999), control2: CGPoint(x: 6.044, y: 12)) p.addCurve(to: CGPoint(x: 5.264, y: 11.86), control1: CGPoint(x: 5.746, y: 12), control2: CGPoint(x: 5.5, y: 11.953)) p.addCurve(to: CGPoint(x: 4.586, y: 11.414), control1: CGPoint(x: 5.007, y: 11.758), control2: CGPoint(x: 4.781, y: 11.609)) p.addCurve(to: CGPoint(x: 4.14, y: 10.736), control1: CGPoint(x: 4.391, y: 11.219), control2: CGPoint(x: 4.242, y: 10.993)) p.addCurve(to: CGPoint(x: 4, y: 10), control1: CGPoint(x: 4.047, y: 10.5), control2: CGPoint(x: 4, y: 10.254)) p.addLine(to: CGPoint(x: 0.5, y: 10)) p.addCurve(to: CGPoint(x: 0.144, y: 9.856), control1: CGPoint(x: 0.359, y: 10), control2: CGPoint(x: 0.241, y: 9.952)) p.addCurve(to: CGPoint(x: 0, y: 9.5), control1: CGPoint(x: 0.048, y: 9.759), control2: CGPoint(x: 0, y: 9.641)) p.addCurve(to: CGPoint(x: 0.144, y: 9.144), control1: CGPoint(x: 0, y: 9.359), control2: CGPoint(x: 0.048, y: 9.241)) p.addCurve(to: CGPoint(x: 0.5, y: 9), control1: CGPoint(x: 0.241, y: 9.048), control2: CGPoint(x: 0.359, y: 9)) p.addLine(to: CGPoint(x: 1.191, y: 9)) p.addLine(to: CGPoint(x: 1.606, y: 8.171)) p.addCurve(to: CGPoint(x: 2, y: 6.5), control1: CGPoint(x: 1.869, y: 7.645), control2: CGPoint(x: 2, y: 7.088)) p.closeSubpath() p.move(to: CGPoint(x: 11.5, y: 16)) p.addCurve(to: CGPoint(x: 7, y: 11.5), control1: CGPoint(x: 11, y: 13), control2: CGPoint(x: 10, y: 12)) p.addCurve(to: CGPoint(x: 11.5, y: 7), control1: CGPoint(x: 10, y: 11), control2: CGPoint(x: 11, y: 10)) p.addCurve(to: CGPoint(x: 16, y: 11.5), control1: CGPoint(x: 12, y: 10), control2: CGPoint(x: 13, y: 11)) p.addCurve(to: CGPoint(x: 11.5, y: 16), control1: CGPoint(x: 13, y: 12), control2: CGPoint(x: 12, y: 13)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // BellSparkleIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "bell-sparkle" (line-round), MIT. https://gentleface.com/icons/bell-sparkle import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.graphics.vector.addPathNodes import androidx.compose.ui.unit.dp val BellSparkleIcon: ImageVector by lazy { ImageVector.Builder( name = "bell-sparkle", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M2 6.5L2 4C2 3.491 2.094 3.001 2.281 2.528C2.484 2.014 2.781 1.562 3.172 1.172C3.562 0.781 4.014 0.484 4.528 0.281C5.001 0.094 5.491 0 6 0C6.509 0 6.999 0.094 7.472 0.281C7.986 0.484 8.438 0.781 8.828 1.172C9.219 1.562 9.516 2.014 9.719 2.528C9.906 3.001 10 3.491 10 4L10 6.5C10 6.993 10.094 7.466 10.281 7.921C10.219 8.146 10.152 8.347 10.08 8.525C10.07 8.549 10.06 8.574 10.05 8.598C10.043 8.601 10.035 8.604 10.028 8.608C9.9 8.661 9.773 8.662 9.645 8.61C9.517 8.558 9.426 8.469 9.373 8.341C9.124 7.753 9 7.139 9 6.5L9 4C9 3.619 8.93 3.25 8.789 2.896C8.637 2.511 8.414 2.172 8.121 1.879C7.828 1.586 7.489 1.363 7.104 1.211C6.75 1.07 6.381 1 6 1C5.619 1 5.25 1.07 4.896 1.211C4.511 1.363 4.172 1.586 3.879 1.879C3.586 2.172 3.363 2.511 3.211 2.896C3.07 3.25 3 3.619 3 4L3 6.5C3 7.245 2.833 7.951 2.5 8.618L2.309 9L8.5 9C8.641 9 8.759 9.048 8.856 9.144C8.952 9.241 9 9.359 9 9.5C9 9.641 8.952 9.759 8.856 9.856C8.759 9.952 8.641 10 8.5 10L8 10C8 10.089 7.994 10.177 7.983 10.263C7.653 10.358 7.27 10.441 6.836 10.514C6.291 10.604 5.923 11.12 6.014 11.664C6.033 11.781 6.073 11.893 6.132 11.996C6.088 11.999 6.044 12 6 12C5.746 12 5.5 11.953 5.264 11.86C5.007 11.758 4.781 11.609 4.586 11.414C4.391 11.219 4.242 10.993 4.14 10.736C4.047 10.5 4 10.254 4 10L0.5 10C0.359 10 0.241 9.952 0.144 9.856C0.048 9.759 0 9.641 0 9.5C0 9.359 0.048 9.241 0.144 9.144C0.241 9.048 0.359 9 0.5 9L1.191 9L1.606 8.171C1.869 7.645 2 7.088 2 6.5ZM11.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"), fill = SolidColor(Color.Black), ).build() } // Icon(BellSparkleIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "bell-sparkle" (line-round), MIT. https://gentleface.com/icons/bell-sparkle import 'package:flutter/widgets.dart'; class BellSparkleIcon extends StatelessWidget { const BellSparkleIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _BellSparkleIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _BellSparkleIconPainter extends CustomPainter { _BellSparkleIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(2, 6.5) ..lineTo(2, 4) ..cubicTo(2, 3.491, 2.094, 3.001, 2.281, 2.528) ..cubicTo(2.484, 2.014, 2.781, 1.562, 3.172, 1.172) ..cubicTo(3.562, 0.781, 4.014, 0.484, 4.528, 0.281) ..cubicTo(5.001, 0.094, 5.491, 0, 6, 0) ..cubicTo(6.509, 0, 6.999, 0.094, 7.472, 0.281) ..cubicTo(7.986, 0.484, 8.438, 0.781, 8.828, 1.172) ..cubicTo(9.219, 1.562, 9.516, 2.014, 9.719, 2.528) ..cubicTo(9.906, 3.001, 10, 3.491, 10, 4) ..lineTo(10, 6.5) ..cubicTo(10, 6.993, 10.094, 7.466, 10.281, 7.921) ..cubicTo(10.219, 8.146, 10.152, 8.347, 10.08, 8.525) ..cubicTo(10.07, 8.549, 10.06, 8.574, 10.05, 8.598) ..cubicTo(10.043, 8.601, 10.035, 8.604, 10.028, 8.608) ..cubicTo(9.9, 8.661, 9.773, 8.662, 9.645, 8.61) ..cubicTo(9.517, 8.558, 9.426, 8.469, 9.373, 8.341) ..cubicTo(9.124, 7.753, 9, 7.139, 9, 6.5) ..lineTo(9, 4) ..cubicTo(9, 3.619, 8.93, 3.25, 8.789, 2.896) ..cubicTo(8.637, 2.511, 8.414, 2.172, 8.121, 1.879) ..cubicTo(7.828, 1.586, 7.489, 1.363, 7.104, 1.211) ..cubicTo(6.75, 1.07, 6.381, 1, 6, 1) ..cubicTo(5.619, 1, 5.25, 1.07, 4.896, 1.211) ..cubicTo(4.511, 1.363, 4.172, 1.586, 3.879, 1.879) ..cubicTo(3.586, 2.172, 3.363, 2.511, 3.211, 2.896) ..cubicTo(3.07, 3.25, 3, 3.619, 3, 4) ..lineTo(3, 6.5) ..cubicTo(3, 7.245, 2.833, 7.951, 2.5, 8.618) ..lineTo(2.309, 9) ..lineTo(8.5, 9) ..cubicTo(8.641, 9, 8.759, 9.048, 8.856, 9.144) ..cubicTo(8.952, 9.241, 9, 9.359, 9, 9.5) ..cubicTo(9, 9.641, 8.952, 9.759, 8.856, 9.856) ..cubicTo(8.759, 9.952, 8.641, 10, 8.5, 10) ..lineTo(8, 10) ..cubicTo(8, 10.089, 7.994, 10.177, 7.983, 10.263) ..cubicTo(7.653, 10.358, 7.27, 10.441, 6.836, 10.514) ..cubicTo(6.291, 10.604, 5.923, 11.12, 6.014, 11.664) ..cubicTo(6.033, 11.781, 6.073, 11.893, 6.132, 11.996) ..cubicTo(6.088, 11.999, 6.044, 12, 6, 12) ..cubicTo(5.746, 12, 5.5, 11.953, 5.264, 11.86) ..cubicTo(5.007, 11.758, 4.781, 11.609, 4.586, 11.414) ..cubicTo(4.391, 11.219, 4.242, 10.993, 4.14, 10.736) ..cubicTo(4.047, 10.5, 4, 10.254, 4, 10) ..lineTo(0.5, 10) ..cubicTo(0.359, 10, 0.241, 9.952, 0.144, 9.856) ..cubicTo(0.048, 9.759, 0, 9.641, 0, 9.5) ..cubicTo(0, 9.359, 0.048, 9.241, 0.144, 9.144) ..cubicTo(0.241, 9.048, 0.359, 9, 0.5, 9) ..lineTo(1.191, 9) ..lineTo(1.606, 8.171) ..cubicTo(1.869, 7.645, 2, 7.088, 2, 6.5) ..close() ..moveTo(11.5, 16) ..cubicTo(11, 13, 10, 12, 7, 11.5) ..cubicTo(10, 11, 11, 10, 11.5, 7) ..cubicTo(12, 10, 13, 11, 16, 11.5) ..cubicTo(13, 12, 12, 13, 11.5, 16) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_BellSparkleIconPainter old) => old.color != color; } ```