Beginner8 min readShare
Was this chapter helpful?
Share
Try these free tools
Where to find icons, images, illustrations, and other visual assets for your projects.
Pre-made icon sets you can use in your projects. Tell AI which library to use.
Beautiful, consistent icons. The successor to Feather Icons. Works perfectly with React.
By the Tailwind CSS team. Designed for Tailwind projects. Outline and solid variants.
Includes Font Awesome, Material, Bootstrap, and more — all in one package.
Flexible icon family with 6 weights: thin, light, regular, bold, fill, duotone.
Over 5,000 free open-source icons. Clean and minimal design.
The original icon library. Massive collection with free and pro tiers.
AI Tip: "Use Lucide React icons throughout the project. Import them like: import { Home, Settings } from 'lucide-react'."
High-quality, royalty-free images for your projects.
The gold standard for free stock photos. Huge library, beautiful quality. No attribution required.
Free stock photos and videos. Great search and curated collections.
Over 2 million free images, vectors, and videos. No attribution needed.
Hand-drawn and vector illustrations to add personality to your site.
Open-source illustrations that you can customize colors to match your brand. SVG format.
Animated and static illustrations by Freepik. Customize style, colors, and backgrounds.
Mix-and-match illustration library of people. Customize hairstyles, clothing, positions.
Hand-drawn illustration library with a sketchy, casual style.
Create and customize illustrations from various artists and styles.
Consistent illustration styles. Free tier with attribution.
Subtle patterns and backgrounds to add depth to your designs.
Customizable SVG background patterns. Adjust colors, size, and opacity.
Repeating SVG background patterns by Steve Schoger (Tailwind creator).
Generate beautiful gradient, particle, and abstract backgrounds.
Temporary content for prototyping and development.
Classic placeholder text. Use for body copy during development.
Add lorem ipsum placeholder textUse gray boxes or via placehold.co for sized placeholders.
Use a 400x300 placeholder imageGenerate realistic fake data: names, emails, addresses, etc.
Use faker.js for realistic mock dataUse UI Avatars or DiceBear for generated avatar placeholders.
Use DiceBear avatars for user profilesIcons come in different styles. Here's what each one looks like and when to use it.
Just the edges, no fill. Clean and minimal. Best for navigation bars, toolbars, and modern interfaces.
Completely filled in with color. Bolder and more visible. Great for active states, buttons, and calls to action.
Two-tone color — an outline plus a lighter fill. Adds personality without being too heavy. Nice for feature sections and dashboards.
AI Tip: "Use outline icons for the navbar and filled icons for active/selected states. Keep the same style throughout the app."
Different parts of your site need different icon sizes. Here's a quick reference. See the UI Elements guide for where icons appear in buttons, navbars, and cards.
AI Tip: "Make all icons in the navbar 24px and all icons in buttons 20px. Keep sizing consistent across similar elements."
Follow these tips to make your icons look polished and professional.
Pick one icon library (like Lucide) and use it everywhere. Mixing libraries makes your site look inconsistent.
Don't use outline icons in one place and filled icons in another (unless it's intentional, like showing active vs inactive).
Screen readers can't see icons. Add aria-label or visible text next to icons so everyone can use your site.
Thin icons look odd next to bold text. Pick an icon weight that feels balanced with your font choice.
All icons in the same context (like a nav bar) should be the same size. Mixing sizes looks messy.
If an icon is clickable, change its color or scale on hover so users know they can interact with it.
A favicon is the tiny icon that shows up in browser tabs. You also need larger icons if someone saves your site to their phone's home screen.
Use RealFaviconGenerator to upload one image and get all the sizes you need, plus the HTML code to paste into your site.
AI Tip: "Generate a complete favicon set for my project. Include a 16x16 favicon, 32x32 favicon, 180x180 Apple touch icon, and 192x192 plus 512x512 icons for PWA support. Add the correct meta tags to the layout."
Create custom images and illustrations with AI when stock photos don't cut it.
OpenAI's image generator. Great for custom illustrations, icons, and mockup images. Built into ChatGPT.
Stunning, artistic image generation. Best for high-quality hero images and brand visuals.
Excellent at generating images with text in them — logos, banners, social media graphics.
Versatile image generator with fine-tuned models for different styles. Great free tier.
Add movement to your site with animated icons, interactive animations, and stock video.
Lightweight animated icons and illustrations. Play smooth animations without heavy video files.
Create interactive animations that respond to user actions — hover, click, scroll.
Beautiful, free stock videos for backgrounds and hero sections. No attribution needed.
Browse 200+ Lucide icons, search by name, and copy the import code in one click.
Try it free →Copy-paste these prompts into your AI tool to apply what you just learned.
ADD ICONS TO YOUR APP
"Add icons to my app using Lucide React. I need icons for [navigation, actions, status indicators]. Show me how to import and use them."
REPLACE TEXT LABELS WITH ICONS
"Replace the text labels in my [navbar/sidebar/buttons] with appropriate icons. Keep the text as accessible labels."
Emoji can be great quick icons, especially for prototyping. They're free and universal.