Hand drawn speech bubble icon
This hand drawn speech bubble icon is free to download as a still SVG, a transparent PNG or an animated speech bubble icon that draws itself on and keeps wiggling. A speech bubble: chat, comments, feedback and quotes.
Download
chat.svg · chat.png (512px, transparent) · animated SVG
Free under the MIT license, for personal and commercial use.
How to use the hand drawn speech bubble icon
Use it for comment counts, live chat buttons, testimonials and a "say hi" link. Because the speech bubble is a real vector stroke on a 48-unit grid, not a scanned sketch, it stays crisp from a 16-pixel button to a full-slide illustration. It also sits comfortably next to the other doodles in the set: same pen, same stroke weight, same slightly wobbly hand.
Slides and documents
Drop the transparent PNG of the speech bubble into Keynote, PowerPoint, Google Slides, Notion or Docs and it lands without a white box around it. The ink is a dark charcoal, so it reads best on a light background; for a dark slide, recolor the still SVG first.
Websites and apps
Load the still SVG with an <img> tag, or paste the markup inline so CSS can color it. The animated speech bubble SVG carries its own styles and wiggle filter and needs no JavaScript, so it plays wherever a browser shows an SVG. In React, the speech bubble comes from the free npm package.
Social posts and short videos
Open the animated SVG in a browser and screen-record the speech bubble drawing itself on for a story, a reel or a thumbnail. A hand-drawn mark next to a screenshot reads as a person pointing something out, which is usually the point.
npm i @oreo-design/doodle-icons
import { DoodleIcon, BoilFilter } from '@oreo-design/doodle-icons'
<BoilFilter id="boil" />
<DoodleIcon name="chat" boilId="boil" size={32} />SVG, PNG, animated SVG or React?
Still SVG
Plain strokes, no animation. It scales to any size and every vector editor opens it, so this is the file to recolor, resize or combine with your own artwork.
Transparent PNG
A 512-pixel image of the speech bubble on a transparent background, for slide decks, docs, chat apps and anything else that will not take an SVG.
Animated speech bubble SVG
The animated speech bubble icon draws itself on stroke by stroke, then keeps "boiling": an SVG filter nudges the line between six slightly different frames, the way hand-inked cartoons never redraw a line in quite the same place. Many slide apps and design tools import an SVG as a still drawing, or not at all, and the animated file can come out blank there, so use the still SVG or the PNG in those apps.
React component
Install @oreo-design/doodle-icons and render <DoodleIcon name="chat" />. Mount one <BoilFilter> and pass its id as boilId to get the wiggle; add draw to have the speech bubble draw itself on when it first appears.
Change the color, size and line weight
The speech bubble is drawn as strokes, not fills, on a 48 × 48 viewBox with a stroke width of 3.4. That makes three things easy to change. Color: set the stroke to any color, or to currentColor so the icon follows the text color around it. Size: change the width and height and the line stays sharp. Weight: raise or lower stroke-width for a bolder marker or a finer pen.
<!-- inline the still SVG, then: -->
<svg viewBox="0 0 48 48" width="32" height="32"
fill="none" stroke="currentColor" stroke-width="3.4"
stroke-linecap="round" stroke-linejoin="round">…</svg>
// React: the icon takes the color of its parent
<span style={{ color: 'tomato' }}>
<DoodleIcon name="chat" boilId="boil" size={32} strokeWidth={3} />
</span>Accessibility
If the speech bubble is the only thing inside a button or link, give it a name, for example aria-label="Speech bubble" on the button or alt="Speech bubble" on the image, so a screen reader says what it does. If it sits next to a word that already says the same thing, mark it aria-hidden="true" so it is not read twice.
The animated file plays its draw-on and wiggle every time it loads. For visitors who ask their system for less motion, serve the still SVG instead: wrap the image in a <picture> element with a <source> for the still chat.svg and media="(prefers-reduced-motion: reduce)". This site does the same and shows every icon already drawn.
Hand drawn speech bubble icon FAQ
Yes. The hand drawn speech bubble icon is released under the MIT license, so you can use it in personal and commercial work, including client projects, apps and products you sell. No sign-up is needed to download it.
Usually not: slide and design apps show a still frame, or nothing. Use the still SVG or the transparent PNG there, or screen-record the animation in a browser and insert it as a video.
As big as you like. The SVG is a vector, so it stays sharp at any size. The PNG is 512 × 512 pixels, enough for a slide or a document; for anything larger, export from the SVG.
Yes. Change the stroke color and stroke-width in any vector editor, set stroke to currentColor and color it with CSS, or pass size and strokeWidth to the React component.