The star set
Ready today: shooting star, star, stars, star medal, moon and stars and sparkling heart (free) and half star, star off, star plus, star minus, star check, star x and 20 more (Pro).
Each star is stroke-only on a 48 × 48 grid, with a chunky 3.4 stroke and round ends, and the points are a little uneven, the way they come out when you draw a star in one go. Since the whole library shares that hand, a star used as a rating or a "favorite" button matches the rest of your interface icons.
Where a hand drawn star works
Ratings, favorites and "new" badges
Use the still star for ratings and favorites, and save the boiling one for a "new" badge or a featured card where a little motion helps.
Highlights in slides and docs
Sparkles next to a key number, a star beside the one takeaway that matters. One animated icon per slide keeps it from getting busy.
Kids' charts and classrooms
A reward chart full of hand-drawn stars, or a bedtime story page with a moon. For print, use the still SVG or the PNG.
Social posts
Social apps don't accept SVG, so record the star drawing itself in a browser and post the clip, or use a still.
How the twinkle works
When the animated SVG loads, its strokes draw in order, each starting just before the last ends, so the star is traced point by point. Then the boil takes over: an SVG filter shifts the line with a little noise and steps through six frames on a loop. On a star it reads almost like twinkling, though it is the same jitter as a hand-inked cartoon line.
The draw-on is CSS inside the file and the boil is a standard SVG filter, so there are no scripts and no libraries to load.
Hand drawn star PNG, SVG and React downloads
Open the star above to download it as a still SVG, a transparent 512px PNG or an animated SVG. The animated file traces the star point by point, then boils through six frames on a loop; it plays in modern browsers inline or as an <img>.
Many slide apps and design tools import an SVG as a still drawing, or not at all. Because the animated file keeps its strokes hidden until its animation runs, it can come out blank there, so use the still SVG or the PNG in those apps.
In React: npm i @oreo-design/doodle-icons, mount <BoilFilter> once, then <DoodleIcon name="star" boilId="boil" />, with draw if you want it traced on. The free set is 203 icons under the MIT license; Pro adds 1,708 more, sparkles included, for a one-time $39 for the first 100 orders, $69 after that.
Tips for star-filled layouts
- Don't let a sky pulse in unison. Every icon that shares one
<BoilFilter>boils in sync. In React, mount a second filter with a differentdurationand split your stars between them so the sky shimmers unevenly. - Mix sizes and rotations. The icons are vectors, so a few big stars and a scatter of small ones stay crisp at any size.
- Gold or white ink. Change the stroke color in the SVG file, or set
coloron the parent for React icons. - Keep ratings still. A boiling star in a five-star rating is hard to read. Leave the motion for decoration.
Hand-drawn stars FAQ
Some are. Shooting star, star, stars, star medal, moon and stars and sparkling heart are free; half star, star off, star plus, star minus, star check, star x and 20 more come with Doodle Icons Pro, a one-time purchase. Free icons are MIT-licensed for personal and commercial use.
Yes, for the free ones: each free icon's page has a transparent 512px PNG next to the still and animated SVGs. Pro icons come as animated and static SVG files plus React components.
Yes. On the all icons page, lower the Amplitude control before exporting the animated SVG. In React, set a smaller amplitude on <BoilFilter>.
Yes. The free icons are MIT-licensed, and the Pro license covers client work and unlimited commercial projects. Pro icons can't be resold or redistributed as files, or bundled into an icon library, font or template marketplace.