50+ Free tools and resources to create awesome user interfaces (Part 2)
Tags: design, webdev, css, html
Published: 2020-07-14 10:28:09

After the success of the first [post](https://dev.to/davidepacilio/50-free-tools-and-resources-to-create-awesome-user-interfaces-1c1b), and incited by several of you to publish a second edition, I decided to spend a few hours this weekend to release the Part 2 of *50+ free tools and resources to create awesome user interfaces*.

As for the first post, the whole list has been divided into different categories, including: 

  * [Tools](#tools)
  * [Illustrations](#illustrations)
  * [Photos & Videos](#photos)
  * [Typography](#typography)
  * [Iconography](#iconography)
  * [Palette](#palette)
  * [Vectors & Shapes](#vectors)
  * [Inspiration](#inspiration)
  * [Utility](#utility)

So if you’re looking for a free set of icons, just click on the Iconography link above.

Before we jump right in, I would like to thank all fellow devs for kindly sharing with me their favorite open-source projects after the release of the first post. Without their contribution, this second edition wouldn’t have been possible  🙌

50+ free tools and resources to create amazing UIs (Part 2):

##**Tools** <a name="tools"></a>
###**[Responsively](https://responsively.app/)**
[![Responsively](https://dev-to-uploads.s3.amazonaws.com/i/9tvi731uiv1taba9nilt.jpg)](https://responsively.app/)

A web browser that aids responsive web app development. Preview all target screens in a single window side-by-side.

###**[Photopea](https://www.photopea.com/)**
[![Photopea](https://dev-to-uploads.s3.amazonaws.com/i/ywp7fisbdge6vhyd89wo.jpg)](https://www.photopea.com/)

An online, free, photoshop alternative that anyone can use.

###**[Free Logo Maker](https://www.namecheap.com/logo-maker/)**
[![Free Logo Maker](https://dev-to-uploads.s3.amazonaws.com/i/hix3y5sdeu5s5jjdorro.jpg)](https://www.namecheap.com/logo-maker/)

Create beautiful logos in minutes (by Namecheap).

###**[Pastel](https://usepastel.com/)**
[![Pastel](https://dev-to-uploads.s3.amazonaws.com/i/rucre0wvuu25ahn7h9tl.jpg)](https://usepastel.com/)

Pastel makes it super easy to invite your clients and teammates to leave useful comments directly on your live websites.

###**[Whimsical](https://whimsical.com/)**
[![Whimsical](https://dev-to-uploads.s3.amazonaws.com/i/anef841rwg81mzd9pnnm.jpg)](https://whimsical.com/)

Communicate visually at the speed of thought – collaborative flowcharts, wireframes, sticky notes, and mind maps.

---

##**Illustrations** <a name="illustrations"></a>
###**[Handz](https://www.handz.design/)**
[![Handz](https://dev-to-uploads.s3.amazonaws.com/i/w3owzvfpc0es7qp77tvo.jpg)](https://www.handz.design/)

H A N D Z is a free 3D illustrations of diverse hands gestures.

###**[Toy Faces Library](https://amritpaldesign.com/toy-faces)**
[![Toy Faces Library](https://dev-to-uploads.s3.amazonaws.com/i/f4zr10mrkynvdru0ync8.jpg)](https://amritpaldesign.com/toy-faces)

Toy Faces is a fun diverse library of 3D avatars for your design mockups and personal use. The entire bundle costs $10, but you can download 8 3D avatars for free.

###**[Blush](https://blush.design/)**
[![Blush](https://dev-to-uploads.s3.amazonaws.com/i/g2el0bp93wmp0kicxnat.jpg)](https://blush.design/)

Blush makes it easy for anyone to add stunning illustrations to their work. With collections made by artists across the globe, there's something for everyone, and every project.

###**[Vector Creator](https://icons8.com/vector-creator)**
[![Vector Creator](https://dev-to-uploads.s3.amazonaws.com/i/p1xjeu6emtlukbk6prpj.jpg)](https://icons8.com/vector-creator)

Create free personalised illustrations from 3000+ elements.

###**[Diversity Avatars](https://www.netguru.com/stories/design/inclusive-design-how-to-start)**
[![Diversity Avatars](https://dev-to-uploads.s3.amazonaws.com/i/aqrtw39qxxj36jkh6hjx.jpg)](https://www.netguru.com/stories/design/inclusive-design-how-to-start)

Diversity Avatars is set of 59 free inclusive avatars to use in your products, projects, or anywhere you want to.

###**[Streamline Lab](https://lab.streamlineicons.com/)**
[![Streamline Lab](https://dev-to-uploads.s3.amazonaws.com/i/ov62rd8j07mg6aj0g8zl.jpg)](https://lab.streamlineicons.com/)
80 free colorful illustrations to use in your presentations, application onboarding or marketing websites

---

##**Photos & Videos** <a name="photos"></a>
###**[Pixabay](https://pixabay.com/)**
[![Pixabay](https://dev-to-uploads.s3.amazonaws.com/i/dxdd1be1tg7lsnl8nfuv.jpg)](https://pixabay.com/)

Over 1 million of free high quality photos, videos, and vectors.

###**[Magdeleine](https://magdeleine.co/browse/)**
[![Free photos](https://dev-to-uploads.s3.amazonaws.com/i/opzn1ebkkrq0e5l6zqkm.jpg)](https://magdeleine.co/browse/)

Hand-picked free photos for your inspiration.

###**[Burst](https://burst.shopify.com/)**
[![Burst](https://dev-to-uploads.s3.amazonaws.com/i/m6mhor5klhuy0dvzg5mv.jpg)](https://burst.shopify.com/)

Beautiful free stock photos for websites and commercial use (by Shopify).

###**[Reshot](https://www.reshot.com/)**
[![Reshot](https://dev-to-uploads.s3.amazonaws.com/i/7xwp0vnomiz5ufecv1uc.jpg)](https://www.reshot.com/)

Tons of uniquely free stock photos. Handpicked & non-stocky.

###**[Gratisography](https://gratisography.com/)**
[![Gratisography](https://dev-to-uploads.s3.amazonaws.com/i/3r7elsxdjy80tb59o3eq.jpg)](https://gratisography.com/)

Free use-as-you-please pictures that stand out.

###**[ISO Republic](https://isorepublic.com/)**
[![ISO Republic](https://dev-to-uploads.s3.amazonaws.com/i/1exrhvyi9azflkgg0qy1.jpg)](https://isorepublic.com/)

Thousands of Free High-Resolution CC0 Photos and Videos.

###**[Mazwai](https://mazwai.com/)**
[![Mazwai](https://dev-to-uploads.s3.amazonaws.com/i/xtcwqqjrbtg7vawpcomy.jpg)](https://mazwai.com/)

Stunning free stock footage clips, hand-picked by a team of video professionals. Simple licensing, and no sign-up required.

###**[Image Colorizer](https://imagecolorizer.com/)**
[![Image Colorizer](https://dev-to-uploads.s3.amazonaws.com/i/d6afaqkppdmrd4xwo83a.jpg)](https://imagecolorizer.com/)
Colorize black and white images automatically.

---

##**Typography** <a name="typography"></a>
###**[Beautiful Web Type](https://beautifulwebtype.com/)**
[![Beautiful Web Type](https://dev-to-uploads.s3.amazonaws.com/i/73h9fsbvt9ny7vkis0f7.jpg)](https://beautifulwebtype.com/)

Guide to only the best open-source typefaces.

###**[Fontfabric](https://www.fontfabric.com/free-fonts/)**
[![Fontfabric](https://dev-to-uploads.s3.amazonaws.com/i/svdxb6dqdaxdnbrha7np.jpg)](https://www.fontfabric.com/free-fonts/)

100% FREE—Beautiful typeface collection—Sans, Serif, Script, and more.

###**[Font Library](https://fontlibrary.org/en)**
[![Font Library](https://dev-to-uploads.s3.amazonaws.com/i/2o2gmkuks856abhd2aea.jpg)](https://fontlibrary.org/en)

Font Library is a gallery of high-quality fonts. Free downloads and quality support.

###**[100 Days of Fonts](http://100daysoffonts.com/)**
[![100 Days of Fonts](https://dev-to-uploads.s3.amazonaws.com/i/w9nlt8rwrvswdk1linta.jpg)](http://100daysoffonts.com/)

100 Days Of Fonts is a project by Do-Hee Kim exploring Google Font pairings for over 100 days. I personally consult this list when I need some inspiration for a new [Cruip](https://cruip.com/) template.

###**[1001 Fonts](https://www.1001fonts.com/)**
[![1001 Fonts](https://dev-to-uploads.s3.amazonaws.com/i/84glmwgi3d3clpmk2cki.jpg)](https://www.1001fonts.com/)

Over 200K free fonts in 12092 families. Free to download for personal and commercial use.

###**[Free Typography](https://freetypography.com/)**
[![Free Typography](https://dev-to-uploads.s3.amazonaws.com/i/z9fj46ncp1jp35764ckk.jpg)](https://freetypography.com/)
The best free fonts, typefaces, and typography.

---

##**Iconography** <a name="iconography"></a>
###**[Essentials](https://www.smplkit.com/)**
[![Essentials](https://dev-to-uploads.s3.amazonaws.com/i/r1t0k9j9csw1ial0741c.jpg)](https://www.smplkit.com/)

More than 300 icons, made on a precise 2px grid with a unique geometric style. Free to use anywhere you want.

###**[266 FREE responsive icons](https://gumroad.com/l/freeicons)**
[![266 FREE responsive icons](https://dev-to-uploads.s3.amazonaws.com/i/ccuhi8chh4lctekzzmoa.jpg)](https://gumroad.com/l/freeicons)

Free 266 responsive icons in 3 sizes (16/20/24px) created with pixel-perfect, dedicated for Interface design and wireframes.

###**[Material Icons Library](https://icons.pixsellz.io/)**
[![Material Icons Library](https://dev-to-uploads.s3.amazonaws.com/i/2slvdnb1ay5gtvho47z2.jpg)](https://icons.pixsellz.io/)

Free collection of 1000+ icons for popular graphics tools.

###**[Unicons](https://iconscout.com/unicons/explore/line)**
[![Unicons](https://dev-to-uploads.s3.amazonaws.com/i/8m05g556n6d7w2w1idyx.jpg)](https://iconscout.com/unicons/explore/line)

Open-source vector icons and icon-font library.

###**[Tabler Icons](https://github.com/tabler/tabler-icons)**
[![Tabler Icons](https://dev-to-uploads.s3.amazonaws.com/i/p6m1h7jc72dmopezrnga.jpg)](https://github.com/tabler/tabler-icons)

A set of over 550 free MIT-licensed high-quality SVG icons for you to use in your web projects.

###**[Feather Icons](https://feathericons.com/)**
[![Feather Icons](https://dev-to-uploads.s3.amazonaws.com/i/ul004mp6ussb021vw62q.jpg)](https://feathericons.com/)
Simply beautiful open source icons.


---

##**Palette** <a name="palette"></a>
###**[Image to Colors](https://hexcolor.co/image-to-colors)**
[![Image to Colors](https://dev-to-uploads.s3.amazonaws.com/i/37fzelm44x10z5n0o1ym.jpg)](https://hexcolor.co/image-to-colors)

Upload an image to generate a color palette based on the image's primary colours.

###**[Happy Hues](https://www.happyhues.co/)**
[![Happy Hues](https://dev-to-uploads.s3.amazonaws.com/i/v55tchm9x9l5q02v514p.jpg)](https://www.happyhues.co/)

Happy Hues is a color palette inspiration site that acts as a real world example as to how the colours could be used in your design projects.

###**[Piggment](https://piggment.co/)**
[![Piggment](https://dev-to-uploads.s3.amazonaws.com/i/8fu6rpu6j1mepiw3g8b2.jpg)](https://piggment.co/)

Create the perfect gradient palette and get inspired to make something beautiful.

###**[Coolors](https://coolors.co/d7c0d0-f7c7db-f79ad3-c86fc9-8e518d)**
[![Coolors](https://dev-to-uploads.s3.amazonaws.com/i/nxxgm8mps2vebrk1tu0s.jpg)](https://coolors.co/d7c0d0-f7c7db-f79ad3-c86fc9-8e518d)

Generate or browse beautiful color combinations for your designs.

###**[Colorbox](https://www.colorbox.io/)**
[![Colorbox](https://dev-to-uploads.s3.amazonaws.com/i/u7s71dpyo3m91tgcqjkq.jpg)](https://www.colorbox.io/)

Colorbox is a color tool by Lyft Design to produce color tints and shades.

###**[Picular](https://picular.co/)**
[![Picular](https://dev-to-uploads.s3.amazonaws.com/i/rv0pri45rm52t6cxlmtl.jpg)](https://picular.co/)
Picular is a rocket fast primary color generator using Google's image search.

---

##**Vectors & Shapes** <a name="vectors"></a>
###**[Shape Divider](https://www.shapedivider.app/)**
[![Shape Divider](https://dev-to-uploads.s3.amazonaws.com/i/pcu6n97lnhntv9hrtpg9.jpg)](https://www.shapedivider.app/)

Shape Dividers makes it easy for designers and developers to export beautiful SVG dividers for their projects.

###**[Trianglify](https://trianglify.io/)**
[![Trianglify](https://dev-to-uploads.s3.amazonaws.com/i/cv38oouuvh1ewi4maone.jpg)](https://trianglify.io/)

Tweakable, one-of-a-kind hero images for your next project.

###**[Free SVG Maps](https://www.amcharts.com/svg-maps/)**
[![Free SVG Maps](https://dev-to-uploads.s3.amazonaws.com/i/ihqs4j51brh6e09xe5zq.jpg)](https://www.amcharts.com/svg-maps/)

Hundreds of free SVG maps available in high and low details.

###**[Worldvectorlogo](https://worldvectorlogo.com/)**
[![Worldvectorlogo](https://dev-to-uploads.s3.amazonaws.com/i/nyi1x7gr9caxfrg7mvbr.jpg)](https://worldvectorlogo.com/)

Download hundreds of vector logos from brands you love. 

###**[Logolix](http://logolix.com/)**
[![Logolix](https://dev-to-uploads.s3.amazonaws.com/i/i3ur5mfmzrwsbw20fzpx.jpg)](http://logolix.com/)
Free logos for your projects! No attribution required.

---

##**Inspiration** <a name="inspiration"></a>
###**[Webframe](https://webframe.xyz/)**
[![Webframe](https://dev-to-uploads.s3.amazonaws.com/i/aemzc1uji24u2hr51ntv.jpg)](https://webframe.xyz/)

800 web app screenshots for inspiration on your next app.

###**[SaaS Landing Page](https://saaslandingpage.com/)**
[![SaaS Landing Page](https://dev-to-uploads.s3.amazonaws.com/i/e8z0zr80b5544ckxt1b1.jpg)](https://saaslandingpage.com/)

The best SaaS landing page examples for design inspiration.

###**[Nicely Done](https://nicelydone.club/)**
[![Nicely Done](https://dev-to-uploads.s3.amazonaws.com/i/dt6an1yf9jb7e0oq3rk8.jpg)](https://nicelydone.club/)

A curated showcase of the best digital products.

###**[UI Design Daily](https://uidesigndaily.com/)**
[![UI Design Daily](https://dev-to-uploads.s3.amazonaws.com/i/mrqyug1pcfne30kkb4gq.jpg)](https://uidesigndaily.com/)

1000+ open-source UI designs, updated daily.

###**[Mobbin](https://mobbin.design/)**
[![Mobbin](https://dev-to-uploads.s3.amazonaws.com/i/sracf89uhkzl4ekv89xg.jpg)](https://mobbin.design/)
Discover the latest iOS UI design trends and patterns.

###**[UI Garage](https://uigarage.net/)**
[![UI Garage](https://dev-to-uploads.s3.amazonaws.com/i/wc2n09r9ae1nmp6igirg.jpg)](https://uigarage.net/)
Daily handpicked UI inspiration & patterns.

---

##**Utility** <a name="utility"></a>
###**[Resizing App](https://resizing.app/)**
[![Resizing App](https://dev-to-uploads.s3.amazonaws.com/i/w6srahn4vzmlrornebve.jpg)](https://resizing.app/)

Convert, optimise, crop, and resize images online in only one easy click. Free and unlimited.

###**[TinyPNG](https://tinypng.com/)**
[![TinyPNG](https://dev-to-uploads.s3.amazonaws.com/i/n7vumrjlv5rqokttawsc.jpg)](https://tinypng.com/)

Smart PNG and JPEG compression - compress up to 20 images at the same time, for free!

###**[Favic-o-matic](https://favicomatic.com/)**
[![Favic-o-matic](https://dev-to-uploads.s3.amazonaws.com/i/fsalbghi9naoev92wgoj.jpg)](https://favicomatic.com/)

Favic-o-Matic generates favicons, both .ico & .png, and the HTML code needed to make your website look awesome on every browser and every device.

###**[Screely](https://www.screely.com/)**
[![Screely](https://dev-to-uploads.s3.amazonaws.com/i/a0fakq9fepa2f8ubohk0.jpg)](https://www.screely.com/)

Instantly turn your screenshot into a beautiful mockup.

###**[Sneakpeekit](https://sneakpeekit.com/)**
[![Sneakpeekit](https://dev-to-uploads.s3.amazonaws.com/i/3wur2vfv56x2fql9fm8e.jpg)](https://sneakpeekit.com/)

Desktop, tablet, and mobile printable grids for design wireframing.

###**[Font In Logo](https://www.fontinlogo.com/logos)**
[![Font In Logo](https://dev-to-uploads.s3.amazonaws.com/i/1xx89e16mt4f18dyu6u0.jpg)](https://www.fontinlogo.com/logos)

Discover the fonts used on your favorite brand logos.

---

##**Conclusion**

I hope you enjoyed this second edition of 50+ free tools and resources to create awesome user interfaces. Do you’ve other resources to recommend? Please feel free to contribute by commenting below - we might end up writing a third edition :)