Top Free Icon Sets and Websites for Vector Illustrations
go backGo back

Top Free Icon Sets and Websites for Vector Illustrations

Published on Mar 11 2022

Last updated on Jul 15 2022

Image by Balázs Kétyi
No translation available.
Add translation

Finding free libraries for icons or illustrations that meet every possible use case is hard, so below are my top recommended libraries and websites to get free vector illustrations.

Icon Libraries

1. Ionicons

A very beautiful well-designed icon set, very easy to use, and 100% free even for commercial usage. You can choose to use it as web components or you can download individual icon as SVG and embed them into your HTML. These icons would be perfect for adding affordance to your buttons or menu items.

Screen Shot 2022-03-25 at 8.09.53 AM

2. Hero Icons

With 230 icons, available in both outline and solid styles, Hero Icons is one of the most used icon libraries because it covers all the basics with icons that users will understand intuitively. Each icon comes in SVG or JSX. (What is JSX?)

Screen Shot 2022-03-25 at 8.17.45 AM

3. Phosphor Icons

Phosphor Icons is another beautiful SVG icon set and is available as a one-liner script, React, and Vue package. Most importantly, Phosphor Icons let you freely customize the icon's thickness and color. You can also download individual icon's SVG or PNG, adding more flexibility to how you can use their icons in your project.

Screen Shot 2022-03-25 at 8.20.34 AM

4. Font Awesome

This is a highly popular icon font, with more than 1700 free icons which can be used in countless categories. Keep in mind that most of the icons you need will be free, but if you want more icons (13,000+ more) and more flexibility with their styles, or page views, you will have to purchase their higher plans (Pro for $99/year and Pro Max for $499/year). I would say that you won't need to purchase higher plans unless you are a collaborative team working for larger organizations.

Screen Shot 2022-03-25 at 9.14.20 AM

5. Line Awesome

Font Awesome has been out for a while now so some of their free icons might look a bit old and outdated at this point. Line Awesome is the perfect alternative for that, with 4000+ icons free to use.

Screen Shot 2022-03-25 at 9.20.14 AM

6. Iconmonstr

While Iconmonstr has a less impressive UI than the other offerings, it has a total of 4500+ free and simple icons perfect for you in case you need a single icon and not a whole set. They have a bit more character than the other offerings, so if its niche aesthetic appeals to you, it may be a better choice than some of the more popular alternatives. You can download icons in SVG, PNG, or embed them in your HTML.

Screen Shot 2022-03-25 at 9.23.20 AM

7. Icons8 

Icons8 is one incredible resource with a staggering one million free-to-use icons, across countless styles and categories. Plus, their icons are easy to customize and support multiple formats. Icons8 also provides photos, illustrations and music if that happens to interest you as well.

Screen Shot 2022-03-25 at 9.25.20 AM

8. Icomoon

Icomoon provides 4000+ free icons with options to purchase more premium icons with their higher plans. This link will take you directly to where you can use/download the icons to use right away. They only include 492 icons initially but you can add more free icons from their library.

Screen Shot 2022-03-25 at 9.37.14 AM

You can also use Icomoon to generate favicons yet the drawback is that Icomoon only allows picture files that are up to 2MB. I was thrilled to hear about an alternative tool from Amanda, Website Planet, which allows you to create favicons from pictures that are up to 5 MB from either JPG, PNG or GIF or even from a gallery.

10. Flaticon

Flaticon is another commonly used resource that provides a wide selection of vector icons and stickers. You can download PNG icons for free but you have to include an attribution link in your project. You also have the option to get their Premium Subscription ($8.25/month) to have access to all their assets in multiple formats and no attribution required.

Screen Shot 2022-03-25 at 9.38.58 AM

10. Simple Icons

Simple Icons provides 2200+ free SVG icons for popular brands. You can download SVG icons directly from their website. This library also supports usage in CDN, PHP, and Node (Check out their GitHub repository).

Screen Shot 2022-03-25 at 9.51.16 AM

Illustrations

11. unDraw

unDraw offers hundreds of free and open-source SVG and PNG illustrations for your websites. You can even customize their colors! I really love unDraw 😍!

Screen Shot 2022-03-25 at 9.52.19 AM

12. DrawKit

Also, a really amazing resource for hand-drawn vector illustration and icons, especially if you are looking into illustration animations or 3D illustrations. Some of their packs are free, while some you can buy at quite affordable prices ($19-29/pack) if you have a budget.

Screen Shot 2022-03-25 at 9.55.34 AM

13. Iconscout

Iconscout provides curated SVGs, vector icons, as well as illustrations and 3D assets. You can use most of them for free, with attribution required. They also have one premium asset (where you have to pay for) free to download every day.

Screen Shot 2022-03-25 at 9.44.30 AM

14. Open Peeps

Open Peeps offer hand-drawn illustrations that can be used in your development projects, or UI/UX design tools (Figma, Sketch, Adobe, etc.). You can download the whole library or single PNG/SVG illustration of human figures.

Screen Shot 2022-03-25 at 10.07.43 AM

15. Open Doodles

Open Doodles is a set of free illustrations that can be edited in Blush or downloaded (SVG or PNG format).

Screen Shot 2022-03-25 at 10.13.23 AM

♥️ I hope these resources will help you perfect your next project!

P/s: Thank you Amanda for your contribution ♥️♥️

Tags:
front-end
resources
My portrait picture

Written by Alissa Nguyen

Alissa Nguyen is a software engineer with main focus is on building better software with latest technologies and frameworks such as Remix, React, and TailwindCSS. She is currently working on some side projects, exploring her hobbies, and living with her two kitties.

Learn more about me


If you found this article helpful.

You will love these ones as well.

  • Image by Blake Connally on Unsplash
    May 04 2023 — 5 min readJavaScript Games to Improve your Programming Skills
    #resources#tutorials
  • Photo by Esther Jiao on Unsplash
    May 04 2023 — 5 min readForms and Validations in HTML
    #front-end#html#security
  • Photo by Matt Hardy on Unsplash
    May 04 2023 — 5 min readTailwindCSS vs. Styled Components
    #css#front-end

  • Built and designed by Alissa Nguyen a.k.a Tam Nguyen.

    Copyright © 2024 All Rights Reserved.