DEV Community

Cover image for 50+ free tools and resources to create awesome user interfaces

50+ free tools and resources to create awesome user interfaces

Davide Pacilio on May 12, 2020

“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 j...
Collapse
 
v6 profile image
🦄N B🛡 • Edited

Avataaars generator is as useful as its name evokes ship theft on the high seas.

I'm using it as we speak. Look at this guy, see how smug he is? Maybe it's because he just found this list of useful stuff:

smug-af-nathaaan-avataaar

Also, this piraaate who died happy, doing what he loved, "...stabbing Windows and having it bleed..."

piraaate-who-died-happy-avataaar

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Super cool resources! 🔥

For those who're still hungry for more resources, I wrote a post earlier this year:

Collapse
 
kudapara profile image
Kudakwashe Paradzayi

Amazing post. I'll definitely add some of your contributions on the Curated Design Tools repo.

GitHub logo kudapara / curated-design-tools

A curated list of the tools we use to enhance our design wokflow.

curated-design-tools

A curated list of the tools we use to enhance our design wokflow.

Design Applications

  • ExcaliDraw (⭐ Open Source ⭐) -Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.
  • Adobe XD - Wireframe, design, prototype, present, and share amazing experiences for web, mobile, voice, and more.
  • Figma - Figma helps teams create, test, and ship better designs from start to finish.
  • Sketch - A digital design toolkit that helps you work and collaborate faster in design, wireframing and prototyping projects.

Design tools

  • Grabient - Beautiful and simple UI for generating web gradients.
  • Blob Maker - Make organic svg shapes for your next design.
  • Coolors - Generate perfect color combinations for your designs.
  • Metatags - Edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!
  • Css filters - Visual playground…

Feel free to open a pull request if you want 😉

Collapse
 
nikhil17_namal profile image
Nikhil N Namal

I've contributed few buttons on CSSeffectsSnippets, happy to see you use it. 🙌

Collapse
 
ahmetcetin profile image
Ahmet Cetin

great list, thx. check this out for images/videos:

pikwizard.com

All images/videos containing people are model released, so you can use them in commercial projects as well, unlike in many other "free" image sites.

Collapse
 
uuware profile image
uuware

Great post. Would you like to include a tool project to use icons? And I'd like to link your post.
A collection of over 33,000 high-quality free svg icons and tools for generating customized icon font. All icons are completely free for personal or business requirements.

GitHub logo uuware / icons-font-customization

A collection of over 33,000 high-quality free svg icons and tools for generating customized icon font. All icons are completely free for personal or business requirements.

icons-font-customization

A collection of over 33,000 high-quality free svg icons and tools for generating customized icon font. All icons are completely free for personal or business requirements.
Open See all icons, to view all icons. You can change color, background color, size for icons and can search or cache selected results.
Update: Now you can download PNG, JPG, ICO and Apple ICNS image files directly from online.
🔶Desktop Application for Windows, Linux, MacOS is released, or goto Download Releases 🔶

(中文说明请参考后半部分)


🔶All icons collected here are completely free for your personal or business requirements.🔶
You can use this tool to combine / generate your own icon webfonts for your project from different sources.
This relevant license information is included in generated css file automatically.
logo.png

Icon Collections:

  • ant-design-icons Source: visit, License: MIT
  • Bootstrap Icons Source: visit, License: MIT
  • BoxIcons Source: visit, License: CC 4.0
Collapse
 
davidescobar007 profile image
J. David Escobar

absolutely helpful. thanks

Collapse
 
mrsid profile image
MrSid

Awesome...All in one😍😍😍

Collapse
 
ansmtz profile image
ansmtz

Fantastic. Now I want to use all of this immediately!
Thank you!

Collapse
 
abbeymaniak profile image
Abiodun Paul Ogunnaike

Nice tool, thanks bro

Collapse
 
waylonwalker profile image
Waylon Walker

Amazing List here.

I just discovered better-mobile-inputs.

Collapse
 
theme_selection profile image
ThemeSelection

Very helpful article. Thank you for sharing.

We recently launched Materio Vuetify VueJS Admin Template that can be useful for frontend development and responsive web apps.

Collapse
 
zonayedpca profile image
Zonayed Ahmed

Take a look at this one: gradienta.io
They also have an editor to make gradient: gradienta.io/editor

Collapse
 
madhusudanbabar profile image
Krypton | Madhusudan Babar

Awesome 😍 😍

Collapse
 
ev_jennie profile image
Eugenia Evtushenko

Hey, the UI Bakery UX/UI Designer has just published the article on the 2020 UX/UI design trends with the relevant tools and interfaces examples. Check it out: uibakery.io/post/2020-ux-ui-design...

Collapse
 
ckissi profile image
Csaba Kissi

Great collection of tools. I would like to contribute to the list with my latest project. Free collection of customizable Tabler icons from Pawel at tablericons.com

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

That's bookmarked already. Cool stuff!

Collapse
 
duc profile image
Aryan Godde

This post is pure gold. Love it !!! I want a part two please 🙏😅

Collapse
 
musharof profile image
Musharof Chowdhuy

Many of them are my favorite tools, thanks for such a great content.

Collapse
 
makampos profile image
Matheus de Campos

amazing!

Collapse
 
eliowar28 profile image
Eliomar Garzon

Oh dude this post it's so greeeat. Thanks man.

Collapse
 
seanolad profile image
Sean • Edited

Dude, you deserve for real props on this one. HOOOOLY, like this is great! I definitely needed this to take my web dev to the next level.

Collapse
 
ckissi profile image
Csaba Kissi

I would like to contribute with my latest side project that ables you to configure more than 550 SVG icons named Tabler Icons

Collapse
 
hamo225 profile image
Tarek Hamaoui

wonderful! thanks!

Collapse
 
vincenius profile image
Vincent Will

Awesome list - thanks for adding my CSS Separator Generator :D

Collapse
 
imphilippesimo profile image
imphilippesimo

Awesome 🔥🔥🔥

Collapse
 
theserverlord profile image
Atharva Kulkarni

Thanks a lot for the list.

Collapse
 
milladka profile image
milladka
Collapse
 
tobiastotz profile image
Tobias Totz

Wow, that are awesome resources! Thank you for sharing them <3
I bookmarked many of them and looking forward to use them for upcoming projects :)

Collapse
 
madhusudanbabar profile image
Krypton | Madhusudan Babar

Awesome collection,
Thanks for sharing 😇

Collapse
 
sherlockmac profile image
Ali Afghah

Awesome! Thank you for sharing.

Collapse
 
javaarchive profile image
Raymond

Where have I been? There are so many amazing tools out there that I haven't yet discovered. Wow! Thank you so much for this post!!

Collapse
 
romainlt profile image
Romain Lt

Awesome ! Thank you ;)

Collapse
 
16am profile image
16am

Amazing colloction 💥

Collapse
 
webdev_chen profile image
Uchena Miller

This post helped a lot

Collapse
 
m121 profile image
Mateo Perez Salazar

Wowwwwww this is gold!!!!!!. thanks a lot for this

Collapse
 
helloejsulit profile image
Ej Sulit 🇵🇭

I don't know where to start, but THANK YOUUUU!!!

Collapse
 
tetiross profile image
Rostyslav Semanyshyn

This is awesome list! Thanks!

Collapse
 
alaindet profile image
Alain D'Ettorre

Amazing resources, thank you!

Collapse
 
leodevhub profile image
León • Edited

OMG thnks :0

Collapse
 
mateuschmitz profile image
Mateus Schmitz

Wow, awesome list. Thanks for sharing!

Collapse
 
thoughtinstinct profile image
SparklingINsilence

Wow, super useful. Very kind of you to share 😍

Collapse
 
delta456 profile image
Swastik Baranwal

Damn.. THIS IS SO AMAZING I LOVE YOU!!

Collapse
 
thekaveshan profile image
The-Kaveshan

This is so awesome!

Collapse
 
chisholmd profile image
chisholmd

I am so glad I followed the link in the newsletter :) Terrific collection of tools I had no idea existed. Thanks

Collapse
 
code_regina profile image
Code_Regina

This is amazing! Thank you for publishing this awesome resource for user interfaces. I did not even know remove background existed and it will be so very helpful to future projects!!!!!

Collapse
 
panshak profile image
Panshak

Wow! Awesome!.. Just awesome! I'm not familiar with most of them, and they're tools that will really be useful for me.

Collapse
 
parvathirajpal profile image
Parvathi Rajpal

Thank You! ✨

Collapse
 
pb profile image
Pawel

Great Post 🙌. All of them are fabulous.
Thanks for sharing.

Collapse
 
venkateshaj profile image
venkatesh-aj

Hi there, I've created a color palette tool called colorsui.com. It's a free color tool.

Collapse
 
demetrius18 profile image
webcodingdev

Really awesome content

Collapse
 
nalani profile image
nalani5210

This list is great!

At the same time share a free online tool website, hoping to help fans jsonformatting.com/

Collapse
 
tomwilusz profile image
Lordicon

Feel free to add Lordicon Animated Icons

Collapse
 
tomwilusz profile image
Lordicon • Edited

Feel free to add Lordicon Animated Icons

Lordicon

Collapse
 
alextomas80 profile image
Alex Tomás

👏🏻👏🏻👏🏻

Collapse
 
ramyokasha profile image
RamyOkasha

thank you ❤

Collapse
 
cyntss profile image
Cynthia 🏳️‍🌈 Sanchez

Wow.. this list is AMAZING!

I would add also EOS icons to the list icons.eosdesignsystem.com/, as they are purely open source icons and 100% customizable.

Thank you for sharing!

Collapse
 
adilvelizade0 profile image
Adil Velizade

Please follow instagram : @master_javascript

Collapse
 
theme_selection profile image
ThemeSelection • Edited

Great list. 🤩 We have also prepared the list of Best Open Source Web Development Tools.

Collapse
 
vrushank profile image
vrushank

If someone is looking for best design resources, must refer this post: dev.to/theme_selection/best-design...

Collapse
 
mynamejs97 profile image
Arshit

Thanks :) Great collection! It’s really very useful.

Collapse
 
mbejda profile image
Milos Bejda

Add twitpile to the list!
twitpile.com

Collapse
 
qq449245884 profile image
qq449245884

Hello, I like your article very much. May I translate your article into Chinese and share it with Chinese developers?I will attach a link to the original and the author's name.

Collapse
 
hakeemmidan profile image
Hakeem Almidan

illustrations potential addition: undraw.co/illustrations

Collapse
 
hari_prasath12 profile image
Hariprasath

Awesome tools..

Collapse
 
klausbert profile image
Klausbert

There is something for anyone here, thanks!!

Collapse
 
studiotobs profile image
Uncle.Tobi

Thank you!

Collapse
 
yougotwill profile image
Will G

Great post! Thanks for all these new resources!

Collapse
 
alionides profile image
Ali Shikhiyev • Edited

this is me ))

Collapse
 
carlmultimedia profile image
Camilo Rincon

Awesome, this resources are really helpful thanks ! :D

Collapse
 
storytellercz profile image
Jan Dvorak

Interesting, will check them out.
One addition for React (and styled-components) devs when it comes to icons: styled-icons.js.org/

Collapse
 
kartiknair profile image
Kartik Nair

Wow fontsarena looks awesome! I've been looking for something like that since a long time. Thanks man ❤️

Collapse
 
manojnaidu619 profile image
Manoj Naidu

Amazing! You saved a lot of my time.

Collapse
 
keleshii profile image
Jabarii

Amazing Content!!!

Collapse
 
imjackchan profile image
jackchan

Very good content, about the font part, recommend a font download site that I often use, maybe it can be added to this list? fontskey.com

Collapse
 
rahilka profile image
Rahilka Simonova

Great list! Thanks a lot for sharing!!

Collapse
 
dnafication profile image
Dina

I found design checklist a great resource.