30+ Icons Resources for Developers, Product Managers, and Founders

Have you ever used a product and thought “wow, this is amazing!”? There’s nothing like the ICONS that make products stand out and users recognize. The icons are everywhere making it easy to scan and filter content for related information. It’s the perfect way to stand out in their subconscious mind before they even do a search.

So, here is the list of websites to ease your search for icons & tools for your next product.

• css.gg

  700+ Open-source CSS, SVG and Figma UI Icons Available in SVG Sprite, styled-components, NPM & API

  License: MIT, Free for commercial or personal use.

• Heroicons

  Free, open-source icons from the creators of Tailwind CSS.

  License: MIT, Free for commercial or personal use.

• UXWing

  Well Optimized Vector, Free SVG Icons, and PNG Icons Download for Creative Projects.

  License: All icons are free to use any personal and commercial projects without any attribution or credit

• Iconclub

  8000+ free icons

  License: Free for commercial or personal use.

• Tabler Icons

  1280 Fully customizable free SVG icons.

  License: MIT, Free for commercial or personal use.

• Iconoir

  900+ open source icons in SVG, Font, React, Figma and Framer

  License: MIT, Free for commercial or personal use.

• Simple Icons

  1928 Free SVG icons for popular brands

  License: Creative Commons, Free for commercial or personal use.

• Bootstrap Icons

  Free Icons built for Bootstrap but they'll work in any project

  License: MIT, Free for commercial or personal use.

• Vivid.js

  Ready to use Free and Open Source SVG Icons Pack JavaScript Library.

  License: MIT, Free for commercial or personal use.

• Iconmonstr

  Discover 4512+ free icons in 313 collections

  Free for personal and commercial purposes without attribution.

• UseAnimations

  Free Animated Icons in SVG and JSON Format(for lottie)

  License: Creative Commons, Free for commercial or personal use.

• Zondicons

  A set of free premium SVG icons for you to use on your digital products.

  License: Creative Commons, Free for commercial or personal use.

• Eva Icons

  Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items.

  License: MIT, Free for commercial or personal use.

• Cryptoicons

  A set of 430 crypto and fiat currency icons.

  License: Creative Commons, Free for commercial or personal use.

• Ikonate

  Fully customizable & accessible vector icons

  License: MIT, Free for commercial or personal use.

• Evericons

  Evericons is a big pack of over 460 free icons designed by Aleksey Popov.

• SVG Repo

  300,000+ SVG Vectors and Icons

  License: Creative Commons, Free for commercial or personal use.

• CSS ICON

  Icon set made with pure CSS code, no dependencies, "grab and go" icons

  License: Creative Commons, Free for commercial or personal use.

• System UIcons

  System UIcons is a collection of open-source icons designed for products and systems in mind. Each icon is on a 21x21 grid.

  Free for commercial or personal use.

• IconPark

  IconPark gives access to more than 2000 high-quality icons and introduces an interface for customizing your icons. Transform an SVG icon into multiple themes and generate React icons, Vue icons

  License: Apache 2.0, Free for commercial or personal use.

• Radix Icons

  A crisp set of 15×15 icons designed by the Modulz team.

  All icons are available as individual React components.

  License: MIT, Free for commercial or personal use.

• Ionicons

  Premium-designed icons for use in web, iOS, Android, and desktop apps. Support for SVG and web font.

  License: MIT, Free for commercial or personal use.

• Phosphor Icons

  Phosphor is a flexible icon family for interfaces, diagrams, presentations

  License: MIT, Free for commercial or personal use.

• Teeny Icons

  Tiny minimal 1px icons designed to fit in the smallest places.

  License: MIT, Free for commercial or personal use.

• Feather Icons

  Beautiful, customizable open source icons

  License: MIT, Free for commercial or personal use.

• Lucide

  An open-source icon library, a fork of Feather Icons.

  License: ISC, Free for commercial or personal use.

• IconBros

  11486+ free icons grouped in 257 collections

  Free for personal and commercial purposes with attribution.

• Flat Icon

  The largest database of free icons in PNG, SVG, EPS, PSD, and BASE 64 formats

  Free for personal and commercial purposes with attribution.

• Iconscout

  Free Download Icons illustrations stock photos at one place

  Free for personal and commercial purposes with attribution.

• Iconfinder

  Free and premium vector icons in SVG, PNG, CSH, and AI format

• The Noun Project

  Over 2 Million curated icons, created by a global community

Tools

• AppIcon

  Quickly generate app icons in different sizes for your IOS, macOS, and Android projects

• Convertio

  Convert PNG files to SVG online & for free. (One of the services provided by it.)

The article was first published on haathi.me

20+ Fonts Resources for Developers, Product Managers, and Founders

 

A web without well-made typography is like a body without bones or muscles. Harnessing the power of fonts in web design is as vital as any other elements that make up the design. Good headlines, proper font pairing, and general harmony will go towards making a compelling and effective overall design strategy. I know, I know… not all fonts are readable on the web unless you have them downloaded and it can be hard to find one that works for you what now?

This list is a compilation of websites that provide google font alternatives for use on your website, and by no means exhaustive.

• Google Fonts Library of around 1000 free licensed font families
• DaFont Archive of freely downloadable fonts
• Use & Modify A personal selection of beautiful, classy, punk, professional, incomplete, weird typefaces License: Open source, Free for commercial or personal use.
• 1001 Free Fonts I think the name speaks for itself. License information available on each font
• Font Squirrel Font Squirrel scours the internet for high quality, legitimately free fonts Free for commercial or personal use
• Font Fabric A digital type foundry crafting retail fonts and custom typography for various brands Free & premium fonts
• FontGet Has a variety of fonts available to download and sorted neatly with tags License information available on each font
• Font Space A designer-centered free font website that has quick customizable previews License information available on each font
• Free Typography A list of high-quality fonts
• Leon Sans A geometric sans-serif typeface made with code License: MIT, Free for commercial or personal use.
• 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
• Fonts Arena FontsArena is a curated typography website with a focus on contemporary typography and high-quality free fonts.
• Befonts High-quality fonts for free Free for commercial or personal use
• Open Foundry The platform for curated open-source typefaces Free for commercial or personal use
• Rough Font Awesome When RoughJS meets Font Awesome License: Open source, Free for commercial or personal use.
• FFonts Stylish fonts for free License information available on each font
• Dev Fonts Find and use the coding fonts License information available on each font

Font Tools

• Fontjoy Generate font pairing in one click
• FontPair Helps you pair Google Fonts together
• Golden Ratio Golden Ratio Typography Calculator
• Font Flipper Preview 800+ Google Fonts on top of your own designs, without having to download the fonts
• FontDrop Simple and easy way to view the contents of font files
• Glyphter Upload your own SVGS and turn them into font files. Useful if you want a smaller library loaded

Non-English fonts

• Malayalam Fonts Malayalam fonts for free which are maintained by Swathanthra Malayalam Computing(SMC) License: Creative Commons, Free for commercial or personal use.
• Arabic fonts for free

This article was originally published on haathi.me

30+ AWESOME INSPIRATIONAL DESIGN RESOURCES FOR DEVELOPERS, PRODUCT MANAGERS AND FOUNDERS.

 

To help you focus more on making better products, I have compiled a list of websites to ease your search for Design kits, Illustrations, Patterns, Avatars, and Tools.

Component & Design Kits

• UI Design Daily: Awesome UI Components in Figma, Sketch, PSD, AdobeXD License: Creative Commons, Free for commercial or personal use.
• Sketch App Sources: Free and premium design resources for Sketch — a digital design tool. We curate thousands of resources to help you design, prototype, iterate and collaborate faster.
• InvisionApp: Library of free, high-quality UI kits, icon packs, and mockups
• FreebieSketch: Free Sketch designs, wireframes, illustrations, and more.

---

Patterns

• Hero Patterns: A collection of repeatable SVG background patterns License: Creative Commons, Free for commercial or personal use.
• Pattern Monster: A simple online pattern generator to create repeatable SVG patterns License: MIT, Free for commercial or personal use.
• Subtle Patterns: A collection of patterns by Toptal Designers. License: Creative Commons, Free for commercial or personal use.
• PatternPad: Free and unlimited unique pattern designs Free for commercial or personal use with attribution
• The Pattern Library: Free beautiful background patterns
• Patternico: Seamless Pattern Maker
• Transparent Textures: A collection of transparent textures background patterns.
• Doodad Pattern Generator: Create unique, seamless, royalty-free patterns.
• trianglify.io: Generate low-poly backgrounds, textures, and vectors
• Tabbied: Create and customize minimally generated patterns/artwork to use for background images, print, and other projects.

---

Illustrations

• Drawkit.io: Hand-drawn vector illustration and icon resources, perfect for your next project. Free for commercial or personal use without attribution
• IRA Design: An open-source gradient illustrations collection License: MIT, Free for commercial or personal use.
• SketchValley: Download free PNG, SVG, or AI files. License: Creative Commons, Free for commercial or personal use.
• Undraw.co: Open-source illustrations for any idea you can imagine and create Free for commercial or personal use.
• Manypixels.co: Monochromatic, Isometric high-quality illustrations Free for commercial or personal use.
• Open Peeps: Hand drawn illustration library License: Creative Commons, Free for commercial or personal use.
• Humaaans: Cool illustrations of people with the ability to mix and match License: Creative Commons, Free for commercial or personal use.
• Uplabs: High-quality design resources for designers, creative agencies, and developers (Free & Premium)
• Open Doodles: A Free Set of Sketchy Illustrations License: Creative Commons, Free for commercial or personal use.
• IsoFlat: A Free collection of Isometric SVG graphic resources
• Storytale.io: Subset of Storytale free quality illustrations
• icons8.com/illustrations: Free vector illustrations to class up your project
• 404 illustration: Royalty-free illustrations for pages
• Pixeltrue Illustrations: Free Animated Illustrations
• Flexiple: One new high-quality, open-source illustration each day. Free for commercial or personal use without attribution
• Illustration Kit: Free premium illustrations updated weekly Free for commercial or personal use without attribution
• Lukaszadam Free SVG illustration images in different shapes & styles. License: CCO(MIT), Free for commercial or personal use without attribution
• Delesign: A collection of free illustrations and more Free for commercial or personal use
• Servier Medical Art 3000 free medical images to illustrate your publications and PowerPoint presentations License: Attribution 3.0 Unported (CC BY 3.0), Free for commercial or personal use with attribution

---

Avatars

• Abstract User Avatar API: API to create simple yet flexible user avatars from user names or emails
• Exemplar: Free Avatar Library for Figma and Sketch Free for personal use
• Avataaars: Free sketch library of avatars illustrations by Pablo Stanley Free for commercial or personal use.

---

Tools

• blob: Generate Blob shapes for Web and Flutter apps
• Custom Shape Dividers: Free tool to make it easier for designers and developers to export a beautiful SVG shape divider
• SVG wave: SVG Wave is a tiny, free and beautiful SVG gradient waves generator for your UI or website design. It offers a dead-simple UI to customize and style your waves based on your theme specifications.
• Haikei: Haikei is a web-based design tool to generate unique SVG design assets for websites, social media, blog posts, desktop and mobile wallpapers, posters, and more!

The article was first published here