Winning Design Resources

Solutions to Common UI Challenges

A fast, evergreen collection of design resources to ship polished UI without reinventing the wheel.

🎉 All free or open source.

Last updated: 2025-09-11

Contents

1. Website Templates
2. Image Design & Editing
3. Fonts
4. Color Palettes
5. Animations
6. Photos
7. Illustrations and Icons
8. Website Hosting
9. Other Resources
10. Licensing & Usage Tips
11. Quick Picks

Website Templates

• https://html5up.net — Beautiful, responsive HTML templates.
• https://www.creative-tim.com/templates/react-free — Free React and UI kits.
• https://csslayout.io/patterns — Copy-paste layout patterns.
• Landing & Splash Pages — Curated landing page templates. (added 2021)

Image Design & Editing

Web-based creation and editing tools.

• Photopea — Photoshop-like editor in the browser.
• Penpot — Open‑source design & prototyping.
• Gravit Designer — Now Corel Vector (free tier).
• Boxy SVG — Vector editor (Chromium/WebKit).
• VectorInk — Vector drawing in the browser.
• SVGOMG — SVG Compressor — Optimize and clean SVGs.
• Best Snip SVG Animator — Simple web SVG animation tool.

Fonts

• Fontsource — Self-host open-source fonts with npm-style packages.
• https://fonts.google.com/ — The classic catalog.
• http://thestocks.im/ — Aggregates fonts, icons, photos, and more.
• https://fontpair.co/fonts/ — Font pairing inspiration.

Color Palettes

• https://color.adobe.com/create/color-wheel/ — Classic color wheel and harmony tools.
• https://colorhunt.co/ — Curated palettes.
• https://coolors.co/ — Generate, lock, and adjust palettes. (Correct spelling: Coolors)
• https://paletton.com/ — Scheme generator with previews.
• Contrast & accessibility:
  • https://webaim.org/resources/contrastchecker/ — WCAG contrast checker.
  • https://contrast-ratio.com/ — Quick contrast ratio tool.

Animations

• https://ianlunn.github.io/Hover/ — Micro-interaction hover effects.
• https://animate.style/ — Animate.css (modern site).
• https://animejs.com/ — Powerful JS animation engine.
• https://www.minimamente.com/project/magic/ — magic.css preset animations.
• https://bouncejs.com/ — Springy keyframes (archived; see GitHub if site is down).
• https://greensock.com/gsap — GSAP, the industry workhorse.
• https://github.com/jonsuh/hamburgers — Accessible hamburger menu animations.

Photos

• https://unsplash.com/ — High-quality, permissive license.
• https://www.pexels.com/ — Free stock photos and videos.
• http://thestocks.im/ — One-stop aggregator across stock sites.
• https://www.flickr.com/photos/wocintechchat/ — Authentic tech workplace photos.

Illustrations and Icons

• https://simpleicons.org/ — 3,000+ brand icons. (2024)
• https://iconoir.com — 1,000+ free SVG icons. (2022)
• https://thenounproject.com — Massive icon and photo library. (2023)
• https://www.svgrepo.com/ — Millions of community SVGs. (2021)
• https://lucide.dev/ — Open-source icons (successor to Feather).
• https://phosphoricons.com/ — Flexible icon family for web and apps.
• https://icomoon.io/app/#/select — Build custom icon sets; export SVG/PNG. (2021, 2023)
• https://react-kawaii.vercel.app/#/Components — Cute SVG components.
• https://isometric.online/ — Isometric assets. (added 2021)
• https://icons8.com/illustrations — Free illustration packs. (added 2021)
• https://www.manypixels.co/gallery/ — Weekly fresh illustrations. (added 2021)
• https://www.drawkit.io/free — Free, high-quality packs. (added 2021)
• https://illlustrations.co/ — Hand-drawn style. (added 2021)
• https://generator.opendoodles.com/ — Fun, generative doodles. (added 2020)
• https://www.humaaans.com/ — Mix-and-match people. (added 2020)
• https://fontawesome.com/v6/search?o=r&m=free — Font Awesome free icon search.

Website Hosting

• https://vercel.com/ — Serverless hosting and edge, formerly ZEIT Now.
• https://www.netlify.com/ — Jamstack-friendly, great DX.
• https://pages.github.com/ — Free static site hosting.
• https://render.com/ — Apps, web services, cron jobs.
• https://surge.sh/ — Simple static hosting via CLI.

Other Resources

• UX Design Glossary — Thanks Harper!
• http://codingheroes.io/resources/
• https://pixlr.com/x/ — Online image editor.
• https://bennettfeely.com/clippy/ — CSS clip-path builder.
• Shadow Designer (CSS) — Generate layered shadows.

Licensing & Usage Tips

• Don’t assume “free” equals “no attribution.” Check per-asset licenses.
• Avoid brand marks in generic UI unless you have permission; trademarks still apply.
• For icons/illustrations, export SVG and set fill via CSS to support dark mode.
• Always test color contrast (WCAG AA minimum, AAA for small text if possible).
• Prefer vector (SVG) over raster wherever possible for scalability and performance.

Quick Picks

• Colors: Coolors + WebAIM Contrast Checker.
• Icons: Lucide or Iconoir.
• Illustrations: Undraw or ManyPixels.
• Hosting: Netlify or Vercel.

Changelog: 2025-09 — Updated links (Animate.css, Vercel), added Penpot, Lucide, Phosphor, contrast tools, and usage tips.