访问官网
Github
Huggingface
文档
论文
Please read contributing guidelines before submitting new resources.
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
- Chrome Extensions
- Firefox Extensions
- AI Graphic Design Tools
- Others
UI Graphics
Websites and resources with modern UI components in different formats such as PSD, Sketch, Figma, etc. They are great for ideas for web components/UI
| Website | Description |
|---|---|
| SVG sine waves | Export perfect sine waves as SVG for your front-end projects |
| UI Design Daily | Awesome UI Components of all types |
| 100 Daily UI | Free Figma library of products, elements, and screens |
| Sketch App Sources | Sketch UIs, wireframes, icons and much more |
| Humaaans | Cool illustrations of people with the ability to mix and match |
| Paaatterns | Free collection of beautiful patterns for all vector formats |
| 404 illustration | Free illustrations for 404 pages |
| Drawkit.io | Illustrations for designers and startups |
| Absurd.design | Free surrealist illustrations for designers and developers |
| Undraw.co | Open-source illustrations for any idea you can imagine and create |
| Manypixels.co | Monochromatic, Isometric high-quality illustrations |
| Open Peeps | Hand drawn illustration library |
| Animations.co | Beautiful, customizable animated GIF icons |
| InvisionApp | Library of free, high-quality UI kits, icon packs, and mockups |
| Open Doodles | A Free Set of Sketchy Illustrations |
| Avataaars | Free sketch library of avatars illustrations by Pablo Stanley |
| Blush | Free customizable illustrations with Figma Plugin |
| Hero Patterns | A collection of repeatable SVG background patterns |
| BEAUBUS Patterns | A set of 150+ free SVG patterns (backgrounds) |
| IsoFlat | A Free collection of Isometric SVG graphic resources |
| IRA Design | An open-source gradient illustrations collection by creative tim. |
| Transparent Textures | A collection of transparent textures background patterns. |
| icons8.com/illustrations | Vector illustrations to class up your project |
| Patternico | Seamless Pattern Maker |
| Freellustrations | Free Background Images for awesome landing Pages |
| Pixeltrue Illustrations | Free Animated Illustrations |
| Abstract User Avatar API | API to create simple yet flexible user avatars from user names or emails |
| sketchvalley | Download free PNG, SVG or AI file . |
| PatternPad | Free and unlimited unique pattern designs. |
| Dimensions | Dimensions.com is an ongoing reference database of dimensioned drawings documenting the standard measurements and sizes of the everyday objects and spaces |
| Freebiesbug | Hand-picked resources for web designers and developers, constantly updated. |
| Flexiple | One new high-quality, open-source illustration each day. |
| Cool Text | Cool Text is a FREE graphics generator for web pages and anywhere else you need an impressive logo without a lot of design work |
| illustration kit | Premium open source illustrations added daily |
| Doodad Pattern Generator | Create unique, seamless, royalty-free patterns. |
| Pattern Monster | A simple online pattern generator to create repeatable SVG patterns |
| Exemplar | Free Avatar Library for Figma and Sketch |
| UIBundle | Thousands of Free Design Resources like UI Kits, Mockups, Illustrations, Icons, Fonts, 3D assets, Templates and more. |
| openby.design | Custom crafted free UI design resources, for personal and commercial projects. No attribution is required. |
| Design Stripe | Create beautiful illustrations, no design skills needed. |
| HOLA SVG! | An SVG playground to share SVG stuff. |
| symu.co | Free templates, UI kits, icon, PSD |
| Mesh Gradient | Generate & download beautiful mesh gradients. |
| CSS Shadow Gradients | Generate CSS Gradients For Shadows. |
| Creatica | Generate unique beautiful and unique Backgrounds and patterns. |
| Boring Avatars | SVG random, cutely avatars collections |
| Html to Design | Convert any website into fully editable Figma designs |
| fffuel | collection of color tools and free SVG generators for gradients, patterns, textures, shapes & backgrounds |
Fonts
Websites that offer free fonts as well as font-based tools
| Website | Description |
|---|---|
| Google Fonts | Library of around 1000 free licensed font families |
| DaFont | Archive of freely downloadable fonts |
| Use & Modify | Personal selection of beautiful, classy, punk, professional, incomplete, weird typefaces |
| 1001 Free Fonts | I think the name speaks for itself :smirk: |
| Font Squirrel | Font Squirrel scours the internet for high quality, legitimately free fonts |
| Font Fabric | A digital type foundry crafting retail fonts and custom typography for various brands |
| Tiff | A type diff tool that visually contrasts the differences between two fonts |
| TypeKit Practice | Learn about typography practices |
| Fontjoy | Generate font pairing in one click |
| Golden Ratio | Golden Ratio Typography Calculator |
| FontGet | Has a variety of fonts available to download and sorted neatly with tags |
| FontPair | Helps you pair Google Fonts together |
| Font Space | A designer-centered free font website that has quick customizable previews |
| Abstract Fonts | Fonts free for personal and commercial use |
| Free Typography | A list of high quality fonts |
| Leon Sans | A geometric sans-serif typeface made with code |
| Lexend | A variable font empirically shown to significantly improve reading-proficiency |
| Fonts for Apple Platforms | Get the details, frameworks, and tools you need to use system fonts for Apple platforms in your apps |
| SFWin | San Francisco Fonts for Windows 10 and non-Apple Platform |
| Font Flipper | Preview 800+ Google Fonts on top of your own designs, without having to download the fonts |
| Fonts Arena | Free curated fonts |
| Befonts | High quality fonts for free |
| Arabic fonts | Arabic fonts for free |
| FontDrop | Simple and easy way to view the contents of font files |
| Open Foundry | FREE platform for curated open-source typefaces |
| Glyphter | Upload your own SVGS and turn them into font files. Useful if you want a smaller library loaded |
| Google Webfonts Helper | A Hassle-Free Way to Self-Host Google Fonts |
| Rough Font Awesome | When RoughJS meets Font Awesome |
| FFonts | Stylish fonts for free |
| Malayalam Fonts | Malayalam fonts for free which are maintained by Swathanthra Malayalam Computing(SMC) |
| Dev Fonts | Find and use the coding fonts for free |
| Font M | Free font you can download for material coding and design |
| W Fonts | Download Free fonts |
| Modern fluid typography editor | Fluid typography is a modern way of approaching responsive typography. |
| UrbanFonts | A collection of over 8000 free fonts and dingbats |
| Typespiration | Inspirational font combinations and color palettes |
| Fontsource | Self-host Open Source fonts in neatly bundled NPM packages. |
| FontBolt | Discover and generate your favorite fonts from pop culture. |
| Fontshare | Fontshare is a free fonts service from the Indian Type Foundry (ITF), making quality fonts accessible to all. |
Colors
Websites and resources that help with choices related to colors
| Website | Description |
|---|---|
| Colorlab | Create color palette, gradients, color scales, check contrast all in one place. |
| Color Brewer 2 | The original color palette generator, also supporting color blindness. Probably the scientifically best option. Also probably not the prettiest. |
| Huetone | A tool to create accessible color systems. |
| Colormind.io | Color palette generator |
| ColorCurves.app | Color palette generator that uses curves to generate color palettes |
| ColorGradient | A free tool to create simple and complex CSS Gradients visually |
| Coolors | Create the perfect palette or get inspired by thousands of beautiful color schemes |
| UI Colors | Tailwind CSS color palette generator |
| HTML Color Codes | Get HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names |
| Colors & Fonts | A curated library of colors, fonts and resources |
| Palette List | Pick 2 colors you like and the tool generates thousands of palettes for you. |
| Google Material Color Tool | Official Google Material Color Palette Tool |
| Material Palette | Free to pick palettes, icons and colors for Material Design |
| ColorSpace | Generate nice color palettes from one color |
| FlatUIColors | Beautiful set of color palettes in various flavors |
| Adobe Color | Create color palettes, extract gradients from images, etc. |
| Colorsinspo | All-in-one resource for finding everything about colors |
| ColorsWall | Place to store your color palettes and generate palette in one click |
| Happyhues | Happy Hues is a color palette inspiration site that acts as a real-world example as to how the colors could be used in your design projects by Mackenzie Child |
| Adobe Trends | Discover current color trends in different industries from the creative communities on Behance and Adobe Stock |
| Color Hunt | A free and open platform for color inspiration with thousands of trendy hand-picked color palettes |
| Gradient Hunt | A free and open platform for gradient inspiration with thousands of trendy hand-picked color gradients |
| Web Gradients | A free website to find good CSS gradients |
| ColorBox | A free website to produce color set |
| CSS gradient | A free website to make custom gradient and some examples of gradient |
| gradienta | A pure css and jpg gradients |
| UI Gradients | UI gradients color generator |
| Palette Generator | Generate new color palette with every spacebar press |
| Material Palettes | 1000+ Material Design palettes |
| Grabient | Gradient Selector |
| ShadeSwash | Quickly generate shades of any color |
| BrandColors | The biggest collection of official brand color codes |
| BRAND PALETTES | Logo Color Codes and Palettes |
| Material Design Palette Generator | Generate theme and color palette Material Design-like |
| Colorate | Color scheme tool for designers and developers. This will help you draw inspiration and serve as a resource for your color work. |
| 0to255 | A color tool that makes it easy to lighten and darken colors. It’s perfect for hover states, borders, gradients, and more. |
| [Color |
