Design
Fonts, colour, icons, mockups, UI kits and the galleries worth learning from.
- 432 tools
- 17 topics
- 268 free
All Design
432 tools
Fonts 40
Google FontsFontsFreeOpen-source families you can self-host or load from Google.
FontshareFontsFreeQuality typefaces from Indian Type Foundry, free for commercial use.
UncutFontsFreeA catalogue of contemporary free and open-source display faces.
Pangram PangramFontsFreemiumIndependent foundry; every family has a free trial for personal use.
Klim Type FoundryFontsPaidKris Sowersby’s foundry, with essays on how each family was drawn.
TypewolfFontsFreeType in the wild: what fonts real sites use and what to pair them with.
Fonts In UseFontsFreeAn archive of typography in print and on screen, indexed by face.
TypescaleFontsFreePick a ratio and base size; get a modular scale and its CSS.
Colour 29
Realtime ColorsColourFreeTry a palette and type pairing on a real page layout as you edit.
coolors.coCoolorsColourFreemiumPress space to generate palettes, lock the colours you like.
HuemintColourFreeMachine-learned palettes previewed on brands, sites and gradients.
Adobe ColorColourFreeColour wheel harmonies, extraction from images and contrast checks.
Radix ColorsColourFreeTwelve-step scales for UI, each with a matching dark mode.
LeonardoColourFreeAdobe’s tool for generating colour scales by target contrast ratio.
tints.devTints.devColourFreeBuild an 11-shade Tailwind scale from one hex value.
Happy HuesColourFreePalettes shown applied to a full page, so you see the roles.
Gradients 12
WebGradientsGradientsFree180 free CSS gradient backgrounds to copy.
cssgradient.ioCSS GradientGradientsFreeA free CSS gradient generator.
uiGradientsGradientsFreeA handpicked collection of beautiful gradients.
CSS Gears GradientsGradientsFreeGradient cards for Sketch, XD and CSS.
ColorZilla Gradient EditorGradientsFreeA Photoshop-like CSS gradient editor.
Gradient HuntGradientsFreeThousands of trendy gradients, updated daily.
Gradient ButtonsGradientsFreeHundreds of CSS gradient buttons to copy.
UI Gradients StylesGradientsPaid380 fine-tuned gradients for Sketch and Figma.
Icons 40
Phosphor IconsIconsFreeA flexible family in six weights, from thin to duotone.
LucideIconsFreeCommunity fork of Feather with over a thousand consistent icons.
HeroiconsIconsFreeHand-drawn SVG icons from the makers of Tailwind CSS.
Tabler IconsIconsFreeThousands of outline icons on a 24px grid with adjustable stroke.
IconoirIconsFreeAn open-source library with a slightly rounded, friendly line.
Remix IconIconsFreeNeutral system icons, each in line and fill styles.
StreamlineIconsFreemiumA huge set of icons, illustrations and emoji in many styles.
The Noun ProjectIconsFreemiumMillions of icons from designers around the world, credit or license.
Illustrations 16
unDrawIllustrationsFreeOpen illustrations you can recolour to your brand before download.
Open PeepsIllustrationsFreeA hand-drawn library of mix-and-match people by Pablo Stanley.
HumaaansIllustrationsFreeMix-and-match illustrations of people, with poses and outfits.
blush.designBlushIllustrationsFreemiumCustomisable illustration collections from artists worldwide.
StorysetIllustrationsFreeEditable and animatable illustrations from the Freepik team.
3diconsIllustrationsFreeOpen-source 3D icons in clay, colour and gradient renders.
DrawKitIllustrationsFreemiumIllustration packs, 3D sets and icons for product sites.
icons8.comVector CreatorIllustrationsFreemiumMake illustrations in the browser from ready-made parts.
Patterns & backgrounds 21
toptal.comSubtle PatternsPatterns & backgroundsFreeFree subtle textures for website backgrounds.
TabbiedPatterns & backgroundsFreeGenerate colourful geometric patterns as artwork.
Plain PatternPatterns & backgroundsFreeAn SVG-based seamless pattern maker.
GeoPatternPatterns & backgroundsFreeGenerate geometric SVG patterns from any text.
ModulargridPatterns & backgroundsFreeDesign modular grids for layouts.
PlaidMakerPatterns & backgroundsFreeMake plaid patterns online.
Tartan MakerPatterns & backgroundsFreeGenerate seamless tartan patterns.
stripegenerator.comStripe GeneratorPatterns & backgroundsFreeGenerate seamless diagonal stripe backgrounds.
Stock photos 19
unsplash.comUnsplashStock photosFreemiumFree high-resolution photographs from a large community.
pexels.comPexelsStock photosFreeFree stock photos and video clips, no attribution needed.
openverse.orgOpenverseStock photosFreeSearch hundreds of millions of openly licensed images and sounds.
LummiStock photosFreemiumAI-generated stock photos you can search, edit and use freely.
Death to StockStock photosPaidMonthly packs of photos that don’t look like stock photos.
pixabay.comPixabayStock photosFreeFree images and videos for commercial use.
Shopify Stock PhotosStock photosFreeFree high-res photos for websites and commerce, formerly Burst.
bigstockphoto.comBigstockStock photosPaidAffordable stock photos, vectors and footage.
Mockups & resources 77
ShotsMockups & resourcesFreemiumDrop in a screenshot and get a styled device mockup in seconds.
Mockuuups StudioMockups & resourcesFreemiumThousands of drag-and-drop device and scene mockups.
RotatoMockups & resourcesPaidAnimated 3D device mockups rendered on your Mac.
mockupworld.coMockup WorldMockups & resourcesFreeFree photorealistic mockups for Photoshop, collected since 2013.
previewed.appPreviewedMockups & resourcesFreemiumDevice mockups and animated scenes made in the browser.
Meta DevicesMockups & resourcesFreeAccurate device frames for phones, tablets, laptops and watches.
ls.graphicsMockups & resourcesFreemiumPhotographic mockups and 3D scenes for print and screen.
Figma ResourceMockups & resourcesFreeFree Figma UI kits, mockups and more.
UI kits & design systems 24
shadcn/uiUI kits & design systemsFreeComponents you copy into your project and own, built on Radix.
Radix PrimitivesUI kits & design systemsFreeUnstyled, accessible React primitives for building design systems.
Headless UIUI kits & design systemsFreeUnstyled, accessible components for React and Vue.
Untitled UIUI kits & design systemsFreemiumA large Figma UI kit and design system with React components.
Tailwind PlusUI kits & design systemsPaidOfficial Tailwind components, templates and UI blocks.
Magic UIUI kits & design systemsFreemiumAnimated React components for landing pages, shadcn-compatible.
Aceternity UIUI kits & design systemsFreemiumMotion-heavy React and Tailwind components to copy and paste.
Material Design 3UI kits & design systemsFreeGoogle’s design system: guidance, components and tokens.
Logos & branding 10
LogosystemLogos & brandingFree1,600+ logos, wordmarks and animated marks to browse by colour and style.
RebrandLogos & brandingFreeA curated gallery of rebrands with their logos, colours and type.
The Brand IdentityLogos & brandingFreeThe best brand and graphic design, with case studies and interviews.
BRANDBRIEFLogos & brandingFreemiumRealistic design briefs and weekly challenges for brand designers.
LogoipsumLogos & brandingFreeFree placeholder logos in SVG for mockups.
Untitled UI LogosLogos & brandingFree180+ fictional placeholder logos for UI design.
uilogosLogos & brandingFreePlaceholder logos plus a plugin to drop them into designs.
Branding Style GuidesLogos & brandingFreeAn archive of brand guideline documents.
Inspiration 38
MobbinInspirationFreemiumScreens and flows from hundreds of real iOS, Android and web apps.
GodlyInspirationFreeAstronomically good web design, shown as live video captures.
ReferoInspirationFreemiumSearchable references from real products, tagged by pattern.
land-book.comLand-bookInspirationFreemiumA gallery of landing pages sorted by type, style and colour.
SiteinspireInspirationFreeA long-running showcase of web design, filterable by style.
One Page LoveInspirationFreeOne-page websites, templates and resources since 2008.
AwwwardsInspirationFreeDaily awards for web design, with jury scores and case studies.
Minimal GalleryInspirationFreeHand-picked minimal and functional websites.
Portfolios 6
BentocasePortfoliosPaidA bento-grid personal portfolio HTML template.
hridoywebdev.comBentosPortfoliosPaidA bento-style creative portfolio HTML template.
Adobe PortfolioPortfoliosPaidBuild a portfolio website, included with Creative Cloud.
coroflot.comCoroflotPortfoliosFreeDesign portfolios and job listings.
cargo.siteCargoPortfoliosFreemiumA site builder for designers and artists.
UXfolioPortfoliosFreemiumBuild a UX case study portfolio quickly.
Design tools 53
FigmaDesign toolsFreemiumCollaborative interface design, prototyping and dev handoff.
PenpotDesign toolsFreeOpen-source design and prototyping that speaks CSS.
FramerDesign toolsFreemiumDesign and publish real websites from one canvas.
SketchDesign toolsPaidThe native Mac app for interface design, with web handoff.
WebflowDesign toolsFreemiumVisual web development with a CMS and hosting built in.
ExcalidrawDesign toolsFreeA virtual whiteboard for sketching hand-drawn-looking diagrams.
tldrawDesign toolsFreeA fast, friendly infinite canvas for drawing and diagramming.
kittl.comKittlDesign toolsFreemiumGraphic design in the browser, strong on type effects and print.
Motion 9
RiveMotionFreemiumInteractive animations with state machines that run in any app.
JitterMotionFreemiumMotion design for UI, simple enough to use in an afternoon.
LottieFilesMotionFreemiumLightweight vector animations and the tools to make and ship them.
ProtoPieMotionFreemiumHigh-fidelity prototypes with sensors, variables and logic.
Origami StudioMotionFreeMeta’s free tool for designing interactive interfaces.
CavalryMotionFreemiumProcedural 2D animation for motion designers.
EasingsMotionFreeA cheat sheet of easing curves with their CSS and maths.
cubic-bezierMotionFreeLea Verou’s playground for drawing and comparing timing curves.
Accessibility 7
WebAIM Contrast CheckerAccessibilityFreeCheck two colours against WCAG contrast ratios.
WAVEAccessibilityFreeEvaluate a page for accessibility errors in place.
Who Can UseAccessibilityFreeSee which kinds of vision can read a colour combination.
StarkAccessibilityFreemiumAccessibility checks inside Figma, Sketch and the browser.
axe DevToolsAccessibilityFreemiumAutomated accessibility testing in your browser’s dev tools.
The A11Y ProjectAccessibilityFreeA community checklist and plain-language articles.
Inclusive ComponentsAccessibilityFreeHeydon Pickering on building accessible interface components.
Learn 27
Laws of UXLearnFreeThe psychology behind interface design, one principle at a time.
Refactoring UILearnPaidPractical design tactics for developers, as a book and videos.
Practical TypographyLearnFreeMatthew Butterick’s online book on typography for everyday writing.
Nielsen Norman GroupLearnFreeDecades of usability research written up as articles.
Smashing MagazineLearnFreeLong-form articles on front-end, UX and design since 2006.
Josh W. ComeauLearnFreeInteractive explainers on CSS, React and animation.
Every LayoutLearnPaidResilient layout primitives built with intrinsic CSS.
The Component GalleryLearnFreeHow real design systems build each component, side by side.
Directories 4
ToolfolioDirectoriesFreeA big directory of tools for productivity, design, AI and startups.
Design ResourcesDirectoriesFreeHand-reviewed design tools and resources sorted by category.
Toools.designDirectoriesFreeAn archive of 2,400 hand-picked design tools and resources.
Design Resources for DevelopersDirectoriesFreeFonts, colours, icons and UI kits for developers, by category.
Nothing here matches .