# message-sparkle icon Message sparkle. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/message-sparkle - Category: Communication - Use it for: ai chat, ai assistant, ask ai, chat with ai - Example: Ask AI about this page - Built from: message + sparkle - Tags: chat, comment, speech-bubble, conversation, reply, sparkle - Family: message, message-alert, message-bolt, message-check, message-circle, message-clock, message-code, message-dot, message-dots, message-gear, message-heart, message-lock, message-off, message-pencil, message-plus, message-question, message-quote, message-search, message-star, message-text, message-thread, message-user, message-x, messages - Component name: MessageSparkleIcon - Added: 2026-10-15 ## Alternatives - `bot`: an AI agent or chatbot (bot owns chatbot) - `sparkles`: an AI action outside a chat ## Also fits - ai search: ask an AI assistant in a chat - bot: an AI assistant chat with no bot persona - ai email: chat with an AI assistant - chat: chat with AI - quick reply: an AI-suggested reply - ask question: ask AI - prompt: ask an AI assistant in a chat (ask-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/message-sparkle.svg · PNG https://gentleface.com/png/line-round/16/message-sparkle.png · https://gentleface.com/png/line-round/32/message-sparkle.png · https://gentleface.com/png/line-round/48/message-sparkle.png - line-soft: https://gentleface.com/svg/line-soft/16/message-sparkle.svg · PNG https://gentleface.com/png/line-soft/16/message-sparkle.png · https://gentleface.com/png/line-soft/32/message-sparkle.png · https://gentleface.com/png/line-soft/48/message-sparkle.png - line-sharp: https://gentleface.com/svg/line-sharp/16/message-sparkle.svg · PNG https://gentleface.com/png/line-sharp/16/message-sparkle.png · https://gentleface.com/png/line-sharp/32/message-sparkle.png · https://gentleface.com/png/line-sharp/48/message-sparkle.png - solid-round: https://gentleface.com/svg/solid-round/16/message-sparkle.svg · PNG https://gentleface.com/png/solid-round/16/message-sparkle.png · https://gentleface.com/png/solid-round/32/message-sparkle.png · https://gentleface.com/png/solid-round/48/message-sparkle.png - solid-soft: https://gentleface.com/svg/solid-soft/16/message-sparkle.svg · PNG https://gentleface.com/png/solid-soft/16/message-sparkle.png · https://gentleface.com/png/solid-soft/32/message-sparkle.png · https://gentleface.com/png/solid-soft/48/message-sparkle.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/message-sparkle.svg · PNG https://gentleface.com/png/solid-sharp/16/message-sparkle.png · https://gentleface.com/png/solid-sharp/32/message-sparkle.png · https://gentleface.com/png/solid-sharp/48/message-sparkle.png The SVG of every style: https://gentleface.com/icons/message-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 "message-sparkle" (line-round), MIT. https://gentleface.com/icons/message-sparkle import type { SVGProps } from 'react'; export function MessageSparkleIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "message-sparkle" (line-round), MIT. https://gentleface.com/icons/message-sparkle. Takes the text color. */ .icon-message-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='M1.854 14.854C1.754 14.953 1.636 15.003 1.5 15.003C1.364 15.003 1.246 14.953 1.146 14.854C1.049 14.756 1 14.638 1 14.5L1 4C1 3.746 1.047 3.5 1.14 3.264C1.242 3.007 1.391 2.781 1.586 2.586C1.781 2.391 2.007 2.242 2.264 2.14C2.5 2.047 2.746 2 3 2L13 2C13.254 2 13.5 2.047 13.736 2.14C13.993 2.242 14.219 2.391 14.414 2.586C14.609 2.781 14.758 3.007 14.86 3.264C14.953 3.5 15 3.746 15 4L15 9.588C15 9.729 14.952 9.847 14.856 9.944C14.759 10.04 14.641 10.088 14.5 10.088L14.495 10.088C14.488 10.085 14.482 10.083 14.475 10.08C14.347 10.029 14.228 9.973 14.116 9.913C14.039 9.823 14 9.714 14 9.588L14 4C14 3.724 13.902 3.488 13.707 3.293C13.512 3.098 13.276 3 13 3L3 3C2.724 3 2.488 3.098 2.293 3.293C2.098 3.488 2 3.724 2 4L2 13.293L3.439 11.854C3.689 11.604 3.975 11.406 4.297 11.26C4.426 11.202 4.553 11.197 4.681 11.244C4.808 11.292 4.901 11.381 4.959 11.509C5.016 11.635 5.02 11.762 4.971 11.891C4.923 12.021 4.836 12.114 4.71 12.171C4.498 12.266 4.311 12.396 4.146 12.561L1.854 14.854ZM11.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='M1.854 14.854C1.754 14.953 1.636 15.003 1.5 15.003C1.364 15.003 1.246 14.953 1.146 14.854C1.049 14.756 1 14.638 1 14.5L1 4C1 3.746 1.047 3.5 1.14 3.264C1.242 3.007 1.391 2.781 1.586 2.586C1.781 2.391 2.007 2.242 2.264 2.14C2.5 2.047 2.746 2 3 2L13 2C13.254 2 13.5 2.047 13.736 2.14C13.993 2.242 14.219 2.391 14.414 2.586C14.609 2.781 14.758 3.007 14.86 3.264C14.953 3.5 15 3.746 15 4L15 9.588C15 9.729 14.952 9.847 14.856 9.944C14.759 10.04 14.641 10.088 14.5 10.088L14.495 10.088C14.488 10.085 14.482 10.083 14.475 10.08C14.347 10.029 14.228 9.973 14.116 9.913C14.039 9.823 14 9.714 14 9.588L14 4C14 3.724 13.902 3.488 13.707 3.293C13.512 3.098 13.276 3 13 3L3 3C2.724 3 2.488 3.098 2.293 3.293C2.098 3.488 2 3.724 2 4L2 13.293L3.439 11.854C3.689 11.604 3.975 11.406 4.297 11.26C4.426 11.202 4.553 11.197 4.681 11.244C4.808 11.292 4.901 11.381 4.959 11.509C5.016 11.635 5.02 11.762 4.971 11.891C4.923 12.021 4.836 12.114 4.71 12.171C4.498 12.266 4.311 12.396 4.146 12.561L1.854 14.854ZM11.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='M1.854 14.854C1.754 14.953 1.636 15.003 1.5 15.003C1.364 15.003 1.246 14.953 1.146 14.854C1.049 14.756 1 14.638 1 14.5L1 4C1 3.746 1.047 3.5 1.14 3.264C1.242 3.007 1.391 2.781 1.586 2.586C1.781 2.391 2.007 2.242 2.264 2.14C2.5 2.047 2.746 2 3 2L13 2C13.254 2 13.5 2.047 13.736 2.14C13.993 2.242 14.219 2.391 14.414 2.586C14.609 2.781 14.758 3.007 14.86 3.264C14.953 3.5 15 3.746 15 4L15 9.588C15 9.729 14.952 9.847 14.856 9.944C14.759 10.04 14.641 10.088 14.5 10.088L14.495 10.088C14.488 10.085 14.482 10.083 14.475 10.08C14.347 10.029 14.228 9.973 14.116 9.913C14.039 9.823 14 9.714 14 9.588L14 4C14 3.724 13.902 3.488 13.707 3.293C13.512 3.098 13.276 3 13 3L3 3C2.724 3 2.488 3.098 2.293 3.293C2.098 3.488 2 3.724 2 4L2 13.293L3.439 11.854C3.689 11.604 3.975 11.406 4.297 11.26C4.426 11.202 4.553 11.197 4.681 11.244C4.808 11.292 4.901 11.381 4.959 11.509C5.016 11.635 5.02 11.762 4.971 11.891C4.923 12.021 4.836 12.114 4.71 12.171C4.498 12.266 4.311 12.396 4.146 12.561L1.854 14.854ZM11.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 "message-sparkle" (line-round), MIT. https://gentleface.com/icons/message-sparkle import SwiftUI struct MessageSparkleIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 1.854, y: 14.854)) p.addCurve(to: CGPoint(x: 1.5, y: 15.003), control1: CGPoint(x: 1.754, y: 14.953), control2: CGPoint(x: 1.636, y: 15.003)) p.addCurve(to: CGPoint(x: 1.146, y: 14.854), control1: CGPoint(x: 1.364, y: 15.003), control2: CGPoint(x: 1.246, y: 14.953)) p.addCurve(to: CGPoint(x: 1, y: 14.5), control1: CGPoint(x: 1.049, y: 14.756), control2: CGPoint(x: 1, y: 14.638)) p.addLine(to: CGPoint(x: 1, y: 4)) p.addCurve(to: CGPoint(x: 1.14, y: 3.264), control1: CGPoint(x: 1, y: 3.746), control2: CGPoint(x: 1.047, y: 3.5)) p.addCurve(to: CGPoint(x: 1.586, y: 2.586), control1: CGPoint(x: 1.242, y: 3.007), control2: CGPoint(x: 1.391, y: 2.781)) p.addCurve(to: CGPoint(x: 2.264, y: 2.14), control1: CGPoint(x: 1.781, y: 2.391), control2: CGPoint(x: 2.007, y: 2.242)) p.addCurve(to: CGPoint(x: 3, y: 2), control1: CGPoint(x: 2.5, y: 2.047), control2: CGPoint(x: 2.746, y: 2)) p.addLine(to: CGPoint(x: 13, y: 2)) p.addCurve(to: CGPoint(x: 13.736, y: 2.14), control1: CGPoint(x: 13.254, y: 2), control2: CGPoint(x: 13.5, y: 2.047)) p.addCurve(to: CGPoint(x: 14.414, y: 2.586), control1: CGPoint(x: 13.993, y: 2.242), control2: CGPoint(x: 14.219, y: 2.391)) p.addCurve(to: CGPoint(x: 14.86, y: 3.264), control1: CGPoint(x: 14.609, y: 2.781), control2: CGPoint(x: 14.758, y: 3.007)) p.addCurve(to: CGPoint(x: 15, y: 4), control1: CGPoint(x: 14.953, y: 3.5), control2: CGPoint(x: 15, y: 3.746)) p.addLine(to: CGPoint(x: 15, y: 9.588)) p.addCurve(to: CGPoint(x: 14.856, y: 9.944), control1: CGPoint(x: 15, y: 9.729), control2: CGPoint(x: 14.952, y: 9.847)) p.addCurve(to: CGPoint(x: 14.5, y: 10.088), control1: CGPoint(x: 14.759, y: 10.04), control2: CGPoint(x: 14.641, y: 10.088)) p.addLine(to: CGPoint(x: 14.495, y: 10.088)) p.addCurve(to: CGPoint(x: 14.475, y: 10.08), control1: CGPoint(x: 14.488, y: 10.085), control2: CGPoint(x: 14.482, y: 10.083)) p.addCurve(to: CGPoint(x: 14.116, y: 9.913), control1: CGPoint(x: 14.347, y: 10.029), control2: CGPoint(x: 14.228, y: 9.973)) p.addCurve(to: CGPoint(x: 14, y: 9.588), control1: CGPoint(x: 14.039, y: 9.823), control2: CGPoint(x: 14, y: 9.714)) p.addLine(to: CGPoint(x: 14, y: 4)) p.addCurve(to: CGPoint(x: 13.707, y: 3.293), control1: CGPoint(x: 14, y: 3.724), control2: CGPoint(x: 13.902, y: 3.488)) p.addCurve(to: CGPoint(x: 13, y: 3), control1: CGPoint(x: 13.512, y: 3.098), control2: CGPoint(x: 13.276, y: 3)) p.addLine(to: CGPoint(x: 3, y: 3)) p.addCurve(to: CGPoint(x: 2.293, y: 3.293), control1: CGPoint(x: 2.724, y: 3), control2: CGPoint(x: 2.488, y: 3.098)) p.addCurve(to: CGPoint(x: 2, y: 4), control1: CGPoint(x: 2.098, y: 3.488), control2: CGPoint(x: 2, y: 3.724)) p.addLine(to: CGPoint(x: 2, y: 13.293)) p.addLine(to: CGPoint(x: 3.439, y: 11.854)) p.addCurve(to: CGPoint(x: 4.297, y: 11.26), control1: CGPoint(x: 3.689, y: 11.604), control2: CGPoint(x: 3.975, y: 11.406)) p.addCurve(to: CGPoint(x: 4.681, y: 11.244), control1: CGPoint(x: 4.426, y: 11.202), control2: CGPoint(x: 4.553, y: 11.197)) p.addCurve(to: CGPoint(x: 4.959, y: 11.509), control1: CGPoint(x: 4.808, y: 11.292), control2: CGPoint(x: 4.901, y: 11.381)) p.addCurve(to: CGPoint(x: 4.971, y: 11.891), control1: CGPoint(x: 5.016, y: 11.635), control2: CGPoint(x: 5.02, y: 11.762)) p.addCurve(to: CGPoint(x: 4.71, y: 12.171), control1: CGPoint(x: 4.923, y: 12.021), control2: CGPoint(x: 4.836, y: 12.114)) p.addCurve(to: CGPoint(x: 4.146, y: 12.561), control1: CGPoint(x: 4.498, y: 12.266), control2: CGPoint(x: 4.311, y: 12.396)) p.addLine(to: CGPoint(x: 1.854, y: 14.854)) 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)) } } // MessageSparkleIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "message-sparkle" (line-round), MIT. https://gentleface.com/icons/message-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 MessageSparkleIcon: ImageVector by lazy { ImageVector.Builder( name = "message-sparkle", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M1.854 14.854C1.754 14.953 1.636 15.003 1.5 15.003C1.364 15.003 1.246 14.953 1.146 14.854C1.049 14.756 1 14.638 1 14.5L1 4C1 3.746 1.047 3.5 1.14 3.264C1.242 3.007 1.391 2.781 1.586 2.586C1.781 2.391 2.007 2.242 2.264 2.14C2.5 2.047 2.746 2 3 2L13 2C13.254 2 13.5 2.047 13.736 2.14C13.993 2.242 14.219 2.391 14.414 2.586C14.609 2.781 14.758 3.007 14.86 3.264C14.953 3.5 15 3.746 15 4L15 9.588C15 9.729 14.952 9.847 14.856 9.944C14.759 10.04 14.641 10.088 14.5 10.088L14.495 10.088C14.488 10.085 14.482 10.083 14.475 10.08C14.347 10.029 14.228 9.973 14.116 9.913C14.039 9.823 14 9.714 14 9.588L14 4C14 3.724 13.902 3.488 13.707 3.293C13.512 3.098 13.276 3 13 3L3 3C2.724 3 2.488 3.098 2.293 3.293C2.098 3.488 2 3.724 2 4L2 13.293L3.439 11.854C3.689 11.604 3.975 11.406 4.297 11.26C4.426 11.202 4.553 11.197 4.681 11.244C4.808 11.292 4.901 11.381 4.959 11.509C5.016 11.635 5.02 11.762 4.971 11.891C4.923 12.021 4.836 12.114 4.71 12.171C4.498 12.266 4.311 12.396 4.146 12.561L1.854 14.854ZM11.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(MessageSparkleIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "message-sparkle" (line-round), MIT. https://gentleface.com/icons/message-sparkle import 'package:flutter/widgets.dart'; class MessageSparkleIcon extends StatelessWidget { const MessageSparkleIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _MessageSparkleIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _MessageSparkleIconPainter extends CustomPainter { _MessageSparkleIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(1.854, 14.854) ..cubicTo(1.754, 14.953, 1.636, 15.003, 1.5, 15.003) ..cubicTo(1.364, 15.003, 1.246, 14.953, 1.146, 14.854) ..cubicTo(1.049, 14.756, 1, 14.638, 1, 14.5) ..lineTo(1, 4) ..cubicTo(1, 3.746, 1.047, 3.5, 1.14, 3.264) ..cubicTo(1.242, 3.007, 1.391, 2.781, 1.586, 2.586) ..cubicTo(1.781, 2.391, 2.007, 2.242, 2.264, 2.14) ..cubicTo(2.5, 2.047, 2.746, 2, 3, 2) ..lineTo(13, 2) ..cubicTo(13.254, 2, 13.5, 2.047, 13.736, 2.14) ..cubicTo(13.993, 2.242, 14.219, 2.391, 14.414, 2.586) ..cubicTo(14.609, 2.781, 14.758, 3.007, 14.86, 3.264) ..cubicTo(14.953, 3.5, 15, 3.746, 15, 4) ..lineTo(15, 9.588) ..cubicTo(15, 9.729, 14.952, 9.847, 14.856, 9.944) ..cubicTo(14.759, 10.04, 14.641, 10.088, 14.5, 10.088) ..lineTo(14.495, 10.088) ..cubicTo(14.488, 10.085, 14.482, 10.083, 14.475, 10.08) ..cubicTo(14.347, 10.029, 14.228, 9.973, 14.116, 9.913) ..cubicTo(14.039, 9.823, 14, 9.714, 14, 9.588) ..lineTo(14, 4) ..cubicTo(14, 3.724, 13.902, 3.488, 13.707, 3.293) ..cubicTo(13.512, 3.098, 13.276, 3, 13, 3) ..lineTo(3, 3) ..cubicTo(2.724, 3, 2.488, 3.098, 2.293, 3.293) ..cubicTo(2.098, 3.488, 2, 3.724, 2, 4) ..lineTo(2, 13.293) ..lineTo(3.439, 11.854) ..cubicTo(3.689, 11.604, 3.975, 11.406, 4.297, 11.26) ..cubicTo(4.426, 11.202, 4.553, 11.197, 4.681, 11.244) ..cubicTo(4.808, 11.292, 4.901, 11.381, 4.959, 11.509) ..cubicTo(5.016, 11.635, 5.02, 11.762, 4.971, 11.891) ..cubicTo(4.923, 12.021, 4.836, 12.114, 4.71, 12.171) ..cubicTo(4.498, 12.266, 4.311, 12.396, 4.146, 12.561) ..lineTo(1.854, 14.854) ..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(_MessageSparkleIconPainter old) => old.color != color; } ```