Home/Libraries/SmartIcons Glyph (Iconify)/bubble-message-dot

SmartIcons Glyph (Iconify)

BubbleMessageDot

License: CC-BY-SA-4.0

ICON SIZE

COLOR PICKER

Download SVG without fill color (CSS-styleable)

<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 17 16"><path fill="#818cf8" fill-rule="evenodd" d="M14.1 0H3.902C2.873 0 2.039.795 2.039 2.094v5.844c0 1.299.834 2.051 1.863 2.051h5.7l-1.57 4.98l4.474-4.98h1.595c1.029 0 1.864-.752 1.864-2.051V2.094C15.964.795 15.129 0 14.1 0M5.02 6.312a1.31 1.31 0 0 1-1.301-1.318c0-.728.582-1.317 1.301-1.317c.721 0 1.301.59 1.301 1.317A1.31 1.31 0 0 1 5.02 6.312M9 6.24c-.709 0-1.281-.558-1.281-1.246S8.291 3.749 9 3.749c.707 0 1.281.558 1.281 1.245c0 .689-.574 1.246-1.281 1.246m4 0c-.705 0-1.281-.558-1.281-1.246S12.295 3.749 13 3.749c.707 0 1.281.558 1.281 1.245c0 .689-.574 1.246-1.281 1.246"/></svg>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard

Overview Dashboard

PROGRESS STEPPER

BUTTON UI ACTIONS

SCALABILITY & CLARITY

12px

16px

24px

32px

48px

“

Highly adaptable, clean vectors that scale perfectly across modern UI components, navigation bars, and mobile actions. Perfectly pre-vetted for production deployment.

IconSearch Presets

Frequently Asked Questions

Q.How do I use this icon in my React/Next.js project?

You have two choices: install the official package listed under the "REACT IMPORT" tab (e.g. npm install @iconify/react) and import the icon directly, or copy the complete React Component code from the "STANDALONE JSX" tab and paste it directly into a local file (e.g. BubbleMessageDotIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **CC-BY-SA-4.0** license. The license grants full permissions for personal and commercial usage (e.g., in SaaS platforms, client projects, or business landing pages). Attributing the icon creator is generally not required for MIT/ISC licenses, but check details on our dedicated License Guide.

Q.What is the "Download SVG without fill color" toggle?

Many SVGs ship with inline fill="..." attributes. By checking this toggle, we strip these attributes and enforce fill="none", making the SVG fully styleable via CSS classes or Tailwind utility classes like fill-current.