Whether you’re designing a website or an app, you will probably need some UI graphics resources to speed up your workflow and improve your design. The UI components and resources may be buttons, patterns, and even illustrations. While you can definitely build your own UI graphics from scratch, there are some websites that offer free UI graphics resources. These websites and resources come with modern UI components in different formats such as PSD, Figma, Sketch, Adobe XD, and more. Below are the best UI design resources to find the best UI components.
Best UI design resources for designers
UI Design Daily is the most extensive resource for free awesome UI components of all types. With over a thousand interface designs across a range of categories such as Stats, Pricing cards, Mega Menus, Neumorphic design, and more, it is hard to believe all the designs were done by one person!
UI Design Daily is the brainchild of Ildiko, a designer and interface developer based in Norway. In 2016, she started doing daily UI practices and has since created more than 1000 designs. The designs are available in a variety of popular formats including Sketch, Photoshop, Figma, Adobe XD, and Studio. With its friendly clean UI, powerful search filters, and grand database of designs, UI Design Daily is one of the best UI design resources for designers of all levels.
2. 100 Daily UI
100 Daily UI Challenge is a free customizable Figma library of products, elements, and screens. You can customize all of them by changing colors, shapes, or elements. 100 Daily UI is created by Jan Janeczek, who created them when for use in larger projects in the future, not only by him but by anyone else. Using 100 Daily UI, you can create some pretty awesome UI designs and better products.
Sketch App Sources is the internet’s largest collection of free and premium design resources for Sketch, a graphics editor. Sketch App Sources’ mission is to help you design, collaborate, prototype, learn, and ideate faster with Sketch. They have curated thousands of Sketch files as well as plugins, tutorials, and articles created by Sketch users from around the world. The UI kits, wireframe kits, templates, and icon sets contain hundreds of UI elements that can boost a designer’s workflow. At the time of writing, there were about 4400 Sketch resources on the website.
One of the best ways to learn new techniques and design principles is to study and analyze the work of others. The Sketch App Sources website lets anyone share their work or other resources with their community, gaining feedback, and making an impact on other designers/developers.
Humaaans is a free library to mix-&-match illustrations of people. You may customize their positions, clothing, colors, and hairstyle to create interesting scenes. Feel free to add backgrounds and use the power of libraries to make it your own. Humaaans is available on Sketch, Figma, InVision Studio, and Adobe XD. Humaaans helps you create perfect characters for web landing pages, mobile error/showcase states, user onboarding flows, and other projects.
Paaatterns is a free collection of beautiful handcrafted patterns for your commercial and personal projects, available in all vector formats, as well as SVG and PNG. When you need a strong visual style, but the deadline is close, try using Paaatterns’ patterns – interesting hand-crafted shapes and well-chosen colors will help when there are out of ideas. The patterns are easy to customize and edit, thanks to layer styles and vector shapes.
Paaatterns is compatible with Sketch, Figma, Adobe XD, and Adobe Illustrator. The Sketch file is composed of color layer styles and vector shapes. The Figma file contains components, color layer styles, and vector shapes. The XD file is made up of symbols, color layer styles, and vector shapes. The Illustrator file is composed of vector shapes. The patterns are accurately crafted and have different styles, colors, and emotions.
Drawkit is a collection of beautiful, free illustrations, with illustrations being updated weekly. These huge collection of hand-drawn vector illustrations and icon resources are perfect for your next project. They make your webpages and apps more engaging. Every SVG vector illustration or icon is fully customizable to match your brand and bring your designs to life. Drawkit has a constantly updated library of high quality, beautiful vector icons, in four styles. They are free to use on personal and commercial projects, royalty-free.
Undraw is a collection of open-source illustrations for any idea you can imagine and create. It is a constantly updated design project with beautiful SVG images that you can use completely free and without attribution. Undraw helps you create better-designed websites, products, and applications. You can browse to find the images that fit your messaging, automagically customize the color to match your brand, and use it as a normal image, embedded code, or directly in your design workflow.
Because the images are vector, they can be scaled without quality degradation, making them not just retina but future-ready. With a tiny file size, you can combine dozens of SVG images without worrying about speed and with the ability to embed them to minimize requests, for blazing-fast loading times. Undraw illustrations are quality and available for your designs with customizable colors and objects that can be combined and modified to create new exciting images and with a design style that balances art and tech to future-proof your designs. You can use the illustrations in any project, commercial or personal without attribution or any costs — a truly open license.
Illustration is an open-source illustrations kit. Back in 2016, designer Vijay Verma spent almost 2 hours a day for 100 days to design illustrate and experiment with illustrations. All those illustrations were saved on his drive untouched for years. So, he decided to share them with the public for free. Now, you can download all illustrations completely free and use them to design awesome landing pages, mobile apps, or presentations. The files available include PNG, SVG, EPS, and vector formats for Sketch and Adobe Illustrator.
Opendoodles is a free set of sketchy illustrations for personal or commercial use. Images can be downloaded as PNG, SVG files, or GIF animations.
10. Open Peeps
Open Peeps is a mix & match library that works like building blocks made of vector arms, legs, and emotions. You can mix these elements to create different Peeps. You can combine clothing and hairstyles to add flair, change emotion with different facial expressions, and set the scene with different poses—including standing and sitting. Open Peeps is created for all occasions. You can use Open Peeps in product illustration, marketing imagery, comics, product states, user flows, personas, storyboarding, invitations for your quinceañera…or anything else not on this list.
The Open Peeps library is in the public domain under the CC0 License. This means you can copy, modify, distribute, remix, burn, and use the work, even for commercial purposes, without asking permission. Creating a character is easy! Use any product design tool like Sketch, Figma, XD, or Studio to mix nested components. There are over 584,688 possible combinations (yup, someone did the math!)
11. UI Space
UISpace is a curated library of design resources. With UISpace’s resources, you never have to start a project from scratch again. UI Space has high-quality hand-crafted free Sketch files, PSDs and AI freebies, free fonts, mockups, the latest free icons sets, and other free vectorial resources.
Animations.co is a collection of beautiful, customizable animated GIF icons. Animated GIFs have excellent browser support because they work like images. They are small in file size and play automatically. The animations can be used in websites, presentations, emails, and more. Animaticon animated GIFs are designed to be colored, tinted, and tweaked to fit your style.
Animaticons work with no need for additional plugins like Flash or Silverlight, or libraries like jQuery or Snap.svg. Animated GIFs are ready to use as soon as you download them, and work anywhere that images work. They are easy to use, you just have to download the images and you’re ready to go! The animation is part of the image. Complex CSS or SVG animations could take dozens, even hundreds, of lines of code to implement.
UpLabs is the place to find high-quality design resources for designers, creative agencies, and developers. UpLabs curates the best of design & development inspiration, UI design resources, and freebies every day of the week. You can browse Uplabs by topic (such as branding, web design, android design, ios design, and marketing) or software (such as PhotoShop, Sketch, XD, WordPress, HTML and more).
These are the UI design resources that made it to our list! Do you know a great resource we missed out on? Let us know in the comment section.