50+ free tools and resources to create awesome user interfaces
Tags: design, webdev, css, html
Published: 2020-05-12 11:11:52

“You’re only as good as the tools you use”

This saying has been around for years and highlights the importance of using the correct tool for the job. This motto applies to hundreds of different fields and disciplines, and luckily for us, to the design too.

From my experience as a senior product designer, there is almost nothing more important than the correct tools to create a nice user interface. The right set of pictures or a well-balanced colour palette can make a huge difference between a poor and decent UI.

I’m going to share a list of free and very useful resources/tools that I use daily to create users interfaces (websites, landing pages, web applications, etc…) for my clients, and for my projects [Cruip](https://cruip.com/) and [SaaS Landing Page](https://saaslandingpage.com/).

To allow you to easily find a specific set of resources/tools, I divided the list into different categories:

  * [Photos & Videos](#photos)
  * [Illustrations](#illustrations)
  * [Palette](#palette)
  * [Typography](#typography)
  * [Animations & Effects](#animations)
  * [Iconography](#iconography)
  * [Patterns & Shapes](#patterns)        
  * [Utility](#utility)

So if you’re looking for a free set of icons, just jump to the iconography category.

A final note: This list doesn't include some of the most popular resources to create user interfaces like Unsplash (for the Photos & Videos category), or Google Fonts (for the Typography one). Why? You probably already know them.

50+ free tools and resources to create amazing UIs:

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

Beautiful, free videos for your homepage background.

###**[Mixkit](https://mixkit.co/)**
[![Mixkit](https://dev-to-uploads.s3.amazonaws.com/i/2dtpxkw9ep3vilacuppn.jpg)](https://mixkit.co/)

Awesome stock video clips, stock music & premiere pro templates all completely free!

###**[Pexels](https://www.pexels.com/)**
[![Pexels](https://dev-to-uploads.s3.amazonaws.com/i/8124nt6a6z58if6qg33o.jpg)](https://www.pexels.com/)

The best free stock photos & videos shared by talented creators.

###**[Photo Creator](https://photos.icons8.com/creator)**
[![Photo Creator](https://dev-to-uploads.s3.amazonaws.com/i/7w5ww9kdv9k4rkt775pg.jpg)](https://photos.icons8.com/creator)

Create realistic stock photos from thousands of models, objects, and backgrounds.

###**[Unscreen](https://www.unscreen.com/)**
[![Unscreen](https://dev-to-uploads.s3.amazonaws.com/i/hajsn1q0ncxbqgdlgzns.jpg)](https://www.unscreen.com/)

Remove video and GIF backgrounds 100% automatically. 

###**[Remove Background](https://www.remove.bg/)**
[![Remove Background](https://dev-to-uploads.s3.amazonaws.com/i/zrsenjbflvwpl7hhkwtr.jpg)](https://www.remove.bg/)

Remove the background of any image 100% automatically.

###**[Generated Photos](https://generated.photos/faces)**
[![Generated Photos](https://dev-to-uploads.s3.amazonaws.com/i/iu0jqvtawxw60umc7l1b.jpg)](https://generated.photos/faces)

The most practical way to get high-quality generated faces for commercial content.

###**[Duotone](https://duotone.shapefactory.co/)**
[![Duotone](https://dev-to-uploads.s3.amazonaws.com/i/2h8p57u95oeylkveogkm.jpg)](https://duotone.shapefactory.co/)

Convert any photo to a duotone in seconds.

---

##**Illustrations** <a name="illustrations"></a>
###**[Notioly](https://notioly.com/)**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2rhr9mlesjqemoauz6e.jpg)

Beautiful Notion-style illustrations.

###**[Open Peeps](https://www.openpeeps.com/)**
[![Open Peeps](https://dev-to-uploads.s3.amazonaws.com/i/v9m79jiwsp2jdqrlal9t.jpg)](https://www.openpeeps.com/)

100% free hand-drawn illustration library.

###**[Smash Illustrations](https://usesmash.com/)**
![Smash Illustrations](https://dev-to-uploads.s3.amazonaws.com/i/00vtumc7nweg0bpfn8sy.jpg)

Free mix & match illustration constructor.

###**[Open Doodles](https://opendoodles.com/)**
[![Open Doodles](https://dev-to-uploads.s3.amazonaws.com/i/fyybdym14nnwmzqznuay.jpg)](https://opendoodles.com/)

A collection of free sketchy illustrations.

###**[Control Illustrations](https://control.rocks/)**
[![Control Illustrations](https://dev-to-uploads.s3.amazonaws.com/i/u6gyoulz99bxe56110oz.jpg)](https://control.rocks/)

108 free flat illustrations with customisable characters.

###**[Ouch!](https://icons8.com/ouch)**
[![Ouch!](https://dev-to-uploads.s3.amazonaws.com/i/t1o0rqbxnhrd2l7tz8cx.jpg)](https://icons8.com/ouch)

Free vector illustrations to class up your project.

###**[Avataaars Generator](https://getavataaars.com/)**
[![Avataaars Generator](https://dev-to-uploads.s3.amazonaws.com/i/i3ggguheyz8xx32a7gas.jpg)](https://getavataaars.com/)

A simple web app for generating hand-drawn avatars.

###**[Faux Code Generator](http://knutsynstad.com/fauxcode/)**
[![Faux Code Generator](https://dev-to-uploads.s3.amazonaws.com/i/t8cridzpksxwva2xm3nf.jpg)](http://knutsynstad.com/fauxcode/)

Turn real code (Github Gist) into faux code (SVG image).

---

##**Palette** <a name="palette"></a>
###**[Parametric Color Mixer](https://colormixer.web.app/02007115ff623007ff9bc91b64440301ffff7c5f55610300/Sunset)**
[![Parametric Color Mixer](https://dev-to-uploads.s3.amazonaws.com/i/ewui88zjzmzg6hd43gd0.jpg)](https://colormixer.web.app/02007115ff623007ff9bc91b64440301ffff7c5f55610300/Sunset)

A colour palette composer inspired by audio parametric equalisers.

###**[CSS Gradient](https://cssgradient.io/)**
[![CSS Gradient](https://dev-to-uploads.s3.amazonaws.com/i/7u1z7tlof6h7uih2olzj.jpg)](https://cssgradient.io/)

A simple and colorful CSS gradient generator.

###**[Colorsinspo](https://colorsinspo.com/)**
[![Colorsinspo](https://dev-to-uploads.s3.amazonaws.com/i/gqysr7vcb4cgf4z71yy8.jpg)](https://colorsinspo.com/)

Thousands of beautiful colour palettes you can use in one click.

###**[Color Hexa](https://www.colorhexa.com/index.php)**
[![Color Hexa](https://dev-to-uploads.s3.amazonaws.com/i/bfqbls8kfyartvbjds4h.jpg)](https://www.colorhexa.com/index.php)

A free colour tool providing information about any colour and generating matching colour palettes, shades/tints for your designs.

###**[Color Space](https://mycolor.space/)**
[![Color Space](https://dev-to-uploads.s3.amazonaws.com/i/7bbrxzbbelvgsknukopz.jpg)](https://mycolor.space/)

Generate nice colour palettes, gradients, and matching colour schemes for your next project!

###**[Palettte App](https://palettte.app/)**
[![Palettte App](https://dev-to-uploads.s3.amazonaws.com/i/9vl9zbz4q1fm649esrxn.jpg)](https://palettte.app/)

Create, analyse and edit smooth colour palettes.

###**[Colorable](https://colorable.jxnblk.com/)**
[![Colorable](https://dev-to-uploads.s3.amazonaws.com/i/emeil2q41dka6z1wbkmi.jpg)](https://colorable.jxnblk.com/)

A colour combination contrast tester.

---

##**Typography** <a name="typography"></a>
###**[Freebiesbug (free fonts)](https://freebiesbug.com/free-fonts/)**
[![Freebiesbug (free fonts)](https://dev-to-uploads.s3.amazonaws.com/i/w2id75ya8vghk4jgb6j9.jpg)](https://freebiesbug.com/free-fonts/)

Handpicked free fonts and typefaces for web and graphics designers.

###**[Fonts Arena](https://fontsarena.com/)**
[![Fonts Arena](https://dev-to-uploads.s3.amazonaws.com/i/eaaz0zzs044krq81e19p.jpg)](https://fontsarena.com/)

Free fonts, and free alternatives to premium fonts.

###**[Befonts](https://befonts.com/)**
[![Befonts](https://dev-to-uploads.s3.amazonaws.com/i/bo23qsqu15jn1zl1nkgu.jpg)](https://befonts.com/)

Download the free fonts for personal or commercial use.

###**[Font Squirrel](https://www.fontsquirrel.com/)**
[![Font Squirrel](https://dev-to-uploads.s3.amazonaws.com/i/8egob714jhrw57h4ddi7.jpg)](https://www.fontsquirrel.com/)

Download thousands of completely legal, high quality, free fonts.

###**[Fontjoy](https://fontjoy.com/)**
[![Fontjoy](https://dev-to-uploads.s3.amazonaws.com/i/wq8kb1ii3dd8vj0m8p7j.jpg)](https://fontjoy.com/)

Easily mix and match different Google Fonts for the perfect pairing.

###**[Type Scale](https://type-scale.com/)**
[![Type Scale](https://dev-to-uploads.s3.amazonaws.com/i/t859enxzzq9l506wvfux.jpg)](https://type-scale.com/)

Preview and choose the right type scale for your project. Experiment with font size, scale and different web fonts.

---

##**Animations & Effects** <a name="animations"></a>
###**[Smooth Shadow Generator](https://brumm.af/shadows)**
[![Smooth Shadow Generator](https://dev-to-uploads.s3.amazonaws.com/i/xckcfpd8aranfs3mubwy.jpg)](https://brumm.af/shadows)

Make a smooth shadow with easing curves. 

###**[CSSeffectsSnippets](https://emilkowalski.github.io/css-effects-snippets/)**
[![CSSeffectsSnippets](https://dev-to-uploads.s3.amazonaws.com/i/qa8jrycws1y3oja15dyq.jpg)](https://emilkowalski.github.io/css-effects-snippets/)

A collection of CSS effects made with Vue.js.

###**[Separator Generator](https://wweb.dev/resources/css-separator-generator)**
[![Separator Generator](https://dev-to-uploads.s3.amazonaws.com/i/vu71197r34epiro3zon3.jpg)](https://wweb.dev/resources/css-separator-generator)

A collection of customisable CSS section separators, with the possibility to easily copy the code.

###**[Animista](https://animista.net/)**
[![Animista](https://dev-to-uploads.s3.amazonaws.com/i/f5ied19urcioqeyt6igr.jpg)](https://animista.net/)

A place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.

###**[Draggable](https://shopify.github.io/draggable/)**
[![Draggable](https://dev-to-uploads.s3.amazonaws.com/i/5o391ghm9vum6mqf8i1e.jpg)](https://shopify.github.io/draggable/)

A lightweight, responsive, modern drag & drop library.

###**[Block Reveal Effects](https://tympanus.net/Development/BlockRevealers/index.html)**
[![Block Reveal Effects](https://dev-to-uploads.s3.amazonaws.com/i/09g2o731cc25efw3bfi8.jpg)](https://tympanus.net/Development/BlockRevealers/index.html)

Ideas for revealing content in a schematic box look.

---

##**Iconography** <a name="iconography"></a>
###**[IconStore](https://iconstore.co/)**
[![IconStore](https://dev-to-uploads.s3.amazonaws.com/i/l4jez0e27p5dypj1w2wn.jpg)](https://iconstore.co/)

A library of free vector icons for personal and commercial projects, designed by first-class designers.

###**[CSS Icons](https://css.gg/)**
[![CSS Icons](https://dev-to-uploads.s3.amazonaws.com/i/ctl8s8jmhyq2ztgbpw25.jpg)](https://css.gg/)

Open-source CSS, SVG and Figma UI Icons available in SVG Sprite, styled-components, NPM & 
API.

###**[Icon Transition Generator](https://nucleoapp.com/tool/icon-transition)**
[![Icon Transition Generator](https://dev-to-uploads.s3.amazonaws.com/i/vm5qiibnqw97o38xfo0g.jpg)](https://nucleoapp.com/tool/icon-transition)

Create a snappy transition between two icons and download the SVG code.

###**[Tilda Icons](https://tilda.cc/free-icons/)**
[![Tilda Icons](https://dev-to-uploads.s3.amazonaws.com/i/qnprxnrhs3q7mo0b0jcp.jpg)](https://tilda.cc/free-icons/)

A collection of 700+ free icons for landing pages.

###**[Ikonate](https://ikonate.com/)**
[![Ikonate](https://dev-to-uploads.s3.amazonaws.com/i/99auwrcvzr33uicdlzbh.jpg)](https://ikonate.com/)

Fully customisable & accessible vector icons.

###**[Eva Icons](https://akveo.github.io/eva-icons/#/)**
[![Eva Icons](https://dev-to-uploads.s3.amazonaws.com/i/fb976pkokyggcjqa06g5.jpg)](https://akveo.github.io/eva-icons/#/)

Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items.

###**[Animated Icons](https://icons8.com/animated-icons)**
[![Animated Icons](https://dev-to-uploads.s3.amazonaws.com/i/h6bdsp0ncewr5y08m1cz.jpg)](https://icons8.com/animated-icons)

400 free animated icons downloadable in JSON for Lottie, GIF, and After Effects format. 

---

##**Patterns & Shapes** <a name="patterns"></a>
###**[CSS Patterns](https://bansal.io/pattern-css#triangles)**
[![CSS Patterns](https://dev-to-uploads.s3.amazonaws.com/i/zpqp72z2gw7w8pa4i5e6.jpg)](https://bansal.io/pattern-css#triangles)

CSS only library to fill your empty background with beautiful patterns.

###**[Get Waves](https://getwaves.io/)**
[![Get Waves](https://dev-to-uploads.s3.amazonaws.com/i/9saribn8dda78epk9suv.jpg)](https://getwaves.io/)

A simple web app to generate svg waves, unique every time.

###**[Blob Maker](https://www.blobmaker.app/)**
[![Blob Maker](https://dev-to-uploads.s3.amazonaws.com/i/mzhvylv2jq3pzk4rvg6t.jpg)](https://www.blobmaker.app/)

Create organic SVG shapes in just a few seconds.

###**[Rad Lines](https://msurguy.github.io/rad-lines/)**
[![Rad Lines](https://dev-to-uploads.s3.amazonaws.com/i/6fe9968bej2y0q59ngls.jpg)](https://msurguy.github.io/rad-lines/)

A web tool for generating SVGs of polygons for plotting.

###**[Patterns](https://products.ls.graphics/paaatterns/)**
[![Patterns](https://dev-to-uploads.s3.amazonaws.com/i/dj1vtr5b5u2osm9n57ra.jpg)](https://products.ls.graphics/paaatterns/)

Free collection of beautiful patterns for all vector formats.

###**[Scribbbles](https://www.scribbbles.design/)**
[![Scribbbles](https://dev-to-uploads.s3.amazonaws.com/i/cht41n25wggs6ingsv4b.jpg)](https://www.scribbbles.design/)

100+ vectorised scribbbles to spice up your design projects.

---

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

A powerful application to collect, customise and export all your icons.

###**[Checklist design](https://www.checklist.design/)**
[![Checklist design](https://dev-to-uploads.s3.amazonaws.com/i/zp5jhmabxmcmaff0qyrf.jpg)](https://www.checklist.design/)

A collection of the best UX and UI practices.

###**[Design System Repo](https://designsystemsrepo.com/design-systems-recent/)**
[![Design System Repo](https://dev-to-uploads.s3.amazonaws.com/i/1cxt2uw435btgrza9jn1.jpg)](https://designsystemsrepo.com/design-systems-recent/)

A comprehensive and curated list of design systems, style guides and pattern libraries that you can use for inspiration.

###**[CSSPeeper](https://csspeeper.com/)**
[![CSSPeeper](https://dev-to-uploads.s3.amazonaws.com/i/81xuc8grkv554yns9c5r.jpg)](https://csspeeper.com/)

Inspect styles in a simple, well-organised & beautiful way.

###**[AI Image Upscaler](https://icons8.com/upscaler)**
[![AI Image Upscaler](https://dev-to-uploads.s3.amazonaws.com/i/2oa9syqefjermnvoaagq.jpg)](https://icons8.com/upscaler)

Enlarge and enhance images automatically using AI.

---

##**Conclusion**

I hope you enjoyed this list of free tools and resources. Hungry for more? Take a look at part 2 [here](https://dev.to/cruip/50-free-tools-and-resources-to-create-awesome-user-interfaces-part-2-2l02).