"GeloCubed" Logo 2

23 Free UI Tools To Elevate Your Game In 2023

Web design has come leaps and bounds since the 90’s and for those just starting out, it’s hard competing with industry veterans. There are hundreds of tools out there that can elevate your design game and aid in creating sleek user interfaces, so we’ve handpicked 27 here to today to get you on the right track.

UI tools come in many shapes and sizes, so we’ve broken them up into a few categories:

  • Iconography
  • Typographic Libraries
  • Palettes
  • Photo and video libraries
  • Illustrations and elements
  • Backgrounds, patterns and shapes
  • Website Inspiration

Iconography

Icons play an important role in any user interface. When implemented correctly, they should visually express ideas, concepts and intent whilst also improving the aesthetics of a website. Choosing the correct icons are an understated factor in creating a pleasant digital experience.

The Noun Project:

With over 5 million icons in their library, The Noun Project has a collection worth digging through. Icons from all walks of life can be found, whether it be renewable energy or hand-holding, they have icons for every situation.

The noun project icons homepage

Lordicon:

Lordicon boasts a healthy library full of animated icons, which could liven up any user interface. Their icons can be customized through colour, motion-type and stroke size, and can be implemented through many an avenue such as via HTML code, JSON file, a GIF file and more.

Lordicon free icons library

CSS.GG

Css.gg is an open-source library of CSS, SVG and Figma UI icons. The icons can also be customized via size, colour and toggled for animations on the site. All the source code for the icons is readily available so implementing them into your work is a breeze.

CSS.GG icon home screen

3D Icons

if your looking for some 3D icons, this library is for you. With hundreds of different icons, it’ll add a pop to any user interface and can easily be downloaded into a PNG or Figma file.

3dicons homepage

Typographic Libraries

Like iconography, typography is a key element in UI design. A well selected typographic style will set the tone of the website and balance to the overall design, whilst also being memorable and readable, to communicate the message and sentiment of the product or services being presented.

There are many libraries out there to choose your fonts from, here are a few of our favourites.

Velvetyne

velvetyne.fr typeface landing page

With a myriad of artistic styles to choose from, Velvetyne’s library is one to keep handy. Fonts can be easily downloaded from the site, but the website is quite overwhelming at first glance, so be warned!

Freebiesbug

This library holds 400 free fonts for users to experiment with. Freebiesbug displays the fonts on landing pages, posters and other mediums, to provide insight into potential use cases for the different typographic styles, which really helps when you aren’t sure on which direction you want to go down.

Freebiesbug free font library

FreeTypography

With hundreds of free fonts, this library has a font for any design choice, and is a good site to have in your arsenal.

FreeTypography free font library

Palettes

Deciding your colour palette can be a daunting task, with thousands of colours out there and a limitless combination of colours, it can some times be overwhelming. But there is good news, there are a few tools which help take the stress of creating colour palettes away!

Coolors

Coolors is one of the best tools to use for creating colour palettes! The colour palette generator tool is simple and effective, pick the colours you want to create a palette around, lock it in and hit space bar to generate a plethora of combinations. Once you’ve made your palette, you can note down the colour codes for each colour and implement them into your designs, easy as that!

Coolors palette generator

Khroma

Khroma is an AI based colour palette generation tool. like Coolors, its simple to use. Choose 50 colours from their generous library, and from there, the AI will train itself on the colours you like to create colour palettes. The tool is still in beta testing, but seriously cool none the less and definitely worth playing around with.

Khroma AI colour palette maker home screen

ColorSpace

ColorSpace is another awesome, easy-to-use tool that generates colour palettes and gradients for you. This tools funcationality is great, as it converts all 2 and 3 colour gradients into CSS code, so you can implement them straight into your work!

Color Space palette creator

Photo and video libraries

Images and photos can also liven up a website, and it can be hard to find quality photos and videos out there for free.

Pexels

One of the best libraries for royalty free images and videos out there, filled with high quality content from creators across the globe. Another great tool to have for web design or general content creation.

Pexels home page

Coverr

Another library of high quality pictures and images, fit for any purpose, whether it be cover pages, content creation and more. The site also displays trending themes and collections, showing you whats been gaining traction recently.

Coverr free image and video library

Illustrations and elements

We’ve already gone over a subset of elements in the icons section of this blog, and in the same way icons are used, other elements and illustrations are used to convey messages and display ideas. As the old saying goes, a picture is worth a thousand words!

Freeillustrations

Freeillustrations is sort of an aggregator of loads of free website illustrations across the internet! The library is filled with loads of different art styles and categories so finding the right illustration to portray your message shouldn’t be an issue.

freeillustrations home page

unDraw

unDraw is another great tool for finding illustrations that can push your message. Lots of the illustrations in the library are colour customisable and the designs are clean and simple, but done well. There are some really well thought out designs for specific actions and all of them are downloadable in PNG or SVG format.

unDraw Illustration library

UIverse

UIverse is a 100% free elements library with over 600 components, spanning a range of categories, from buttons and toggles to loaders and text inputs. UIverse’s platform also highlights the top creators, and its always great to see great talent getting recognition. All items in the library have the option to be implemented with CSS or HTML, and both variations of the code are readily available for use

Backgrounds, patterns and shapes

Having a cool, eye catching background on your site is always a bonus, whether you want to show off your programming finesse or just have some awesome design on display, a sick background will also impress people.

here a few tools that can help you achieve that wow factor

Animated Backgrounds

An awesome library of free animated backgrounds, where you can select the template, edit the CSS and SVG code until your happy, and simply copy the code from there!

Animated backgrounds template page
Animated backgrounds code editor

Torus Kit’s blob maker

Another simple tool to add some spice to your site. Torus Kit’s Blobz is a free animated blob creator tool, with step by step instructions on how to install and implement your blobs!

Blobz installation page

BGjar

BGjar has a great library of pre-made, customisable backgrounds to choose from, giving you the freedom to change them as you see fit! Once happy you can copy the code CSS, SVG or Data URI code and implement it into your site.

BGjar background templates

CSS Gradient

your one stop shop for all things gradient! The simple UI makes it easy to select your preferred colour and direction of the gradient, and also has lots of pre-made gradients to browse through. When done, simply copy the CSS code.

Website inspiration

There are some insane websites out there, which can be used as inspiration to spark your creative juices, the following 2 sites are great places to see some awesome projects and prototypes people around the world have been working on.

A couple of our sites are awwwards and Godly. There need not be anymore to it, the work speaks for itself!

Secret tool kit

wweb.dev resources library

the wweb.dev resources page has many a useful article on elevating your work, we recommend checking it out!

wweb.dev resources page

10015

This all in one toolkit is an awesome resource, with tools spanning coding, images, text, colors and more. The chrome extension is also a nice touch.

10015 homepage

As you can see, there are many awesome free tools spanning many areas of UI design, that can really level-up your projects, we encourage you to use them!

We use these tools to build kick-ass websites! Get in touch with us Twitter and LinkedIn, or through our website, and lets help build yours!

As always, if you enjoyed the content, give it a share!

Table of Contents

Ramsey Shallal

Co-Founder + Strategy

Ramsey has been in the Web3 space for 3+ years, and is leveraging that experience to create generative marketing solutions, that drive organic growth through improved brand experience and authority

Latest Posts

News & Blog

Related articles

LEarn from Experts

Subscribe to get the Latest Industry Insights

Get a Free Audit

Let us understand your requirements and we will ensure that we cultivate an experience that leaves customers feeling good about your project.

Get in touch

Let us understand your requirements and we will ensure that we cultivate an experience that leaves customers feeling good about your project.

The Feedback Loop from Hell

1

Reliance on hype and the performance of the bull market to gain visibility

2

Excessive use of guerilla marketing and other unsustainable practices centred on the short term

4

Weak brand image and foundations makes it excessively difficult to scale organically

3

Lack of focus on building foundations for the long-run.