Home/Libraries/Freehand free icons (Iconify)/messages-people-user-bubble

Freehand free icons (Iconify)

MessagesPeopleUserBubble

License: CC-BY-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 24 24"><path fill="#818cf8" d="M7.624 7.935a5 5 0 0 0-.64-.21a4.15 4.15 0 0 0 1.28-1.629c1.649-3.689-3.49-5.088-5.569-2.519c-1 1.28-1.22 3.059.24 4.148q.293.198.61.35a5.6 5.6 0 0 0-2 1.73a8.8 8.8 0 0 0-1.269 3.198a7.7 7.7 0 0 0 0 3.369a1.44 1.44 0 0 0 1.42 1.15c.276-.006.547-.078.79-.21q-.077 1.364 0 2.729c.05.781.168 1.557.35 2.319a2.22 2.22 0 0 0 2.209 1.639a2.61 2.61 0 0 0 2.259-1.58a6 6 0 0 0 .4-1.699c.1-1 .09-2.119.12-3.288h.27a1.75 1.75 0 0 0 1.699-1.52a13.9 13.9 0 0 0 0-5.088a4 4 0 0 0-2.17-2.889M3.425 4.127c1.61-2.32 4.998-.66 3.999 1.55a2.8 2.8 0 0 1-1.7 1.509a2.38 2.38 0 0 1-2.119-.4c-1-.64-.79-1.78-.18-2.66m5.488 11.685a.9.9 0 0 1-.84.81c-.37 0-.71-.25-.79-.83c0-.38-.08-.79-.1-1.21s0-.809 0-1.209a.35.35 0 0 0-.582-.277a.34.34 0 0 0-.107.237v1.26c0 .41 0 .87.06 1.27a1.76 1.76 0 0 0 .61 1.249c-.1 1-.17 2.059-.29 2.999a6 6 0 0 1-.54 1.89a1.53 1.53 0 0 1-1.35.85A1.14 1.14 0 0 1 3.876 22c-.28-.862-.478-1.75-.59-2.65a27 27 0 0 1-.21-2.678a1 1 0 0 0 .07-.1a3.9 3.9 0 0 0 .46-1.37q.107-.997.07-1.999a.3.3 0 0 0-.29-.31a.31.31 0 0 0-.31.3q.034.944-.09 1.88a3.1 3.1 0 0 1-.42 1.12a1 1 0 0 1-.85.479a.64.64 0 0 1-.609-.56a6.9 6.9 0 0 1 .2-2.939a7.9 7.9 0 0 1 1.14-2.699a4.45 4.45 0 0 1 2.119-1.59a3.68 3.68 0 0 1 2.609.12a3 3 0 0 1 1.63 2.13c.314 1.54.352 3.125.109 4.678m14.393-9.096c.32-.595.52-1.247.59-1.92a2.78 2.78 0 0 0-.44-1.789a2.33 2.33 0 0 0-1.2-1a3.4 3.4 0 0 0-1.659 0a3.3 3.3 0 0 0-.79-1.219a2.72 2.72 0 0 0-1.829-.78a5.56 5.56 0 0 0-2.469.43a3.25 3.25 0 0 0-1.569 1.46l-.1.17c-.09 0-.25.11-.42.15a5.3 5.3 0 0 0-1.66.65a3.23 3.23 0 0 0-1.209 1.379a1.91 1.91 0 0 0 .05 1.76c.261.457.6.866 1 1.209q.132.11.28.2a3.7 3.7 0 0 0 .1 1.229a1.38 1.38 0 0 0 .73.91a2.3 2.3 0 0 0 1.349.21a5.4 5.4 0 0 0 1.49-.5l.12.14c.247.303.54.566.869.78c.336.195.712.311 1.1.34a2 2 0 0 0 1.399-.45q.207-.163.37-.37h.08c.47.173.96.28 1.46.32a2.32 2.32 0 0 0 1.739-.48a1.85 1.85 0 0 0 .6-1.09a4 4 0 0 0-.15-1.43s.09-.17.17-.31m-.33-1.64a7.8 7.8 0 0 1-.64 1.82c0 .21.22.71.22 1.28a1.1 1.1 0 0 1-.38.829a2.36 2.36 0 0 1-2.318.13a.48.48 0 0 0-.73 0a1.84 1.84 0 0 1-1.42.68a1.8 1.8 0 0 1-.79-.28a3.2 3.2 0 0 1-.759-.78a1 1 0 0 0-.39-.31a.63.63 0 0 0-.42 0c-.43.23-.891.394-1.369.49a1.4 1.4 0 0 1-.86-.16a.63.63 0 0 1-.29-.53c-.06-.5 0-1 0-1.11a1 1 0 0 0-.24-.36a5 5 0 0 1-1.069-1.249a.93.93 0 0 1 0-.83c.183-.368.467-.677.82-.89a6 6 0 0 1 1.809-.599a1 1 0 0 0 .42-.2a1.2 1.2 0 0 0 .22-.35a2.36 2.36 0 0 1 1.19-1.19a4.5 4.5 0 0 1 1.998-.329a1.56 1.56 0 0 1 1.12.44c.287.278.503.62.63 1a.77.77 0 0 0 .52.53a9.6 9.6 0 0 1 1.479-.1a1.3 1.3 0 0 1 .93.629a2 2 0 0 1 .32 1.44m-9.728 7.977a4.6 4.6 0 0 0-1.19 0a1.18 1.18 0 0 0-.669.78a1.27 1.27 0 0 0 .14 1a1.459 1.459 0 0 0 2.609-.19a1.15 1.15 0 0 0-.16-1.23a1.26 1.26 0 0 0-.73-.36m.1 1.09a.482.482 0 0 1-.66.3a.53.53 0 0 1-.25-.17c-.05-.07-.13-.13-.13-.22s0-.23.1-.28s1.09-.27.94.37m2.319-2.769a1 1 0 0 0-.46.17a1.23 1.23 0 0 0-.42 1.55c.145.35.375.66.67.899c.325.265.731.41 1.15.41a2 2 0 0 0 .95-.28a1.62 1.62 0 0 0 .68-.78a1.36 1.36 0 0 0-.26-1.47c-.45-.489-2.28-.499-2.31-.499m1.67 1.54a.63.63 0 0 1-.31.25a1 1 0 0 1-.45.1a.72.72 0 0 1-.44-.17a1.3 1.3 0 0 1-.43-.42c-.1-.17-.17-.36 0-.52a.4.4 0 0 1 .27-.15a1.67 1.67 0 0 1 1.41.37a.44.44 0 0 1-.05.54"/></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. MessagesPeopleUserBubbleIcon.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-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.