Arrow
Resources

161 Free UI Design Resources Mockups, Icons, Patterns, etc. (Last update 13th July)

July 13, 2020 14 min read
upcoming event

UI Design Resources: 161 Tools User Interface Design Inspiration

Contents

  1. Inspiration
  2. Creative
  3. Tools
  4. Patterns
  5. Illustrations
  6. Icons
  7. Color
  8. Wireframe
  9. UI Gradients
  10. Font Tools
  11. Stock Photos
  12. UX Research
  13. Photoshop
  14. Sketch
  15. Figma
  16. XD

illustrated woman searching for free ui design resources online

Why Give Away Free UI Design Resources?

All user interface designers have been craving and crazily searching for all free UI design resources across the net, and trust me it’s pain to find it all at one spot. I combined efforts from multiple sources and our own personal resources for inspiration from the best of the best user interface designers out there, and all of those free resources we used at some point for our internal understanding or other purposes. 

INSPIRATION

UI/UX designers are always in search of super cool inspirations. These inspirations help them to learn and unlearn about certain products or services they are designing. Here is a list of websites that will help you gain that vision to design awesome solutions.

Mobbin

Get inspiration from over 170 iOS apps and 10,000 patterns (screenshots from iPhone X) available on the platform.

Mobile Patterns

A design inspirational library featuring finest UI UX Patterns (iOS and Android) for designers, developers, and product makers to reference.

Pttrns

Pttrns is a collection of mobile design patterns, UI design resources, and inspiration for iPhones, iPads, Android devices, Apple Watches, and more. New York, New York, United States.

UI Movement

UI Movement started as a newsletter that featured the best UI designs every day. The real primary difference between UI Movement and other design inspiration sites is that they focus exclusively on UI designs.

Collect UI

A platform for your daily inspiration collected from regular UI & beyond. Based on Dribbble shots, handpicked.

UpLabs

UpLabs is a community-powered marketplace that lets designers and developers share ready-to-ship UI designing resource — like login boxes and payment forms — to build apps and sites.

UI Learn

UI learn is set up to make you learn design step by step with a practical curriculum that focuses 100% on learn-by-doing and a great example of free UI designing resources.

Behance

Use Behance to showcase and discover creative work. They’re on a mission to empower the creative world to make ideas happen.

Neede

Neede started as a personal project to organize the different design resources that quickly grew to a place to share online design resources with other designers.

Ecomm.design

Ecomm.design aims to showcase an eclectic mix of stores across many different verticals, with less of a focus on front-end experimentation and more on the metrics and UX practices that matter to ecommerce.

CREATIVE

User interface designs are about being highly creative. This list of websites will give you a constant dosage of creativity.

Behance

Behance is a platform that allows many people with web design careers to showcase their portfolios of visual work such as graphic design, fashion, illustration, photography, and more. One of the pros of Behance is that it is effortless to use.

Dribbble

Dribbble is the leading destination to find & showcase creative work and home to the world’s best design professionals.

Site Inspire

A CSS gallery and showcase of the best web design inspiration, featuring over 2500 websites searchable by type, subject, and style.

Creative Blog

CreativeBloQ is an online blog that provides its readers with daily creative tips and inspiration about web design, graphic design, 3D, and more.

Lapa

The best landing page design inspiration from around the web. Lapa Ninja is created to help designers find inspiration, learn and improve design skills.

Beautiful Pixels

Beautiful Pixel is where you can collectively admire the works of some of the most significant user interface designs of our time, as no other art is as scientific, restrictively creative, and, most of all, practical.

Design Shack

They publish articles about Web and graphic design, trends, business, mobile, UX, typography, and how to work in the design industry. All alongside inspiration and resources to help you create beautiful design work!

Awwwards

The awards recognize the talent and effort of the best web designers, developers, and agencies in the world.

Land-book

They’ve created this place for Designers, Developers, Product Owners, Marketing Managers, Startupers, Freelancers, and, really, for everyone who appreciates exceptional designs and well-crafted sites.

Niice

The creative review platform for design teams.

TOOLS

User experience designers need to share their wireframes, while it’s been designed and coded at the same time. Guess how such operations take place… Here are free UI design resources for some amazing tools to work with.

Frame box

Lightweight online tool for creating and sharing mockups (wireframes). Easy, fast, and free in use.

Wireframe.cc

A cloud-based platform that allows designers to create and share wireframes of websites & mobile applications, add annotations, perform editing operations and export projects to PDF/PNG files.

Origami

A new tool for designing modern interfaces, built and used by designers at Facebook.

Creately

Creately is a dynamic diagramming tool that can be deployed from the cloud or on the desktop and as a plugin for JIRA and Confluence. As Creately is a straightforward application, you do not need highfalutin technical skills to build your diagrams, including flowcharts, infographics, or others.

FreeMind

FreeMind is a premier free mind-mapping software written in Java. The recent development has hopefully turned it into a high productivity tool. 

Hamok

Showcase your digital designs. Beautifully and super easy with Hamok. Create high resolution mock ups, personalize, export and use everywhere.

Invision Studio

InVision Studio is a prototyping and animation tool that lets you create advanced, vector-based screen designs fast thanks to flexible layers and infinite canvas. It’s considered one of the best high-fidelity prototyping tools out there.

Cleanmock

Create stunning mockups using the latest device frames like iPhone X and custom backgrounds that make your mobile or website design stand out.

Brandfetch

Brandfetch is the go-to-place to source digital assets. Quickly find famous logos, colors, fonts, images, and more.

Conceptboard

Visual Collaboration Workspace with whiteboard functions enabling efficient teamwork, regardless of time and place.

PATTERNS

Patterns are an integral part of graphic designs. It’s heavily used in UI, brochure, presentations, social media posts, etc. Here are some handpicked awesome resources for some super cool patterns.

Ui-Patterns

User interface design patterns are descriptions of best practices within the user interface design. They are general, reusable solutions to commonly occurring problems.

Zurb

ZURB is a product design company. They help companies design incredible digital products (things like desktop software, mobile apps, etc), websites, and integrated services.

Design Snips

Collecting snippets of good design

UI Garage

Your one-stop-shop for specific mobile and web design inspiration. Curated by designers, for designers

Product Design Tips

Productdesign.tips delivers relevant design knowledge and inspiration.

Facebook Design

Facebook Design is committed to designing and building Facebook apps and technologies—the Facebook app, Messenger, Instagram, WhatsApp, Oculus, Workplace, Portal and Novi—to serve a diverse global community.

Vecteezy

Choose from over a million free vectors, clip art graphics, vector art images, design templates, and illustrations created by artists worldwide!

Elements of Design

Design elements are the fundamentals to all designs: form, shape, line, texture, color, space, movement.

UI Sources

Design better apps. Real design inspiration & insights from the world’s best-designed products.

ILLUSTRATIONS

An illustration is a decoration, interpretation or visual explanation of a text, concept or process, designed for integration in published media, such as posters, flyers, magazines, books, teaching materials, animations, video games and films.

UnDraw

The updated design project continues with beautiful SVG images that you can use completely free and without attribution.

DrawKit

Beautiful, MIT-licensed illustrations for you to use on your next website, app, or project.

Absurd Illustrations

With this project, they try to introduce a new way and visual perception for websites, presentations, apps, articles… everything!

ManyPixels

They operate with one goal in mind: becoming your go-to solution for ordering design services online.

Ouch!

Ouch helps creators who don’t draw overcome the lack of quality graphics. Download the free PNG and SVG illustrations from top Dribbble artists to class up your product

Humaaans

Humaaans is a free library to mix-&-match illustrations of people. You can customize their positions, clothing, colors, and hairstyle to create some cool scenes. You can add backgrounds and use the power of libraries to make it your own

IRA Design

Ira Design comes with a great variety of ready-to-use examples made with gradients.

Interfacer

Interfacer is a collection of 300+ free design resources found on the Web.

Freebie Supply

Free, high-quality design resources for Photoshop, Sketch, Illustrator, Adobe XD and Figma

Black Illustrations

Black illustrations is a series of FREE digital designs of black people for your next online project. Free for commercial and personal use.

ICONS

An icon is a small graphical representation of a program or file. When you double-click an icon, the associated file or program will be opened.

Streamline 3.0

Streamline 3.0 is the world’s most massive icon pack and source for free ui resources. Weighing in at over 30000 icons, three different weights, 53 categories, and 720 subcategories.

Font Awesome

Font Awesome is a web font containing all the icons from the Twitter Bootstrap framework, and now many more. To do so, you’ll need to use the following CSS on the desired element, and then substitute in the content value for the relevant icon.

Freepik

Freepik helps you find free vectors, photos, illustrations, and PSD files that you can use in your Web, banners, presentations, magazines, ads, etc.

Iconmonstr

Free, monstrously big and continuously growing source of simple icons 

Fontello

Fontello is a web app that lists open source icon fonts, shows glyphs from them, allows you to select the icons you need from any font, and creates a new custom font from your selection. You can then use these custom font on your website.

Icons8

Icons8 allows designers to express their ideas by giving the right design elements at the right time.

Iconshock

The biggest bounty of professional icons to be found anywhere. Over 2 million icons: 400+ icon sets in more than 30 styles part of Unusual Minds.

Pngtree

Millions of PNG transparent images and other Graphic resources.

Iconfinder

Iconfinder is the leading search engine and marketplace for vector icons in SVG, PNG, CSH, and AI format.

Pixelbuddha

They are a creative team passionate about bringing the best free and premium resources to the design community.

COLOR

UI/UX designers are always in search of super cool inspirations. These inspirations help them to learn and unlearn about certain products or services they are designing. Here is a list of websites that will help you gain that vision to design awesome solutions.

Coolors

Generate and explore beautiful color palettes! The super fast color schemes generator + a collection of more than 1.5 M palettes!

Picular

Picular is a rocket fast primary color generator using Google’s image search.

Muzli Colors

Muzli by InVision is a Chrome extension that provides quick access to all that’s hot and simply awesome in the Inspiration, design & tech, web, ux, ui scene.

Colorable

Contrast is the difference in luminance or color that makes an object (or its representation in an image or display) distinguishable. 

Flat UI Colors

A total set of 14 color palettes and 280 colors for your designs, projects, presentations and other needs.

Palettte App

The definite palette editing and remapping tool. This app works best with JavaScript enabled.

Colorinspire

A small website to showcase beautiful color combinations in one place. 

ColorSpace

ColorSpace is a currently developed tool to generate color palettes, gradients and much more!

Colordot

It’s intuitive, fast, and beautiful. Build palettes with a swipe of your finger or use your camera to capture colors from the world around you.

Color Leap

Color Leap is a collection of 180 color palettes that showcase colors used throughout 12 distinct eras in history.

WIREFRAME

A wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website or an app.

Speckyboy

Speckyboy is an online magazine for web designers. They are all about sharing new resources and tools and highlighting new, innovative techniques.

Envato Elements

Envato Elements opens up a world of creative possibilities for all your design projects. Powered by a community of talented designers, their subscription puts great design in reach for everyone.

Figma Kits

A design platform for teams who build products together.

365psd

Download free psd files, vectors and graphics. Choose from thousands of free psd flyers, psd mockups, psd templates, vector and graphic files.

Ui8

100% curated digital marketplace with a growing library of high quality UX/UI design resources and freebies for designers.

Freepik

Find & Download Free Graphic Resources for App Mockup. 4000+ Vectors, Stock Photos & PSD files. Free for commercial use. High Quality Images.

Mockplus

Mockplus is a prototyping tool designed to make prototypes faster, smarter and easier for all platforms 

Webflow

Build responsive websites in your browser, then launch with our world-class hosting or export your code.

GrowthHackers

High quality trending articles on growth hacking, marketing channels, user acquisition, engagement, product launch and more.

XDGuru

XDGuru provides useful resources for UI/UX designers using Adobe XD: templates, UI kits, freebies, great tutorials & guides, and plenty of other stuff!

UI GRADIENTS

Gradients, also known as color transitions, are a gradual blending from one color to another (one or multiple) colors.

Grabient

Beautiful and simple UI for generating web gradients.

uiGradients

A handpicked collection of beautiful color gradients for designers and developers.

WebKul

Top-ranked erp, commerce, crm and mobile app development IT services company in India. We worked with fortune 100 in last 10 years.

Granim.js

Create fluid and interactive gradient animations with this small javascript library. 

WebGradients

180 beautiful linear gradients in CSS3, Photoshop and Sketch. This collection is curated by top designers and totally free.

CSS Gradient

As a free css gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.

GradientsGuru

GradientsGuru has 99 Cool Gradients, 99 Strong Gradients with their own rotation mode and 15 Blend Mode image effects.

EggGradients

Ready to use gradient background colors. Cool Gradients are prepared according to the latest design trends. 

Gradient Cards

The Ultimate gradients guide for your next project sketch,Adobe xd and css Gradients.

Digital Synopsis

Digital Synopsis showcases the best ideas in design, advertising and visual communication.

FONT TOOLS

Font tools help UI designers to customize their fonts, select and edit too. Quite an impressive collection of awesome websites.

FontArk

FontArk is an innovative new browser based online font editor, font creator, featuring a unique real time Multiple-Character-Editing tool.

Calligraphr

Transform your handwriting and calligraphy into fully functional vector fonts with our web application. Creating your own font has never been easier.

BirdFont

Birdfont is a free font editor which lets you create vector graphics and export TTF, OTF and SVG fonts.

FontForge

FontForge is a free and open source font editor brought to you by a community of fellow type lovers.

FontStruct

FontStruct is a free font-building tool, funded by advertising and some generous sponsors.

Glyphr Studio

Glyphr Studio is a free, web based font designer. Version 1 is here! Font design has a high barrier of entry.

BitFontMaker2

BitFontCreator is a professional bitmap font creator tool for your embedded project, which helps you create monochrome (1-bpp) bitmap fonts and antialiased (2-bpp and 4-bpp) bitmap fonts for graphical LCD / LED.

TTFEdit

TTFEdit is a GPL editor for TrueType fonts. TrueType is a standard used by modern operating systems like Mac OS X, Windows XP and Linux. 

cr8software

CR8 Software Solutions for easy-to-use font making and ID card printing software. 

FontLab Studio

FontLab Studio is our classic font editor. Designers, typographers and graphic design studios, allowing them to design typefaces and create or modify fonts.

STOCK PHOTOS

Stock images are a great resource to get high quality and cheap photos that you can use in your designs for various purposes. They are perfect for marketing and advertising, for promotional work, for personal or commercial creative projects, for publishing, for websites and blogs, and more.

Pixabay

Find your perfect free image or video to download and use for anything. Free for commercial use. No attribution required. High quality images.

Stocksnap

High quality and high resolution stock images free from all copyright restrictions – no attribution required.

Burst

Browse thousands of beautiful copyright-free images. All their pictures are free to download for personal and commercial use, no attribution required.

Pexels

Free stock photos you can use everywhere. Free for commercial use. No attribution required.

FoodiesFeed

Download 2000+ food pictures. The best free food photos for commercial use.

The Stocks

The best royalty free stock photos are delivered now along with videos, audios, icons, fonts and colors. 

Unsplash

Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.

Picjumbo

Free stock photos and images for your projects and websites.️ Beautiful 100% free high-resolution stock images with no watermark

Reshot

Find tons of handpicked, non-stocky images. Yours to use as you wish. Free for commercial use. No attribution required.

UX RESEARCH

Typically done at the start of a project, it encompasses different types of research methodology to gather valuable data and feedback.

Keep It Usable

User experience agency specialising in research and user-centred design services. They create digital platforms that people enjoy using and increase sales.

UX Myths

UX Myths is aimed at both product designers and clients. They set themselves the task to end the battles of personal opinions and – often false – beliefs and move design conversations into the realm of facts and evidence.

UX Movement

The most innovative UX design publication challenging the status quo.

Baymard Institute

They are an independent web usability research institute.

UX Stack Exchange

User Experience Stack Exchange is a question and answer site for user experience researchers and experts.

UX Matters

UXmatters provides insights and inspiration to experienced professionals working in every aspect of User Experience, as well as those who are just beginning their journey in the field.

UIE

UIE is a leading research, training, and consulting firm specializing in UX, web site and product usability.

NN Group

They are a UX research and consulting firm trusted by leading organizations world-wide to provide reliable guidance on user experience.

Usability Geek

Usability Geek is a blog that provides practical and useful insights into topics like Usability, User Experience (UX).

PHOTOSHOP

Photoshop is a critical tool for designers, web developers, graphic artists, photographers, and creative professionals. Widely used for image editing, retouching, creating image compositions, website mockups, and adding effects.

SuperPNG

SuperPNG is a free, open source Adobe Photoshop plug-in for using PNG files. 

Pexels

Free stock photos you can use everywhere. Free for commercial use. No attribution required.

Digital Anarchy

Digital Anarchy creates intelligent plugins for video editors and photographers. Our plugins solve complex problems letting you finish projects faster.

Ink

Ink is a photoshop documentor plugin made by chrometaphore.com

PixelSquid

PixelSquid makes 3D content easy for graphic designers to download at any angle as transparent PNG or PSD.

Camera Raw

Adobe Camera Raw (ACR) is the raw imaging engine that powers the Camera Raw plugin inside Photoshop CC, Lightroom Classic CC, and Lightroom CC. 

EasyMockups

EasyMockups has one of the best and most advanced Photoshop panel designs & interactions on the market. Built for app and mobile designers.

Griddify

Griddify is tiny and fast. It helps you compose custom grid systems, vertical rhythm, and do a bunch of other stuff with guides in photoshop.

3D Shadow 2.0

3D Shadow – This handy tool easily creates various types of 3D shadows from objects such as letters, numbers, shapes and so on.

Local Contrast

Local contrast refers to contrast adjustments between smaller areas of the scene, and can be adjusted with the clarity slider.

SKETCH

Sketch is a design toolkit built to help you create your best work from your earliest ideas, through to final artwork.

Anima Toolkit

Create High-Fidelity Prototypes in Sketch, XD or Figma, and Export HTML code.

Align to Grid

Align to grid is a feature included in the most recent versions of Windows, which enables users to automatically arrange icons on the desktop based on an invisible grid. 

Bootstrap Grid

The Bootstrap Grid System is used for layout, specifically Responsive Layouts. 

Looper 2.0

Looper 2.0 sketch plugin. Duplicate, Rotate and Looper calculates the rotation angle to achieve a perfect 360 degree rotation for a given duplication count.

Artboard Manager

Sketch Artboard Manager. This plugin automatically arranges the position of all Artboards in your Sketch document, to snap them to rows & columns.

Sketch Guides

Plugins are features that can be installed to the Sketch app to enhance the program’s functionality. Sketch’s plugin manager makes it easy to manage, disable, and update plugins within the app.

Rename It

Rename it as a Sketch, Adobe XD & Figma plugin that batch renames layers and a lot more.

Align to Padding

Automated padding, spacing and alignment for your Sketch layers. Most other plugins require a keyboard shortcut for them to be applied, or re-applied. This is all done automatically as you manipulate your layers; simply deselect everything, and will be updated.

Sketch Resize

To resize a layer, select it, then click and drag on any of its selection handles. Handles on the sides of the layer will adjust the height or width, while handles on the corners

will adjust the height and width together. Holding ⇧ will resize the layer

proportionately, keeping its height and width at the same ratio.

Prism

Creates a beautiful artboard color palette with all your ‘Document Colors’ and their respective color label in a variety of formats

FIGMA

Figma helps teams create, test, and ship better designs from start to finish.

UI Store

481 Free Handpicked UI Kits for your real life projects

UI Gradients

A handpicked collection of beautiful color gradients for designers and developers.

Themer

Themer enables you to create and swap themes from your *published* styles in your team library. Use it for color, text and effect styles.

AutoLayout

Auto Layout buttons can resize with their text. Lists can rearrange themselves when items are moved around.

Paddet

Paddet is a small tool that will help you automatically apply padding to frames.

Icon Resizer

Resize icons into a standard size and bounding box on your design. 

Design Lint

Design Lint finds missing styles within your designs on all your layers.

Figma Measure

A plugin for easy measurement of sizes. A small user interface allows you to add arrows for heights and widths.

LottieFiles

LottieFiles is a collection of animations designed for Lottie – gone are the days of bugging your developer.

Remove BG

Remove.bg removes backgrounds from photos. Automatically, in only 5 seconds and for free.

Minimap

Figma Minimap plugin. Game-like miniature map that provides an overview of the Figma canvas.

XD

Adobe XD (which stands for Experience Design) has all of the instantaneous wireframing prowess of the impressive iPad app Adobe Comp, plus options to create interactive prototypes of websites and apps.

Confetti

Effortlessly generate gorgeous confetti patterns with a few clicks.

Undraw

The constantly updated design project with beautiful SVG images that you can use completely free and without attribution.

GoProof

Online proofing software from GoProof is the future of creative collaboration and integrates with Adobe® Creative Cloud®

Avocode

Avocode helps you share design files, discuss changes, and code websites, mobile apps, & newsletters faster.

Artboard Plus

Artboard tools to speed up your Adobe XD workflow. Rearrange artboards into grids, sort them by name or create an artboard around selection.

Bookmarks

The best resources for designers in one place.

VisualEyes

Analyze user behavior, enhance UX, and optimize designs by utilizing AI generated Attention Heatmaps and Clarity score.

FindFont

FindFont is a plugin for Adobe XD to find all instances of a font style and replace it with another. 

ColorSpark

A simple and effective tool that generates random colors and gradients.


Leo9 Studio was among the pioneer UI UX design companies in Mumbai, India, and we love to share our leanings to strengthen our design community. This free UI resources blog isn’t just one thing, as we are proud to guide and help several agencies grow from scratch.

Chameleon

Create power users on autopilot. High-growth SaaS companies drive product success with Chameleon by highlighting changes to users and getting feedback in real time.

Visit Chameleon Here


We have some more awesome articles:

A Curated List Of The Best And Free UI Design Kits And Components

Check this list of the best and free UI Design kits And components for UI design. This list will help you focus on the clients needs by saving your time.

6 Reasons Why Most Mobile App Design Fails

Know your mobile app design and development issues to evaluate and exclude the most common mistakes designers and developers make.


If you find this article useful, do share it on social media!

Don’t forget to follow us.

Blog: UI UX Design and Development Agency

Instagram: @leo9studio

Facebook: @leo9studio

Twitter: @Leo9Studio