Frontend & Design Resources

A curated collection of the best resources for frontend development and web design — including icons, UI libraries, animation tools, inspiration sites, and more.

---

How to Use

• Browse categories for resources you need.
• Each link is labeled for quick identification.
• Suggestions are included to expand your toolkit.

---

Table of Contents

• Logos
• Icons
• Typography
• Stock Assets & Design Resources
• Backgrounds & Patterns
• Screenshot & Mockups
• Screen Recording Tools
• UI Components & Libraries
• Animation Libraries
• CSS Tools & Generators
• JavaScript Utilities
• Code Playgrounds
• Design Systems
• Prototyping Tools
• Design Inspiration
• Color Palettes & Tools
• Showcase & Portfolio Platforms
• Bonus: Fun/Utility

---

Logos

• World Vector Logo — Free SVG vector logos of popular brands.
• Brandfetch — Instantly search and download official brand logos and assets.
• Seeklogo — Large collection of free vector logos in multiple formats.
• Logopond — Creative logo design inspiration and showcase.
• Freepik - Logos — Thousands of free and premium logo vectors.
• Simple Icons — SVG icons for popular brands.

---

Icons

• HugeIcons — Large icon collection
• UXWing — Free icons for web & design
• Font Awesome — Popular icon toolkit
• Iconify — Unified icon framework
• Feather Icons — Simple, clean open-source icons
• Lucide — Clean, consistent open-source icons
• Tabler Icons — Sharp, customizable SVG icon set

---

Typography

• Google Fonts — Free web fonts
• Adobe Fonts — Premium font library
• Fontjoy — AI-powered font pairing tool
• Type Scale — Typography scale generator

---

Stock Assets & Design Resources

• Unsplash — High-quality free photos
• Pexels — Free stock photos and videos
• Pixabay — Free images, vectors, and illustrations
• Freepik — Free and premium design resources
• Burst — Free stock photos by Shopify
• Freepik — Free and premium vectors, icons, logos, templates, and more for designers.

---

Backgrounds & Patterns

• PatternCraft — Beautiful backgrounds for your next big thing
• Hero Patterns — SVG background patterns
• SVG Backgrounds — Free customizable SVG backgrounds

---

Screenshot & Mockups

• PostSpark Screenshot — Generate device mockups from screenshots
• Shots.so — Create beautiful device mockups
• Mockup Photos — Free mockup images

---

Screen Recording Tools

• Cursorful — Chrome extension for screen recording
• Loom — Fast video messaging for work
• CleanShot — Advanced screen recording (Mac)

---

UI Components & Libraries

• Uiverse — Community-driven UI elements
• Aceternity UI — Modern React components
• Shadcn/UI — Customizable React components
• ReactBits — Useful React component snippets
• HeroUI — Beautiful React components
• MagicUI — Animated React components
• Chakra UI — Accessible React component library
• Headless UI — Completely unstyled, accessible UI primitives
• Park UI — Open-source React components
• DaisyUI — Tailwind CSS component library
• Float UI — Open-source Tailwind components
• Flowbite — Tailwind CSS components
• Atomix UI — Modern UI components
• Radix UI — Unstyled, accessible React components
• Material UI — Popular React UI framework
• NextBunny — High-quality React components built for Next.js
• Zennit — Copy-paste React + Tailwind components straight into your project, no installs, no hassle

---

Animation Libraries

JavaScript Animation

• GSAP — Robust JavaScript animation platform
• Motion One — Fast animation library
• Anime.js — Lightweight and flexible JavaScript animation library.
• Framer Motion — Production-ready React animation
• LottieFiles — Animate SVGs with JSON

CSS Animation

• Animate.css — Cross-browser CSS animations
• Hover.css — CSS hover effects
• AniJS — Declarative CSS animations

---

CSS Tools & Generators

• CSS Grid Generator — Visual CSS Grid builder
• Flexbox Froggy — Learn Flexbox with a game
• CSS Clip-Path Maker — Visual clip-path generator
• Box Shadow Generator — CSS box-shadow generator
• Gradient Generator — CSS gradient maker
• Neumorphism.io — Soft UI CSS generator

---

JavaScript Utilities

• Particles.js — Particle backgrounds
• Locomotive Scroll — Smooth scrolling library
• Lenis — Smooth scroll for modern web
• SwiperJS — Modern touch slider
• ScrollReveal — Animate elements on scroll
• Splide — Lightweight, flexible slider

---

Code Playgrounds

• CodePen — Frontend code playground
• CodeSandbox — Online code editor for web development
• StackBlitz — Instant dev environment
• JSFiddle — Test JavaScript, CSS, HTML online
• Replit — Collaborative online IDE

---

Design Systems

• Material Design — Google's design system
• Human Interface Guidelines — Apple's design principles
• Ant Design — Enterprise-class UI design language
• Atlassian Design System — Atlassian's design system
• Carbon Design System — IBM's design system

---

Prototyping Tools

• Figma — Collaborative design and prototyping
• Sketch — Digital design toolkit (Mac)
• Adobe XD — UI/UX design and prototyping
• InVision — Digital product design platform
• Principle — Animation and interaction design

---

Design Inspiration

• Supahero — UI inspiration
• BentoGrids — Bento grid layouts
• CTA Gallery — Call-to-action inspiration
• Landing Love — Landing page gallery
• SaaSpo — SaaS landing page inspiration
• Godly Website — Creative web design showcase
• Dark Design — Dark-themed design inspiration
• Navbar Gallery — Navigation UI inspiration
• 60FPS Design — High-performance UI inspiration
• Refero — Curated design references
• Land Book — Landing page inspiration
• Lapa Ninja — Landing page gallery
• 21st Dev Templates — Modern templates
• Landingfolio — Landing page inspiration
• Shadcnblocks — Shadcn UI blocks
• Mobbin — Mobile app design patterns
• Screenlane — UI inspiration
• Minimal Gallery — Minimalist web design
• Httpster — Inspirational websites
• Site Inspire — Web design showcase
• Awwwards — Award-winning web design
• Behance — Creative portfolio platform
• Dribbble — Design portfolio & inspiration
• The FWA — Cutting-edge digital work

---

Color Palettes & Tools

• Adobe Color — Color palette generator
• Coolors — Fast color palette generator
• Color Hunt — Curated color palettes
• Happy Hues — Curated palettes with live preview

---

Showcase & Portfolio Platforms

• Dribbble — Showcase your work
• Behance — Creative portfolios
• Awwwards — Web design awards

---

Bonus: Fun/Utility

• Readme Typing SVG — Animated typing SVG for README files

---

Contributions & suggestions are welcome!