fontjoy.com
Generate font pairings balanced by the contrast between them, then lock and tweak each pair.
Design Resources for UI/UX Designers
Fonts, icons, colors, illustrations, mockups and UI kits you can drop straight into a file. Use this page when you need an asset, a generator or a small utility to finish a screen, a deck or a handoff, without searching the whole web for it.
Free Fonts, Pairing and Type Scale Tools
Free and licensed typefaces, pairing tools and type scale generators. Use them to choose a family, test combinations and set a consistent hierarchy before you build text styles.
dirtylinestudio.com
A library of bold, characterful display fonts, free to download.
fontshare.com
Quality serif and sans-serif fonts from Indian Type Foundry, free for personal and commercial use.
fonts.google.com
1,500+ free, widely used font families with variable axes and one-line web embedding.
fonts.adobe.com
Large library of retail typefaces included with Creative Cloud, licensed for commercial use and activated straight to your desktop.
typewolf.com
Curated font recommendations, pairings and alternatives to popular typefaces, plus a site-of-the-day typography showcase.
uncut.wtf
Free catalogue of 160+ contemporary typefaces across sans, serif, display and mono. A good source of free fonts that don't look default.
typescale.com
Build a modular type scale from a base size and ratio, preview it with real fonts, and export the CSS.
Color Palette Generators and Scale Tools
Palette generators, tint and shade builders and perceptual color pickers. Use them to pick brand colors, build accessible UI scales and preview a palette on real layouts.
pigment.shapefactory.co
A playful palette maker that builds color pairs from saturation and lightness.
maketintsandshades.com
Generate tints and shades of any color to build out your design system's palette.
radix-ui.com
Generate a full Radix-style color scale from your brand colors and preview it on real UI.
coolors.co
Fast palette generator (spacebar to shuffle) with 10M+ community palettes, image picker, contrast checker and a Figma plugin.
realtimecolors.com
Preview a palette and font pairing on a live website layout, check contrast, then export to CSS, Tailwind or Figma.
uicolors.app
Generate Tailwind-style shade scales from a brand hex and preview them on real UI components. Includes a Figma plugin.
oklch.com
Evil Martians' OKLCH picker and converter with P3 gamut preview and sRGB fallbacks, for perceptually even palettes.
Free Illustration Libraries
Illustration libraries in consistent styles, many of them free and recolorable. Good for empty states, onboarding, marketing pages and decks when custom illustration is out of scope.
getillustrations.com
170,000+ vector illustrations and icons for web and app projects, in SVG, PNG and AI formats.
undraw.co
Open-licensed flat illustrations you recolor to your brand before download. No attribution required.
storyset.com
Illustrations in five styles that you can recolor and animate in the browser before export. Has a Figma plugin.
blush.design
Mix-and-match illustration collections from artists worldwide. Customize characters and scenes, export or use the Figma plugin.
icons8.com
Illustration library in 20+ consistent styles, with modular editable vectors plus 3D and animated sets.
Gradient, Mesh and Texture Generators
Generators and libraries for gradients, mesh backgrounds, grain, blobs and SVG patterns. Useful for hero sections, cards and slides that need depth without a photo.
designgradients.com
Linear gradients curated by talented artists, ready to drop into any project.
haikei.app
Generates SVG blobs, waves, layered peaks, blurry gradients and other backgrounds. Randomize, tweak, export as SVG or PNG.
shaders.paper.design
Zero-dependency WebGL shaders (mesh gradients, grain, dithering, halftone, liquid metal) shipped as React components.
meshgradient.com
Drag points on a WebGL canvas to warp colors into organic mesh gradients, then export. Quick hero and card backgrounds.
cssgradient.io
Linear and radial gradient generator with copy-ready CSS, plus a library of curated gradient swatches.
UI Kits and Component Libraries
Figma UI kits and code-ready component libraries. Start a project from a proven base, match platform conventions and keep your designs close to what engineers will build.
uiverse.io
4,400+ open-source UI elements built with CSS and Tailwind, ready to copy into your project.
ui.shadcn.com
Open-source React components on Radix/Base UI and Tailwind that you copy into your codebase. The baseline for most SaaS UIs.
untitledui.com
Figma design system with 10,000+ components and variants, a matching open-source React library and an icon set.
figma.com
Thousands of free and paid UI kits on Figma Community, including official kits from Apple, Google and Microsoft.
developer.apple.com
Official Figma and Sketch kits for iOS, macOS, watchOS and visionOS, plus SF Symbols, SF fonts and device bezels.
magicui.design
150+ free animated React components built with Tailwind and Motion, designed as a companion to shadcn/ui.
Design Utilities and Handoff Tools
Small tools that remove friction: image and SVG optimization, vectorizing, shortcuts, QR codes and developer handoff. The things you reach for at the end of a task.
shortcuts.design
Keyboard shortcuts for almost every design tool, in one searchable place.
zeplin.io
Handoff and documentation layer: publish screens from Figma and developers get specs, assets, styles and code snippets.
squoosh.app
Google Chrome Labs' in-browser image compressor with side-by-side quality comparison. Files never leave your device.
jakearchibald.github.io
Web UI for SVGO. Drop in an SVG, toggle optimizations and export a smaller, cleaner file before dev handoff.
vectorizer.ai
AI raster-to-vector converter that turns PNG or JPG logos and art into clean SVG, EPS or PDF. Free preview before you pay.
Color Contrast and Accessibility Tools
Contrast checkers, vision simulators and perceptual palette tools. Use them while you design, not after, so text and UI colors pass WCAG before handoff.
webaim.org
The reference WCAG 2 contrast checker. Enter two colors and get AA/AAA pass or fail for normal text, large text and UI.
getstark.co
Accessibility suite with Figma and Sketch plugins and browser extensions for contrast checks, vision simulation and audits.
whocanuse.com
Shows how a color pair reads for people with different vision types, alongside its WCAG contrast grade.
apcacontrast.com
Checks text contrast with APCA, the perceptual model developed for WCAG 3, with guidance tied to font size and weight.
accessiblepalette.com
Builds color scales with consistent perceived lightness in CIELAB/LCh, so contrast stays predictable across shades.
Icon Sets and Icon Search
Open-source and premium icon families with consistent weights and code packages. Pick one set per product and stick with it for a coherent interface.
lucide.dev
Open-source stroke icon set (1,800+ icons, ISC license) with packages for React, Vue, Svelte and more. The default icons in shadcn/ui.
phosphoricons.com
Flexible open-source icon family in six weights, thin to duotone, with Figma plugin and React, Vue, Swift and Flutter packages.
icon-sets.iconify.design
Search 170,000+ open-source icons from 200+ sets in one place, with each set's license shown. Also available as a Figma plugin.
streamlinehq.com
450,000+ assets across 40+ consistent icon families, from minimal Core to hand-drawn Freehand. Free sets plus Pro.
Brand Logos and Placeholder Logos
Real brand logos, colors and icons, plus placeholder logos for mockups. Useful for integration screens, customer logo strips, case studies and partner pages.
brandfetch.com
Look up logos, colors and fonts for 50M+ brands by name or domain. Handy for logo walls and integration screens.
svgl.app
Open-source library of 600+ clean SVG logos for tech, AI and dev-tool brands, with copy-ready SVGs and an API.
simpleicons.org
Thousands of CC0 SVG brand icons with each brand's official hex color, available via npm and CDN.
logoipsum.com
200+ placeholder logos for mockups, customer logo strips and case studies. Copy as SVG or use the Figma plugin.
Device and Branding Mockups
Device, print and branding mockups, plus tools that turn screenshots into polished stills and videos. Use them for case studies, launch posts, pitch decks and client presentations.
mockups-design.com
Thousands of free, premium-quality mockups for devices, print, packaging and branding.
shots.so
Turn screenshots into polished device mockups and animated videos with auto backgrounds, shadows and social-size presets.
rotato.app
Mac app for animated 3D device mockups. Drop in a screen or recording, move the camera, export product videos up to 8K.
mockuuups.studio
5,200+ device and print mockups. Drop a design in once and preview it on all of them, via web, desktop or Figma plugin.
ls.graphics
Premium device and branding mockups in PSD, Figma and Sketch, plus an online editor. A free selection is available.
UI Animation, Lottie and Interactive Motion Tools
Tools and libraries for UI animation, Lottie files, animated icons and interactive WebGL effects. Use them to prototype transitions or ship lightweight motion to production.
jitter.video
A motion design tool for UI animation. Import your Figma files and animate them in the browser.
lottiefiles.com
Huge library of free and premium Lottie animations, plus Lottie Creator for building and exporting dotLottie in the browser.
rive.app
Interactive animation tool with state machines and native runtimes for web, iOS, Android and game engines.
lordicon.com
47,000+ hand-animated icons with hover, loop and morph states. Export to Lottie, GIF or MP4, or embed via JS.
unicorn.studio
No-code WebGL tool with 75+ effects for interactive hero backgrounds, shaders and motion graphics that embed on any site.
3D Icons, Renders and 3D Design Tools
3D icons, abstract renders and browser-based 3D tools. Good for marketing visuals, empty states and onboarding where a flat icon feels too plain.
spline.design
Browser-based 3D design tool for interactive scenes and objects, with a remixable community library and web embeds.
3dicons.co
1,400+ CC0 3D icon renders in several angles and finishes, free for commercial use with no attribution.
thiings.co
10,000+ AI-generated 3D object icons as transparent PNGs. Handy for playful empty states, onboarding and marketing visuals.
shapefest.com
100,000+ Cinema 4D renders of abstract shapes, icons and glass, clay or metal materials. Free packs plus hi-res premium.
Figma Plugins for Product Designers
Figma plugins for design tokens, realistic content, flow arrows and importing live websites. They save time on the repetitive parts of building and presenting work.
tokens.studio
Figma plugin and platform for managing design tokens and syncing them with GitHub and code. Built for multi-brand systems.
html.to.design
Import any live website into Figma as editable layers with auto layout and styles. Useful for audits, redesigns and benchmarks.
figma.com
Draws connector arrows between frames that follow when you move them. The quickest way to map user flows in Figma.
contentreel.design
Microsoft's Figma plugin for filling layouts with realistic names, avatars, text strings and icons in one click.
Free Stock Photos and Video
Stock photo and video libraries, most of them free for commercial use. Use them for placeholders, marketing pages and presentations, and check each license before you ship.
unsplash.com
High-quality free photos under the Unsplash License, with a paid Unsplash+ tier and a Figma plugin for placing images in-file.
pexels.com
Free stock photos and videos for commercial use without attribution. Strong for lifestyle, workplace and b-roll.
mixkit.co
Free stock video clips, music, sound effects and video templates from Envato. No sign-up or attribution needed.
lummi.ai
Stock photos, illustrations and 3D made by humans and AI, with built-in reframe, restyle and background removal.
Website Navbar and Footer Patterns
Focused galleries of website navigation and footer designs. Use them when you need a quick range of structural options for one specific component.
footer.design
A gallery of website footer inspiration to reference when designing for the web.
Design Resource Directories
Large, searchable directories of design tools and assets. Start here when you need something outside this list and want a wider index to browse.
toools.design
A one-stop directory of 2,200+ design resources and tools: illustrations, mockups, fonts, AI tools and more, free and paid.
Weekly newsletter · Every Tuesday
New references, every Tuesday.
The newest additions to the library, three LDS picks worth revisiting and a category spotlight, in one short email.
Browse past issues