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