Home/Libraries/Fluent Emoji Flat (Iconify)/bubbles

Fluent Emoji Flat (Iconify)

Bubbles

License: MITCommercial Safe

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 32 32"><g fill="none"><path fill="#818cf8" d="M21.5 18a7.5 7.5 0 1 0 0-15a7.5 7.5 0 0 0 0 15m-10.75-3.625a4.125 4.125 0 1 1-8.25 0a4.125 4.125 0 0 1 8.25 0M19.599 24.5a5.099 5.099 0 1 1-10.198 0a5.099 5.099 0 0 1 10.198 0"/><path fill="#818cf8" d="M29 10.5a7.5 7.5 0 0 1-5.718 7.287a6.5 6.5 0 1 0-9.07-9.07A7.5 7.5 0 0 1 29 10.5m-9.5 14a4.99 4.99 0 0 1-1.823 3.86a5.5 5.5 0 0 0-7.038-7.038A5 5 0 0 1 19.5 24.5"/><path fill="#818cf8" d="M29.5 10.5a8 8 0 0 1-5.337 7.546a7.5 7.5 0 1 0-10.21-10.21A8 8 0 0 1 29.5 10.5m-9.703 13.716a4.76 4.76 0 0 1-1.077 3.021a5.5 5.5 0 0 0-6.34-7.123a4.9 4.9 0 0 1 2.55-.713c2.688 0 4.867 2.156 4.867 4.815"/><path fill="#818cf8" d="M29.5 8c.296.784.435 2.124.485 3a8.46 8.46 0 0 1-1.995 4.99c-1.481 1.254-3.397 2.51-5.49 2.51c-.177 0-.353-.142-.527-.284c-.16-.128-.317-.256-.473-.274a8.5 8.5 0 0 0 7.04-11.206c.46.264.724.637.96 1.264m-18.507 6.75c-.005-.924-.34-1.887-.747-2.244A4.5 4.5 0 0 1 6.5 18.473c.077.008.146.05.214.09c.077.046.154.093.244.093c1.115 0 2.107-.37 2.964-1.234c.792-.798 1.078-1.548 1.071-2.672m8.154 7.306q.072.114.14.215c.186.283.342.521.458.883c.145.454.227 1.1.25 1.596a5.48 5.48 0 0 1-1.364 3.381c-.969.852-2.291 1.563-3.683 1.563c-.088 0-.16-.054-.234-.109c-.068-.05-.136-.1-.215-.108a5.5 5.5 0 0 0 4.648-7.421"/><path fill="#818cf8" d="M29.986 11q.015-.248.014-.5a8.48 8.48 0 0 0-2.709-6.222A8.46 8.46 0 0 0 22.5 2.8c-.751 0-1.48.097-2.173.28Q20.902 3 21.5 3a8.5 8.5 0 0 1 8.486 8M11 14.5q0 .126-.007.25a4.5 4.5 0 0 0-4.243-4.243a.3.3 0 0 0 .117-.045a.3.3 0 0 1 .125-.044c1.67.089 2.144.488 2.93 1.16A4.48 4.48 0 0 1 11 14.5m8.994 10.25a5.48 5.48 0 0 0-1.363-3.881c-.954-.9-2.093-1.491-3.508-1.55c-.042 0-.116.047-.19.094a.6.6 0 0 1-.18.093a5.5 5.5 0 0 1 5.241 5.244M15 29.5a5.48 5.48 0 0 0 3.631-1.369A5.5 5.5 0 0 1 14.5 30a5.48 5.48 0 0 1-3.753-1.48C9.5 26.87 9.267 25.81 9.5 24a5.5 5.5 0 0 0 5.5 5.5m-8-11a4.48 4.48 0 0 0 2.922-1.078A4.49 4.49 0 0 1 6.5 19a4.5 4.5 0 0 1-3.316-1.458c-.581-.983-.82-1.894-.82-3.067c.022-.076.034-.135.044-.189A.9.9 0 0 1 2.5 14A4.5 4.5 0 0 0 7 18.5m9.01-1.51A8.47 8.47 0 0 0 21.5 19a8.48 8.48 0 0 0 6.49-3.01a8.501 8.501 0 0 1-13.931-5.49c-.02.156-.147.314-.275.473c-.142.174-.284.35-.284.527c0 2.093 1.256 4.009 2.51 5.49"/><path fill="#818cf8" d="M24.969 10.969a3.5 3.5 0 0 0 .963-.274a3.501 3.501 0 0 0-4.664-4.54a3.5 3.5 0 0 0-.237.876a3.5 3.5 0 0 1 2.944.994a3.5 3.5 0 0 1 .994 2.944M8.823 14.823a2 2 0 0 1-.374.126q.05-.216.051-.449a2 2 0 0 0-2.45-1.95c.048-.222.127-.373.127-.373a2 2 0 0 1 2.646 2.646m7.237 10.171c.28-.07.53-.185.75-.332c.17-.963-.327-1.845-1.063-2.348s-1.948-.714-2.694-.21a2.4 2.4 0 0 0-.038.78a2.687 2.687 0 0 1 3.045 2.11"/><path fill="#818cf8" d="M26.125 5.875a3.5 3.5 0 0 0-4.488-.389q-.25.356-.402.75a3.5 3.5 0 0 1 4.53 4.529c.26-.101.513-.235.748-.401a3.5 3.5 0 0 0-.388-4.489M9.142 14.642q-.15.105-.319.181a2 2 0 0 0-2.646-2.646c.065-.13.12-.228.181-.32c.324-.225.71-.446 1.135-.446c.507 0 1.119.136 1.472.447c.415.366.647 1.017.647 1.614c0 .425-.244.846-.47 1.17m7.6 10.065c.27-.166.505-.382.692-.636c.536-.726-.063-2.159-.692-2.744c-.809-.753-2.45-.843-3.263-.172c-.213.29-.365.628-.435.996a2.686 2.686 0 0 1 3.698 2.556"/><path fill="#818cf8" d="M26.975 9.975a3.5 3.5 0 0 1-.55.45a3.501 3.501 0 0 0-4.85-4.85q.194-.292.45-.55a3.5 3.5 0 1 1 4.95 4.95M9.142 14.642a2 2 0 1 0-2.784-2.784a2 2 0 0 1 2.784 2.784m8.221 9.52a2.457 2.457 0 1 0-3.918-2.96a2.687 2.687 0 0 1 3.918 2.96"/><path fill="#818cf8" d="M22.5 3c2.093 0 4.009.756 5.49 2.01a8.5 8.5 0 1 0-11.98 11.98A8.5 8.5 0 0 1 22.5 3M9.922 11.578a4.5 4.5 0 0 0-6.344 6.344a4.5 4.5 0 1 1 6.344-6.344m8.709 9.291a5.5 5.5 0 0 0-7.762 7.762a5.5 5.5 0 1 1 7.762-7.762"/></g></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. BubblesIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **MIT** 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.