Strong visuals make your website more engaging, improve user experience, and enhance brand identity. Using high-quality, free resources allows you to create a polished, professional-looking site without extra costs.

1. Icons:

Phosphor Icons 🔗

Phosphor is a flexible icon library with a wide range of styles, including thin, bold, and duotone variations. It’s open-source, making it a great choice for modern web design.

Material Icons 🔗

Designed by Google, Material Icons follow the Material Design principles and offer thousands of icons that work well for web design.

Google Font Integration:

Material Icons are available as a Google Font, allowing you to use them just by typing text.

💡 Pro Tips: Framer has built-in support for Phosphor and Material Icons, allowing you to insert them directly from the library without needing external SVGs or code.

How to Use Icons on Your Website

Icons should be used to enhance usability, not just for decoration. Here are some ways to integrate icons into your design:
✅ Buttons – use icons to emphasize actions (e.g., a record icon next to “Record”).
✅ Cards – use icons to represent categories, features (e.g., a 📄 document icon for a file preview).
✅ Status Indicators – indicate success, warnings, errors, etc.

Use icons within cards to highlight company values. From Cloudrise Template 🔗

2. Illustrations:

unDraw 🔗

unDraw is an open-source illustration library offering customizable SVG illustrations. You can adjust the colors to match your brand, ensuring a cohesive look across your site.

How to Use Illustrations on Your Website

Illustrations can be used to enhance user experience and improve engagement. Here are some ways to integrate them into your design:

✅ Hero sections – use an eye-catching illustration as the main visual to set the tone for your site.
✅ Empty states – add friendly illustrations to empty states (e.g., no search results) to keep users engaged.
✅ Onboarding screens – guide users through onboarding with step-by-step illustrations for a more intuitive experience.

3. Images:

Unsplash 🔗

Unsplash is a popular source of high-quality, royalty-free images contributed by photographers worldwide. It’s perfect for hero sections, blog posts, and background images.

Important Reminder: Unsplash offers both free and premium images. Be sure to check their license page to ensure you’re using images correctly, especially for commercial projects.

Stable Diffusion 3.5 🔗 (AI-Generated Images)

AI-generated images from Stable Diffusion 3.5 are a great choice for creating custom visuals. It’s free for personal and commercial use (up to $1M in annual revenue—see details here).

Moreover, you can run it directly in your browser without any downloads.

How to Use Images on Your Website

Images should be used strategically to enhance design and improve user engagement. Here are some ways to integrate them effectively:

✅ Hero backgrounds – use a large image in your hero section to create a strong first impression.
✅ Image sliders & tickers – use image sliders to showcase products, testimonials, etc.
✅ Blog thumbnails – add images to blog posts to grab attention.

Use images as hero backgrounds. From Kisetsu Template 🔗

Wrapping Up

Using the right visuals can make a huge difference in your website’s design and user experience. Whether it’s icons, illustrations, or images, these free resources help you create a polished and professional look. Explore these tools and make your website truly stand out.

Have questions? DM me on X — I’m happy to help! 🚀