Hand drawn smiley face icon
This hand drawn smiley face icon is free to download as a still SVG, a transparent PNG or an animated smiley face icon that draws itself on and keeps wiggling. A smiling face: happy, friendly and all good.
Download
smile.svg · smile.png (512px, transparent) · animated SVG
Free under the MIT license, for personal and commercial use.
How to use the hand drawn smiley face icon
Use it for feedback ratings, a friendly empty state, a kids' worksheet or a thank-you card. Because the smiley face 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 smiley face 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 smiley face SVG carries its own styles and wiggle filter and needs no JavaScript, so it plays wherever a browser shows an SVG. In React, the smiley face comes from the free npm package.
Social posts and short videos
Open the animated SVG in a browser and screen-record the smiley face 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="smile" 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 smiley face on a transparent background, for slide decks, docs, chat apps and anything else that will not take an SVG.
Animated smiley face SVG
The animated smiley face 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="smile" />. Mount one <BoilFilter> and pass its id as boilId to get the wiggle; add draw to have the smiley face draw itself on when it first appears.
Change the color, size and line weight
The smiley face 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="smile" boilId="boil" size={32} strokeWidth={3} />
</span>Accessibility
If the smiley face is the only thing inside a button or link, give it a name, for example aria-label="Smiley face" on the button or alt="Smiley face" 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 smile.svg and media="(prefers-reduced-motion: reduce)". This site does the same and shows every icon already drawn.
Hand drawn smiley face icon FAQ
Yes. The hand drawn smiley face 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.