Design
Fonts, colour, icons, mockups, UI kits and the galleries worth learning from.
418 tools in 17 categories
All Design
418 tools
Fonts 40
Google FontsOpen-source families you can self-host or load from Google.
FontshareQuality typefaces from Indian Type Foundry, free for commercial use.
UncutA catalogue of contemporary free and open-source display faces.
Pangram PangramIndependent foundry; every family has a free trial for personal use.
Klim Type FoundryKris Sowersby’s foundry, with essays on how each family was drawn.
TypewolfType in the wild: what fonts real sites use and what to pair them with.
Fonts In UseAn archive of typography in print and on screen, indexed by face.
TypescalePick a ratio and base size; get a modular scale and its CSS.
Colour 29
Realtime ColorsTry a palette and type pairing on a real page layout as you edit.- Coolors
CoolorsPress space to generate palettes, lock the colours you like. 
HuemintMachine-learned palettes previewed on brands, sites and gradients.
Adobe ColorColour wheel harmonies, extraction from images and contrast checks.
Radix ColorsTwelve-step scales for UI, each with a matching dark mode.
LeonardoAdobe’s tool for generating colour scales by target contrast ratio.- Tints.dev
Tints.devBuild an 11-shade Tailwind scale from one hex value. 
Happy HuesPalettes shown applied to a full page, so you see the roles.
Gradients 12
WebGradients180 free CSS gradient backgrounds to copy.- CSS Gradient
CSS GradientA free CSS gradient generator. 
uiGradientsA handpicked collection of beautiful gradients.
CSS Gears GradientsGradient cards for Sketch, XD and CSS.
ColorZilla Gradient EditorA Photoshop-like CSS gradient editor.
Gradient HuntThousands of trendy gradients, updated daily.
Gradient ButtonsHundreds of CSS gradient buttons to copy.
UI Gradients Styles380 fine-tuned gradients for Sketch and Figma.
Icons 40
Phosphor IconsA flexible family in six weights, from thin to duotone.
LucideCommunity fork of Feather with over a thousand consistent icons.
HeroiconsHand-drawn SVG icons from the makers of Tailwind CSS.
Tabler IconsThousands of outline icons on a 24px grid with adjustable stroke.
IconoirAn open-source library with a slightly rounded, friendly line.
Remix IconNeutral system icons, each in line and fill styles.
StreamlineA huge set of icons, illustrations and emoji in many styles.
The Noun ProjectMillions of icons from designers around the world, credit or license.
Illustrations 16
unDrawOpen illustrations you can recolour to your brand before download.
Open PeepsA hand-drawn library of mix-and-match people by Pablo Stanley.
HumaaansMix-and-match illustrations of people, with poses and outfits.- Blush
BlushCustomisable illustration collections from artists worldwide. 
StorysetEditable and animatable illustrations from the Freepik team.
3diconsOpen-source 3D icons in clay, colour and gradient renders.
DrawKitIllustration packs, 3D sets and icons for product sites.- Vector Creator
Vector CreatorMake illustrations in the browser from ready-made parts.
Patterns & backgrounds 21
- Subtle Patterns
Subtle PatternsFree subtle textures for website backgrounds. 
TabbiedGenerate colourful geometric patterns as artwork.
Plain PatternAn SVG-based seamless pattern maker.
GeoPatternGenerate geometric SVG patterns from any text.
ModulargridDesign modular grids for layouts.
PlaidMakerMake plaid patterns online.
Tartan MakerGenerate seamless tartan patterns.- Stripe Generator
Stripe GeneratorGenerate seamless diagonal stripe backgrounds.
Stock photos 19
- Unsplash
UnsplashFree high-resolution photographs from a large community. - Pexels
PexelsFree stock photos and video clips, no attribution needed. - Openverse
OpenverseSearch hundreds of millions of openly licensed images and sounds. 
LummiAI-generated stock photos you can search, edit and use freely.
Death to StockMonthly packs of photos that don’t look like stock photos.- Pixabay
PixabayFree images and videos for commercial use. 
Shopify Stock PhotosFree high-res photos for websites and commerce, formerly Burst.- Bigstock
BigstockAffordable stock photos, vectors and footage.
Mockups & resources 77
ShotsDrop in a screenshot and get a styled device mockup in seconds.
Mockuuups StudioThousands of drag-and-drop device and scene mockups.
RotatoAnimated 3D device mockups rendered on your Mac.- Mockup World
Mockup WorldFree photorealistic mockups for Photoshop, collected since 2013. - Previewed
PreviewedDevice mockups and animated scenes made in the browser. 
Meta DevicesAccurate device frames for phones, tablets, laptops and watches.
ls.graphicsPhotographic mockups and 3D scenes for print and screen.
Figma ResourceFree Figma UI kits, mockups and more.
UI kits & design systems 24
shadcn/uiComponents you copy into your project and own, built on Radix.
Radix PrimitivesUnstyled, accessible React primitives for building design systems.
Headless UIUnstyled, accessible components for React and Vue.
Untitled UIA large Figma UI kit and design system with React components.
Tailwind PlusOfficial Tailwind components, templates and UI blocks.
Magic UIAnimated React components for landing pages, shadcn-compatible.
Aceternity UIMotion-heavy React and Tailwind components to copy and paste.
Material Design 3Google’s design system: guidance, components and tokens.
Logos & branding 10
Logosystem1,600+ logos, wordmarks and animated marks to browse by colour and style.
RebrandA curated gallery of rebrands with their logos, colours and type.
The Brand IdentityThe best brand and graphic design, with case studies and interviews.
BRANDBRIEFRealistic design briefs and weekly challenges for brand designers.
LogoipsumFree placeholder logos in SVG for mockups.
Untitled UI Logos180+ fictional placeholder logos for UI design.
uilogosPlaceholder logos plus a plugin to drop them into designs.
Branding Style GuidesAn archive of brand guideline documents.
Inspiration 38
MobbinScreens and flows from hundreds of real iOS, Android and web apps.
GodlyAstronomically good web design, shown as live video captures.
ReferoSearchable references from real products, tagged by pattern.- Land-book
Land-bookA gallery of landing pages sorted by type, style and colour. 
SiteinspireA long-running showcase of web design, filterable by style.
One Page LoveOne-page websites, templates and resources since 2008.
AwwwardsDaily awards for web design, with jury scores and case studies.
Minimal GalleryHand-picked minimal and functional websites.
Portfolios 6
BentocaseA bento-grid personal portfolio HTML template.- Bentos
BentosA bento-style creative portfolio HTML template. 
Adobe PortfolioBuild a portfolio website, included with Creative Cloud.- Coroflot
CoroflotDesign portfolios and job listings. - Cargo
CargoA site builder for designers and artists. 
UXfolioBuild a UX case study portfolio quickly.
Design tools 39
FigmaCollaborative interface design, prototyping and dev handoff.
PenpotOpen-source design and prototyping that speaks CSS.
FramerDesign and publish real websites from one canvas.
SketchThe native Mac app for interface design, with web handoff.
WebflowVisual web development with a CMS and hosting built in.
ExcalidrawA virtual whiteboard for sketching hand-drawn-looking diagrams.
tldrawA fast, friendly infinite canvas for drawing and diagramming.- Kittl
KittlGraphic design in the browser, strong on type effects and print.
Motion 9
RiveInteractive animations with state machines that run in any app.
JitterMotion design for UI, simple enough to use in an afternoon.
LottieFilesLightweight vector animations and the tools to make and ship them.
ProtoPieHigh-fidelity prototypes with sensors, variables and logic.
Origami StudioMeta’s free tool for designing interactive interfaces.
CavalryProcedural 2D animation for motion designers.
EasingsA cheat sheet of easing curves with their CSS and maths.
cubic-bezierLea Verou’s playground for drawing and comparing timing curves.
Accessibility 7
WebAIM Contrast CheckerCheck two colours against WCAG contrast ratios.
WAVEEvaluate a page for accessibility errors in place.
Who Can UseSee which kinds of vision can read a colour combination.
StarkAccessibility checks inside Figma, Sketch and the browser.
axe DevToolsAutomated accessibility testing in your browser’s dev tools.
The A11Y ProjectA community checklist and plain-language articles.
Inclusive ComponentsHeydon Pickering on building accessible interface components.
Learn 27
Laws of UXThe psychology behind interface design, one principle at a time.
Refactoring UIPractical design tactics for developers, as a book and videos.
Practical TypographyMatthew Butterick’s online book on typography for everyday writing.
Nielsen Norman GroupDecades of usability research written up as articles.
Smashing MagazineLong-form articles on front-end, UX and design since 2006.
Josh W. ComeauInteractive explainers on CSS, React and animation.
Every LayoutResilient layout primitives built with intrinsic CSS.
The Component GalleryHow real design systems build each component, side by side.
Directories 4
ToolfolioA big directory of tools for productivity, design, AI and startups.
Design ResourcesHand-reviewed design tools and resources sorted by category.
Toools.designAn archive of 2,400 hand-picked design tools and resources.
Design Resources for DevelopersFonts, colours, icons and UI kits for developers, by category.
Nothing in Design matches .
