A collection of design assets, interface libraries, and tools for web development. All links were checked for accessibility as of October 22, 2026.
Table of Contents
- UI Graphics
- Fonts
- Colors
- Icons
- Logos
- Favicons
- Icon Fonts
- Stock Photos
- Stock Videos
- Stock Music & Sound Effects
- Vectors & Clip Art
- Product & Image Mockups
- HTML & CSS Templates
- CSS Frameworks
- CSS Methodologies
- CSS Animations
- Javascript Animation Libraries
- Javascript Chart Libraries
- UI Components & Kits
- React UI Libraries
- Vue UI Libraries
- Angular UI Libraries
- Svelte UI Libraries
- React Native UI Libraries
- Design Systems & Style Guides
- Online Design Tools
- Downloadable Design Software
- Design Inspiration
- Image Compression
- Image Format Conversion
- Chrome Extensions
- Firefox Extensions
- AI Graphic Design Tools
- Others
UI Graphics
Illustrations, patterns, avatars, and graphics for user interfaces.
| Website | Description |
|---|---|
| SVG sine waves | Generate sine-wave shapes and export them as SVG. |
| UI Design Daily | Interface design examples and downloadable UI components. |
| 100 Daily UI | A Figma resource collection with interface elements and screens. |
| Sketch App Sources | Sketch files, UI kits, wireframes, and design assets. |
| Humaaans | Mix-and-match character illustrations for interface and editorial projects. |
| Paaatterns | Pattern collections for website backgrounds and visual designs. |
| Drawkit.io | Illustration collections for websites, applications, and presentations. |
| Absurd.design | Surreal hand-drawn illustrations for digital projects. |
| Undraw.co | Illustration collections for websites, applications, and presentations. |
| Manypixels.co | Illustration collections for websites, applications, and presentations. |
| Open Peeps | Hand-drawn character illustrations for creative projects. |
| Open Doodles | Hand-drawn character illustrations for creative projects. |
| Blush | Compose and customize illustrations from artist-created collections. |
| Hero Patterns | Pattern collections for website backgrounds and visual designs. |
| BEAUBUS Patterns | Pattern collections for website backgrounds and visual designs. |
| IRA Design | Customize illustration colors and combine vector elements. |
| Transparent Textures | Transparent texture patterns for layered backgrounds. |
| icons8.com/illustrations | Illustration packs in multiple styles for interface projects. |
| Patternico | Generate decorative patterns and backgrounds for web designs. |
| Pixeltrue Illustrations | Illustration collections for websites, applications, and presentations. |
| Abstract User Avatar API | Generate abstract avatars for users and demo profiles. |
| sketchvalley | Illustration collections for websites, applications, and presentations. |
| PatternPad | Generate decorative patterns and backgrounds for web designs. |
| Dimensions | Reference drawings and measurements for objects and spaces. |
| Freebiesbug | Download interface assets, templates, and design resources. |
| Cool Text | Generate stylized text graphics and logo lettering. |
| illustration kit | Illustration collections for websites, applications, and presentations. |
| Doodad Pattern Generator | Generate decorative patterns and backgrounds for web designs. |
| Pattern Monster | Generate decorative patterns and backgrounds for web designs. |
| Exemplar | An avatar library for use in interface mockups. |
| UIBundle | Download interface assets, templates, and design resources. |
| Design Stripe | Editable illustration assets for visual projects. |
| HOLA SVG! | SVG graphics and resources for web design. |
| symu.co | Download interface assets, templates, and design resources. |
| Mesh Gradient | Create mesh-gradient backgrounds with adjustable colors. |
| CSS Shadow Gradients | Generate shadow and gradient styles for interfaces. |
| Creatica | Generate decorative patterns and backgrounds for web designs. |
| Boring Avatars | Generate abstract avatars for users and demo profiles. |
| Html to Design | Import website layouts into Figma for editing. |
| fffuel | A collection of SVG generators for patterns, shapes, and backgrounds. |
| Mesher | Create mesh-gradient backgrounds with adjustable colors. |
| DiceBear | Generate customizable SVG avatars from repeatable text seeds. |
| SVG Backgrounds | Customize SVG backgrounds and decorative patterns for websites. |
Fonts
Font libraries and tools for choosing, pairing, and using typefaces.
| Website | Description |
|---|---|
| Google Fonts | Browse font families for web use and self-hosted typography. |
| DaFont | Browse and download fonts across a range of styles. |
| Use & Modify | A curated collection of open-source typefaces. |
| 1001 Free Fonts | Browse and download fonts across a range of styles. |
| Font Squirrel | Browse and download fonts across a range of styles. |
| Font Fabric | Typeface collections from independent type designers and foundries. |
| Just Free Fonts | Browse and download fonts across a range of styles. |
| Tiff | Compare the shapes and details of different typefaces. |
| TypeKit Practice | Typography resources, examples, and learning material. |
| Fontjoy | Explore font pairings for headings and body text. |
| Golden Ratio | Calculate typography sizes and spacing using proportional scales. |
| FontGet | Browse and download fonts across a range of styles. |
| FontPair | Explore font pairings for headings and body text. |
| Font Space | Browse and download fonts across a range of styles. |
| Abstract Fonts | Browse and download fonts across a range of styles. |
| Free Typography | Typography resources, examples, and learning material. |
| Leon Sans | A geometric typeface with programmable drawing and animation. |
| Lexend | A font family developed with reading readability in mind. |
| Fonts for Apple Platforms | Apple typography resources and platform font downloads. |
| SFWin | Resources for using San Francisco fonts on Windows. |
| Font Flipper | Explore font pairings for headings and body text. |
| Fonts Arena | Browse and download fonts across a range of styles. |
| Befonts | Browse and download fonts across a range of styles. |
| Arabic fonts | Arabic typefaces for digital typography projects. |
| FontDrop | Inspect font files and preview their glyphs and features. |
| Open Foundry | A curated collection of open-source typefaces. |
| Glyphter | Convert SVG graphics into a custom icon font. |
| Google Webfonts Helper | Download Google Fonts files and generate self-hosting CSS. |
| Rough Font Awesome | Hand-drawn rendering experiments for Font Awesome icons. |
| FFonts | Browse and download fonts across a range of styles. |
| Malayalam Fonts | Malayalam typefaces maintained by the SMC community. |
| Dev Fonts | Compare monospace fonts for code and development environments. |
| Font M | Browse and download fonts across a range of styles. |
| W Fonts | Browse and download fonts across a range of styles. |
| Modern fluid typography editor | Build responsive type scales with fluid CSS sizing. |
| UrbanFonts | Browse and download fonts across a range of styles. |
| Typespiration | Typography examples with suggested font and color combinations. |
| Fontsource | Self-host font families through installable packages. |
| FontBolt | Identify and generate lettering inspired by familiar visual styles. |
| Fontshare | Typeface collections from independent type designers and foundries. |
| Bunny Fonts | An alternative hosting service for open-source web fonts. |
| Monaspace | A monospace font family from GitHub Next for code and editors. |
Colors
Color palettes, gradients, color references, and contrast tools.
| Website | Description |
|---|---|
| Colorlab | Palette, gradient, color-scale, and contrast tools in one place. |
| Color Brewer 2 | Color schemes for maps and data visualization. |
| Huetone | Build color systems with accessibility and contrast checks. |
| Colormind.io | Generate color combinations with machine-learning assistance. |
| ColorCurves.app | Build color palettes by adjusting color curves. |
| ColorGradient | Create and preview CSS color gradients. |
| Coolors | Generate and adjust color palettes for design projects. |
| UI Colors | Generate color shades for Tailwind CSS palettes. |
| HTML Color Codes | Look up color codes, color values, and related color information. |
| Colors & Fonts | A collection of color and typography resources. |
| Google Material Color Tool | Material Design guidance for color roles and interface themes. |
| Material Palette | Browse ready-made palettes for interface design. |
| ColorSpace | Generate and adjust color palettes for design projects. |
| FlatUIColors | Browse ready-made palettes for interface design. |
| Adobe Color | Create palettes and extract color themes from images. |
| Colorsinspo | Browse shared color palettes and save color inspiration. |
| ColorsWall | Browse shared color palettes and save color inspiration. |
| Happyhues | Preview curated color palettes in example website layouts. |
| Adobe Trends | Explore color themes drawn from creative work and visual trends. |
| Color Hunt | Browse shared color palettes and save color inspiration. |
| Gradient Hunt | Browse gradient collections for backgrounds and UI elements. |
| Web Gradients | Browse gradient collections for backgrounds and UI elements. |
| ColorBox | Generate and adjust color palettes for design projects. |
| CSS gradient | Create and preview CSS color gradients. |
| gradienta | Browse gradient collections for backgrounds and UI elements. |
| UI Gradients | Create and preview CSS color gradients. |
| Palette Generator | Generate and adjust color palettes for design projects. |
| Material Palettes | Browse ready-made palettes for interface design. |
| Grabient | Create and preview CSS color gradients. |
| ShadeSwash | Generate lighter and darker shades of a base color. |
| BrandColors | Look up color palettes associated with popular brands. |
| BRAND PALETTES | Look up color palettes associated with popular brands. |
| Colorate | Generate and adjust color palettes for design projects. |
| 0to255 | Generate lighter and darker shades of a base color. |
| Color Blender | Calculate intermediate colors between two selected colors. |
| Gradient Buttons | Ready-to-use gradient button styles for web interfaces. |
| Khroma | Generate color combinations with machine-learning assistance. |
| whocanuse | Explore how color contrast affects different visual conditions. |
| Colorable | Test text and background color combinations for contrast. |
| Paletton | Generate and adjust color palettes for design projects. |
| Colorzilla | Create and preview CSS color gradients. |
| Image Color Picker | Pick colors and explore color relationships with online tools. |
| Color Lovers | Browse shared color palettes and save color inspiration. |
| HTML CSS Color | Look up color codes, color values, and related color information. |
| CoolHue 2.0 | Browse gradient collections for backgrounds and UI elements. |
| Colors.lol | Unusual color palettes with descriptive color names. |
| colors.dopely | Generate and adjust color palettes for design projects. |
| UIColor Picker | Copy color values from a collection of interface palettes. |
| Color Hex | Look up color codes, color values, and related color information. |
| FarbVelo | Generate and adjust color palettes for design projects. |
| Veranda Color | Browse shared color palettes and save color inspiration. |
| Duo | A curated collection of two-color combinations. |
| Lospec Palette List | Color palettes for pixel art and limited-color artwork. |
| Palettte App | Generate and adjust color palettes for design projects. |
| Eggradients | Browse gradient collections for backgrounds and UI elements. |
| Gradientos | Create and preview CSS color gradients. |
| Encycolorpedia | Look up color codes, color values, and related color information. |
| Croma | Color-picker and palette utilities for design work. |
| Color Designer | Generate color variations and gradients from a chosen color. |
| Duotone | Create two-color image treatments and preview duotone effects. |
| coolbackgrounds generator | Generate decorative backgrounds for websites and graphics. |
| Color Shades Generator | Generate lighter and darker shades of a base color. |
| Huemint | Generate color combinations with machine-learning assistance. |
| InclusiveColors palette creator | Build color systems with accessibility and contrast checks. |
| Realtime Colors | Preview a color palette directly in example website layouts. |
| Leonardo Color | Generate color scales based on target contrast ratios. |
Icons
Icon libraries and tools for SVG, PNG, and interface graphics.
| Website | Description |
|---|---|
| Circum Icons | An interface icon library with framework integrations. |
| UXWing | Download interface icons in common graphic formats. |
| Shapedfonts Iconclub | An icon collection with tools for browsing design assets. |
| Feather Icons | Customizable SVG interface icons with a consistent outline style. |
| Tabler Icons | SVG icons and framework packages for interface design. |
| Xicons | Vue and React wrappers for multiple SVG icon collections. |
| Iconoir | An open-source icon family for interface and product design. |
| Simple Icons | SVG icons representing brands, products, and services. |
| Linear Icons | Line-style icons for application and website interfaces. |
| Icons8 | Icons and visual assets with editing and export tools. |
| Flat Icon | Search and download icons from multiple styles and collections. |
| The Noun Project | Search and download icons from multiple styles and collections. |
| Iconscout | Search and download icons from multiple styles and collections. |
| IconSear.ch | Search and download icons from multiple styles and collections. |
| Nucleo App | An icon library with an application for organizing icon assets. |
| Icon-icons.com | Search and download icons from multiple styles and collections. |
| Bootstrap Icons | SVG icons designed to complement Bootstrap interfaces. |
| Remix Icon | A consistent icon system for common interface actions. |
| Iconmonstr | Browse downloadable icon sets for interface and graphic projects. |
| Vivid.js | SVG icons with options for changing colors and presentation. |
| Iconfinder | Search and download icons from multiple styles and collections. |
| Lordicon | Animated icons for interactive interfaces and visual feedback. |
| UseAnimations | Animated icons for interactive interfaces and visual feedback. |
| css.gg | Interface icons built with CSS and related export formats. |
| Material Design Icons | A community icon collection based on Material Design conventions. |
| Heroicons | SVG interface icons from the creators of Tailwind CSS. |
| Zondicons | Browse downloadable icon sets for interface and graphic projects. |
| Endless Icons | Browse downloadable icon sets for interface and graphic projects. |
| Icomoon | Select icons and generate custom SVG or icon-font packages. |
| Eva Icons | A consistent icon collection for application interfaces. |
| appicon | Generate application icon sizes for multiple platforms. |
| LineIcons | Line-style icons for application and website interfaces. |
| Evericons | Browse downloadable icon sets for interface and graphic projects. |
| SVG Repo | Search and download icons from multiple styles and collections. |
| Convertio | Convert image files between PNG, SVG, and other formats. |
| CSS ICON | Interface icons built with CSS and related export formats. |
| Unified icons | Browse icon collections through the Iconify ecosystem. |
| System UIcons | A minimalist icon collection for product interfaces. |
| IconPark | Customize icon themes and export SVG or framework components. |
| Radix Icons | A small-size icon set designed for interface controls. |
| Ionicons | An open-source icon family from the Ionic project. |
| Phosphor Icons | An icon family with multiple weights for interface design. |
| Teeny Icons | Compact SVG icons for small interface elements. |
| Lucide | Customizable SVG interface icons with a consistent outline style. |
| Icones | Browse icon collections through the Iconify ecosystem. |
| Shitty Icons | Browse downloadable icon sets for interface and graphic projects. |
| iconhub | Browse downloadable icon sets for interface and graphic projects. |
| 3DICONS | Three-dimensional icon assets for visual projects. |
| IconsDb | Find icons and customize their colors before downloading. |
| Emoji Guide | An emoji reference with character and HTML information. |
| Unicorn Icons | Animated icons for interactive interfaces and visual feedback. |
| Sargam Icons | An interface icon collection for design tools and web projects. |
| Icon buddy | Search and download icons from multiple styles and collections. |
| Round Icons | Browse downloadable icon sets for interface and graphic projects. |
| Vectopus | Browse downloadable icon sets for interface and graphic projects. |
| IconShelf | Search and download icons from multiple styles and collections. |
| Akar Icons | An SVG icon collection with a consistent interface style. |
| Pixelarticons | Pixel-style SVG icons for retro and game-inspired interfaces. |
Logos
Brand logos and tools for creating or finding logo assets.
| Website | Description |
|---|---|
| LogoSear.ch | Search and download brand logos in vector formats. |
| SVGPorn | Search and download brand logos in vector formats. |
| Payment System Logos | Logo assets for payment services and payment methods. |
| Browser Logos | Logo assets for web browsers and browser projects. |
| VectorLogoZone | Search and download brand logos in vector formats. |
| World Vector Logo | Search and download brand logos in vector formats. |
| Logo Maker | Create a logo with browser-based design tools. |
| Free Logo Maker | Create a logo with browser-based design tools. |
| LOGOwine | Search and download brand logos in vector formats. |
| SVGL | Browse SVG brand logos for technology and product interfaces. |
| Logoipsum | Fictional logo assets for prototypes and demonstration pages. |
Favicons
Tools for creating and managing website icons.
| Website | Description |
|---|---|
| Favicon.io | Create favicon files from uploaded images or custom designs. |
| Favicomatic | Create favicon files from uploaded images or custom designs. |
| Favicon Generator | Create favicon files from uploaded images or custom designs. |
| RealFaviconGenerator | Generate and check favicon assets for browsers and devices. |
| FontIcon | Create a website icon from an icon glyph or symbol. |
| Favicon.cc | Create favicon files from uploaded images or custom designs. |
| Maskable.app Editor | Preview and edit maskable application icons. |
| Favicon Generator | Create favicon files from uploaded images or custom designs. |
| Favicon.im | Retrieve website favicons from domain names. |
| RedKetchup Favicon Generator | Convert images into favicon files with configurable sizes. |
Icon Fonts
Resources for icon fonts.
| Website | Description |
|---|---|
| Font Awesome | An icon library and toolkit for websites and applications. |
| Line Awesome | Line-style icons compatible with Font Awesome naming conventions. |
| Material Icons | Google's Material icon and symbol collections. |
| IonIcons | An open-source icon family from the Ionic project. |
| Zurb Foundation Icons | An icon-font collection for Foundation-based interfaces. |
| Boxicons | An interface icon collection available in SVG and font formats. |
| Icofont | Download icons as individual graphics or an icon font. |
| Material Design Iconic Font | Material-inspired icons delivered as a web font. |
| Vscode Codicons | The icon font used by Visual Studio Code. |
| Devicon | Icons for programming languages, development tools, and platforms. |
| PaymentFont | A web font containing payment-method and payment-service icons. |
| Weather Icons | Weather symbols packaged as an icon font. |
| Jam Icons | A collection of line and filled interface icons. |
| Fontello | Build a custom icon font from selected glyphs. |
| Linea | Line-style icon collections and interface design resources. |
| Unicons | Line icons available as fonts, SVG files, and framework components. |
| Mobirise Icons | Line icons available as SVG graphics and an icon font. |
| Hero Icons | SVG interface icons from the creators of Tailwind CSS. |
| React Icons | Use icons from multiple collections as React components. |
| MingCute | An interface icon collection available in SVG and web-font formats. |
| Phosphor Web | Web-font packages for Phosphor icons in multiple weights. |
Stock Photos
Photography and image libraries for websites and creative projects.
| Website | Description |
|---|---|
| Pexels | A photo and video library for websites and creative projects. |
| Unsplash | Photography collections for editorial and visual projects. |
| Pixabay | Images, videos, music, and sound effects for creative work. |
| Magdeleine | Browse stock photographs for web pages and visual projects. |
| Burst | Browse stock photographs for web pages and visual projects. |
| Gratisography | Unconventional stock photographs with playful visual subjects. |
| Life of Pix | Photography collections from a community of contributors. |
| Stock Snap | Browse stock photographs for web pages and visual projects. |
| Morguefile | Browse stock photographs for web pages and visual projects. |
| Kaboom Pics | Browse stock photographs for web pages and visual projects. |
| New Old Stock | Vintage photographs from public archives. |
| Pic Jumbo | Browse stock photographs for web pages and visual projects. |
| Public Domain Pictures | Browse stock photographs for web pages and visual projects. |
| Find A Photo | Browse stock photographs for web pages and visual projects. |
| Stockvault | Browse stock photographs for web pages and visual projects. |
| Placeholder | Generate placeholder images for layout development. |
| Realistic Shots | Browse stock photographs for web pages and visual projects. |
| Negative Space | Browse stock photographs for web pages and visual projects. |
| SkitterPhoto | Browse stock photographs for web pages and visual projects. |
| PicoGraphy | Browse stock photographs for web pages and visual projects. |
| PxHere | Browse stock photographs for web pages and visual projects. |
| Piqsels | Browse stock photographs for web pages and visual projects. |
| FoodiesFeed | Food photography for recipes, articles, and food-related designs. |
| Nappy | Stock photography featuring Black and Brown people. |
| Generated Photos | AI-generated people and portrait imagery. |
| Lorem Picsum | Random photography placeholders with configurable dimensions. |
| Integration & Application Network Image Library | Scientific photographs and symbols for environmental communication. |
| Source：https://dev.to/ethan_carter/1200-free-resources-for-web-development-2026-4pmi PreviousCSS Custom Highlight API: style text without spansNextGenerate realistic test data files in one command (CSV, JSON, NDJSON) Related posts Trailing slashes in a static Astro site on Vercel: five layers and a check that never failed0dev.to  Try four admin templates before you install one0dev.to  I scanned the GitHub Actions setup of 139 popular JS/TS repos. Only 1 passed 3 basic checks.0dev.to GitHub  Power BI for Beginners: 5 Essential Concepts You Should Know0dev.to Data  Per-Author Comment Macros for Co-Authors in LaTeX0dev.to Productivity  How Singers Use iPhone Notes to Track Vocal Development and Performance Insights0dev.to Productivity |