Best Icon & Illustration Sites Every Developer Should Bookmark 🎨

AjeetSingh2016 — Sat, 31 May 2025 04:49:29 +0000

Whether you're building a landing page, designing a dashboard, or shipping your next indie app — high-quality icons and illustrations can instantly elevate your UI.

Here are 5 go-to resources that every developer and designer should have in their toolbox:

1. Heroicons

URL: https://heroicons.com

Clean, minimal SVG icons brought to you by the makers of Tailwind CSS. These icons are perfect for modern UIs, especially if you're working with Tailwind, React, or Vue.

✅ Free
✅ Open Source
✅ Optimized for interfaces

2. Claybees.art – Clay-Style Icons & Illustrations

URL: https://claybees.art

A unique library of handcrafted clay-style icons and illustrations — perfect for modern UIs that need a playful yet premium vibe. The assets are available in PNG and JPG formats and work well in landing pages, onboarding screens, and social visuals.

✅ Clay-themed
✅ Developer & designer friendly
✅ Lightweight and easy to integrate

📌 Bonus: There’s a growing collection of assets, and the UI is built for speed and simplicity.

3. Undraw

URL: https://undraw.co/illustrations

An evergreen favorite. Undraw offers a massive collection of open-source SVG illustrations that you can customize in color and scale without attribution.

✅ Vector-based
✅ Color customization
✅ Perfect for onboarding and marketing

4. Lucide Icons

URL: https://lucide.dev

A beautiful evolution of Feather icons — Lucide offers an expanded library with sharp, consistent SVG icons. Excellent for dev dashboards, tools, and mobile UIs.

✅ Community-driven
✅ Customizable stroke
✅ Works well with icon libraries like React Native Vector Icons

5. OpenPeeps

URL: https://www.openpeeps.com

A playful illustration library of hand-drawn characters. Ideal for story-driven interfaces or apps with a fun, casual tone.

✅ Free for commercial use
✅ Mix & match parts
✅ Sketch, Figma, SVG support

✨ Final Thoughts

Icons and illustrations aren't just decorative — they communicate intent, improve usability, and create emotional connection. With these 5 tools, you’ll be ready to ship polished designs faster.

And if you're looking for something handcrafted, colorful, and 3D — definitely check out Claybees.art. It's a refreshing take on design assets that stand out. 🐝

SEO Best Practices for Next.js Websites

AjeetSingh2016 — Fri, 24 Jan 2025 23:13:09 +0000

Search Engine Optimization (SEO) is crucial for making your website visible to users on search engines like Google. If you're building a website using Next.js, you already have a strong foundation for SEO thanks to its built-in features like server-side rendering (SSR) and static site generation (SSG). In this blog, we’ll go over simple, beginner-friendly SEO tips to make your Next.js website rank higher.

1. Use Descriptive Page Titles and Meta Descriptions

Each page on your website should have a unique and descriptive title and meta description. These tell search engines and users what your page is about.

How to Add Titles and Meta Descriptions

Use the next/head component to add them to your pages.

import Head from 'next/head';

export default function HomePage() {
    return (
        <>
            <Head>
                <title>Home | My Website</title>
                <meta name="description" content="Welcome to My Website, where you can find the best content." />
            </Head>
            <main>
                <h1>Welcome to My Website</h1>
            </main>
        </>
    );
}

Why It Matters

Titles appear in search results and should be clear and engaging.
Meta descriptions can encourage users to click on your link.

2. Use Clean and Simple URLs

Search engines and users prefer short and meaningful URLs.

Best Practices for URLs

Keep them readable, like /blog/my-first-post instead of /blog?id=123.
Avoid special characters or long query strings.

In Next.js, you can create clean URLs using dynamic routes.

// pages/blog/[slug].js
export default function BlogPost({ params }) {
    return <h1>{params.slug}</h1>;
}

3. Add Alt Text to Images

Alt text describes images to search engines and helps improve accessibility.

How to Add Alt Text

Use the next/image component to optimize images and add alt text.

import Image from 'next/image';

export default function HomePage() {
    return (
        <Image
            src="/example.jpg"
            alt="A beautiful landscape"
            width={600}
            height={400}
        />
    );
}

4. Generate an XML Sitemap

An XML sitemap helps search engines find all the pages on your site.

How to Create a Sitemap

You can use the next-sitemap package to automatically generate a sitemap.

Install the package:

   npm install next-sitemap

Create a next-sitemap.config.js file:

   module.exports = {
       siteUrl: 'https://example.com',
       generateRobotsTxt: true,
   };

Build your project to generate the sitemap:

   npx next-sitemap

5. Optimize Your Website’s Speed

Website speed is an important ranking factor.

Simple Tips

Use Next.js’s built-in image optimization with the next/image component.
Keep your code lightweight by importing only what you need.

6. Mobile-Friendly Design

Most users browse websites on mobile devices, so ensure your site is responsive.

What to Do

Use responsive layouts with CSS frameworks like Tailwind CSS or Next.js's Image component.
Test your site on different devices to ensure it looks and works well.

7. Enable HTTPS

Search engines prioritize secure websites. If you don’t already have HTTPS enabled, make sure to set it up using an SSL certificate. Most hosting platforms like Vercel or Netlify handle this for you automatically.

Conclusion

Next.js makes it easier to create SEO-friendly websites, but applying these best practices will help your site rank even higher. Start by focusing on page titles, meta descriptions, clean URLs, and optimized images. From there, gradually improve other aspects like sitemaps and performance.

Remember, SEO is an ongoing process, so keep testing and improving your website!

DEV Community: AjeetSingh2016