resource-vault
My secret vault of Design & Frontend/UI resources!
These are the things I have in my bookmarks and use everyday. I hope you’ll find use for them aswell :)
Life-easier-makers
- Tailwind CSS - An absolute must know if you like creating more advanced UI/UX. It’s sort of a CSS library in a sense, but it’s also not. Just get into it, you’ll see.
- Some cool Tailwind component libraries:
- tailblocks - Pre-made layout components for tailwind
- DaisyUI - Neat, good looking library for tailwind. Doesn’t hold up with everything you want to do, but it’s pretty nice to work with overall.
- TailwindUI - Component library by the makers of Tailwind. ABsolutely beautiful, but costs a whopping $150.
- Flowbite - ALSO not free, but ALSO very good-looking
- Myna UI - Finally, something that looks good AND is free?
- Kutty - Also free, but not my personal favorite
- WickedBlocks - Neat free collection of tailwind “Blocks”
General
- PNGPixel - Convert Images to base64
- ColorsAndFonts - A collection of colors, fonts and more
- IconScout - Icons, Illustrations and stock photos in one place
- Apple Human Interface Guidelines - Don’t question it, it’s apple.
Javascript
- moveable - A library for movable/resizable etc. HTML Elements
- Code snippet how to let users paste from clipboard
- keycode.info - Quickly get keyboard input codes
- HTML DOM. - Super useful snippets to modify DOM elements with Vanilla JS
Frameworks that don’t suck
Templating engines for express.js
Layout
- csslayout - Pre-made CSS elements using flex
- CSS Flexbox generator - Great for grids and item streams
- CSS Grid generator - Great for layouts that uses some fixed values and some not - e.g. layout with sidebar & footer etc.
Icons
- Iconoir - Over 2000 Icons beautiful rounded Icons in 3 styles
- MyIcons - Probably my favorite Icons. 80$ for the whole 5200+ Icon Pack
- Iconify - Tiny, universal icon loader (You can also discover a lot of cool icons there)
- Iconly Essential - 500 (free) essential Icons
- Design Essentials 2 - over 400 great Icons for 16$
- Carbon Icons
- Remix Icons
- Ikonate
- Icons8 Animated Icons
- System UIcons
- Unicons Line
- Box Icons
- MaterialDesignIcons - A collection of Google’s Material icons plus hundreds of community-made ones
- MaterialDesignIcons Light
- IonIcons
- Tabler Icons
- Feather Icons
- Simple Icons
- Icons8
- Zwicon
- Simple Icons - All the brand logos
- Octicons
Illustrations
- 3d Fluency by Icons8 - Some beautifully designed, Windows 11-style illustrations
- Isometric love - Smooth isometric 3d objects
- Isometric.online - Modern isometric 3d illustrations
- Lottie - Animated Icons, Illustrations ans Micro-Interactions
- IRA Design - Customizable, generatied gradient illustrations
- ManyPixels - More CUstomizable Illustrations in various different styles
Color Themes
Gradients
- MeshGradients
- Grabients
- GradientMagic - Background patterns with css gradients
- WebGradients
- CSSGradient - CSS Gradient Generator
- UIGradient
SVG
- Yoksel URL-Encoder - Converts SVGs into In-line HTML SVGs
- SVGBackgrounds - Tiny customizable background patterns
- HeroIcons Patterns - SVG background patterns
- GetWaves - Customizable SVG Waves
- BlobMaker - The same tool, but for blob shapes.
- Haikei.app - A collection of tools to generate interesting and fun shapes and effects, including the two above
- SVGator - (kind of) free tool that helps you animate SVGs
- Keyframes - Same as above, but actually free
Images
- Dante Metaphor on BeHance - Creates futuristic, modern and metall-ish wallpapers and logos
- Pexels - Royalty Free high quality stock photos
- Unsplash - Free HD stock photos
- Icons8 Upscaler - AI-Powered image upscaler
- Transparenttextures - Great textures for use with background blending etc.
UI Kits
UI Sounds
- SoundsUIGood - Rings, clicks, chimes & more because why not spice it up a bit (7$)
Fonts
- Google Fonts
- Rostype - Custom font designers with a few small but nice freebies
- Stefano Giliberti - A talented font designer with some freebies
- FontFabric - Font designers with great free fonts and good paid offers
-
My personal favorite fonts
Header Fonts
Text Block Fonts
Serif Fonts (Goes best with Headings)
- Other great fonts
