UI Resources For Your Next Projects
Tags: webdev, programming, productivity
Published: 2023-10-05 08:00:55

## Introduction
Building UIs is such a strenuous task, and building cool UIs is even more challenging, such a process consumes a lot of time and energy, from building UI components, designing graphics, picking colors, and praying that you won't change your mind later on. But are you doing it in the best possible fashion? Are you making use of the astonishing tools out there? 
The web is currently full of tools and resources that can help you build better looking UIs, in a marginally less time. In this post, I'll be showing you where you can get everything you need for building your next projects, from the beginning, till the end.

>  **💡 NOTE:** All the resources mentioned in this post, are completely free to use. Yes, that's right! **FREE**

## Table Of Content
- Color/Theme Related Resources
- Icons & Emojis
- Illustrations and Drawings
- Pre-built UI Components

## Color/Theme Related Resources
Colors are an essential part of an application, and good use of colors is the backbone of making a nice, wonderful and attractive user interface. 

## [Coolors](https://coolors.co/)

![Website for generating color palettes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00lui6rx0z6ilxg22ias.png)
This website is among the most popular on the list for generating color palettes, I think you should always start here, create a temporary palette, then change it later if necessary

## [Realtime Colors](https://www.realtimecolors.com/)
![Website for generating and viewing color palettes in real time](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4uplie8of0549t5ctp9g.png)
You can also use this website to pick your color palette, and view it in real time (as the name suggests) to see how the colors are looking like on an actual website. In addition to colors here, you can also test out for fonts, which is  great for getting inspiration before you start creating your own design. If you are out of ideas, click **Randomize**, and the website will give you some inspiration! in **Real Time** 😉


## Icons & Emojis 🚀
Icons are everywhere, you can't have a website without icons or emojis, so here are some of my personal favorites.

## Icons

## [Bootstrap Icons](https://icons.getbootstrap.com/)
![Website for getting icons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4iwm8pz2jn7rpz4xxuxz.png)
I love bootstrap icons, in fact, I use them in almost every project, they are simple and they look amazing, they also come in different variants i.e filled, outlined etc..

## [Flowbite Icons](https://flowbite.com/icons/)
![Website for getting icons](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4c6bn8jwlijzdahf6et.png)
If you've read my previous posts, then you'd already know I love Flowbite, and they recently released **Flowbite Icons**, so I have to mention them here!

## Emojis

## [Microsoft Fluent Emojis] (https://fluentemoji.com/)
![3D emojis](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zgjqxt9c1ep6so2a82c0.png)
Lastly, before we move on, I want to quickly mention **Microsoft's Fluent Emojis**, those emojis are 3D and they look super cute, so give them a go.
 

Moving on to the next section...

## Illustrations & Drawings
Creating nice looking graphics takes tons of time not to mention the required creative skills to actually design them, so here are three resources for you!

## [unDraw](https://undraw.co/illustrations)
![Website for getting illustrations and drawings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/flctf4vjj0d1sjde74mu.png)
Plenty of graphics to choose from, all high quality, plus you can change the color accents to fit them with your color palette. You can also download them in two formats **(PNG || SVG)**

## [Many Pixels](https://www.manypixels.co/gallery)
![Website for getting illustrations and drawings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pa4qv87ipjez7ed5218u.png)
Same story as before, high quality, with changeable color accents

## [Magic Pattern](https://www.magicpattern.design/)
![Website for generating patterns and gradients](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f3jrqo2k5ysfn0fbehl3.png)
This website can help you generate background patterns, gradients and much more, it's not 100% free though, but you can still use a lot of its features for free.

Last but not least...
## Pre-built UI Components
There are plenty of components that you really don't want to rebuild on your own, there's no point in reinventing the wheel every time, right?

## [Ui Verse](https://uiverse.io/)
![Open source library of UI components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3mfhsdd8m7uk6tpqzbk.png)
Here you can find a plethora of variants for many UI elements, such as buttons, forms, loaders, and much more.

## Final Words
That's it for this post, I think you now have every possible asset you may need for building beautiful UIs and save up a lot of time and design overhead. If you enjoyed this post, please tell me in the comments section so that I can make a **part 2** or modify this post if there are other valuable resources that are worth mentioning in here.
Maybe a whole series dedicated to exploring the available tools and libraries for building user interfaces easily can be cool too 😅