Disclosure: Some tool links are affiliate links. If you sign up, we earn a small commission at no extra cost to you. We only recommend tools we'd use ourselves.
Add Illustrations
Why This Matters
Pages without visuals feel cold and corporate. Walls of text drive bounce rates up by 38% compared to pages with strategic imagery. But stock photos of smiling people in suits make your store look like a dentist's waiting room. Illustrations solve both problems — they add warmth without feeling generic.
Custom illustrations are expensive ($200-500 per illustration). Free illustration libraries like unDraw and Storyset give you professional-quality SVGs you can recolor to your exact brand palette in seconds. A consistent illustration style across your homepage, empty states, 404 page, and emails makes a $0 design budget look like a $5,000 one.
The key mindset: illustrations are functional, not decorative. An illustration on your empty cart page reduces the "dead end" feeling and encourages browsing. An illustration on your 404 page turns an error into a brand moment. Every illustration should serve a purpose beyond looking pretty.
What You'll Do
Browse illustration libraries and download a set of illustrations that match your brand style and colors.
How To Do It
Find Free Illustrations and Keep Your Store Visually Consistent
This takes about 30 minutes. Illustrations add warmth, but mixing styles makes your store look like a ransom note.
1. Choose ONE illustration library (10 min)
- unDraw: Clean, modern SVG illustrations you can recolor to your brand. Huge library covering every topic. Best for most stores.
- Storyset: Animated and static illustrations with customizable colors and elements. Great if you want subtle motion on hover or page load.
- Blush: Mix-and-match illustration components from various artists. More playful and unique styles.
Browse these free options and pick a single source:
The key rule: stick to one library across your entire store. Mixing illustration styles from different sources creates visual chaos.
2. Customize to your brand colors (10 min)
Most libraries let you change the accent color with one click. Set it to your primary brand color — this makes generic illustrations feel like custom work. On unDraw, set your brand color in the top bar and every illustration updates in real time. Download as SVG so you can recolor later if needed.
3. Plan strategic placement (5 min)
- Homepage hero: Represents your brand story or value proposition
- Empty states: Cart empty, no search results, no reviews yet — illustrations soften the dead-end feeling
- 404 page: Turn an error into a brand moment with humor
- About page: Illustrate your mission or process
- Email templates: Consistent illustration style reinforces brand recognition across channels
Don't scatter illustrations randomly. Place them where they serve a function:
4. Download and organize (5 min)
Create a folder called "brand-illustrations" and save both SVG and PNG versions. Name files descriptively (hero-shopping.svg, empty-cart.svg, 404-lost.svg) so you can find them instantly later.
Deliverables
- 5-8 illustrations downloaded from a single library, recolored to your brand palette
- Illustrations placed on key pages: homepage hero, empty cart, 404, and about page
- An organized 'brand-illustrations' folder with SVG and PNG versions, descriptively named
Recommended Tools
unDraw
Open-source illustrations you can customize to your brand color. Massive library covering every topic.
Try unDrawBlush
Create and customize illustrations from artists around the world. Mix and match styles.
Free with attribution
Try BlushStoryset
Animated and static illustrations you can customize colors and elements. From the Freepik team.
Try StorysetPro Tips
- 1Download illustrations as SVG (not PNG) whenever possible. SVGs scale to any size without losing quality, load faster than raster images, and can be recolored in CSS if you ever update your brand palette. A single SVG illustration is typically 5-15KB vs. 100-300KB for a PNG.
- 2Use unDraw's global color picker to set your primary brand hex code before browsing. Every illustration on the site previews in your color instantly — you'll find matching assets 3x faster than downloading and recoloring individually.
- 3Limit illustrations to 5-8 across your entire store. More than that dilutes their impact and starts to feel cartoonish. Place them only where they serve a function: empty states, error pages, and key storytelling moments.