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

Just Take Your Chance

A chance can give you hope

A hope can give you light

A light can show you way

A way can show you destination

So, just take your chance

A chance can give you dreams

Dreams can weave your path

A path which you can walk

A walk which leads to your destination

So, just take your chance

A chance which you thrive for

A thrive can make you do remarkable stuff

Stuff that you won’t have imagined

That Imagination paves path to your destination

So, just take your chance

Tides may be against you

Against in itself has “Again”

Tides will come again

Will pave the path to your destination

So just wait for your chance

But just don’t simply wait for your chance

Try hard and even harder every day

So when the time comes

You don’t have to wait

To take your chance

So just go, live each and every moment

As every moment unveils the “hidden you”

“You” who can carve his own chance

So, it’s your chance to explore “you”

So, that’s your chance.

If you miss this chance

Then there is no chance

Even for a chance

So it’s the right time

To take your chance

So, just go for it….. :)

"FEEL YOURSELF"

Before continue reading, you need to promise me and yourself that you will follow what is written then you can experience what I intend to make you feel.

Close your eyes and let yourself free and look inside you. Let your soul wander; now imagine yourself standing outside the heaven door. The magnificent colossal entrance encircled by mist, its handle studded with lamp whose glow turns the mist around into sparkling rose carrying the “welcome sign”. Then suddenly the door opens slowly and a cool breeze osculates your face. The light falls on your face as sun rises, spreading its gleam all around with you being the cynosure. You can see people emerging from the light and heading towards you, the people are dressed from head to toe in shining white apparel. Their visages are glowing with contentment bearing enormous smile to see you. They greet you with your name as they guide you inside heaven. 

As you enter, you see a rainbow, wait did you see children sliding on it. You can feel the aroma of the charismatic nature.  The giggling of children, chuckling of people can be heard around. All the people are well fed, just enjoying their stay in heaven.

As you are enjoying the atmosphere, there is a Baaang and the mist encircles you, revolves around you. In the glimpse of a second you are teleported to a new place.

As you reach there, the entire attire changed. Cool breeze is no more blowing but all you can see is volcanic eruptions; the surrounding breeze has changed its color and nature. Now it’s like a blaze that makes you feel that you are in the middle of desert baking roti on chulaas in the scorching sunlight wearing an over coat. 

Then you see people wearing garland made of chopped fingers. As you look around, you can see a person with big mustache chopping down the fingers of people, they are screaming in pain and fear which seems to be pleasing the person with mustache.

The entire surrounding is permeated with sadness, sorrow and grief. People, instead of trying to help each other and taking stands for themselves, are rather pushing one another to save their selves.  Then you see a guy running towards you with a hatchet and his visage soaked in blood. You can feel the terror as your death fast approaches. You are running as fast as you can to save yourself, just then a blow comes from behind as you try to gather your breath, beheads you. Your head is lying on the piping hot floor. The person is chopping your fingers with a ghastly laugh.

As the person with a hatchet in his hand leans towards your face to slice it down into pieces, there is a Blassssssssssst….!!!! and you find yourself in a single piece on your bed as your mummy/friend wakes you up. Then you soon move your hand to check if your head is in its place or not. You close your eyes and thank your deity for keeping you safe and sound.

So, how do you feel; just share your experience whether it may be weird or what you can imply from it or what you can learn from it.  Everything is left to your discretion.

LOVE: AN ESSENCE

Love, a four lettered word, has different meanings and diverse descriptions. Each and every person has different views and explanations for love. Even in ancient mythology, love has been vividly described. Some say “love thyself then only you can love others” while some say “true love is an epitome of sacrifice” and many other views, sayings and philosophies are available.

But I still don’t understand the meaning of love. I have crossed my twenties to reason out “WHAT IS LOVE” but have not succeeded in finding the answer yet. Different perceptions by different people keep on haunting me. Whether they are wrong or I have failed to understand their perspectives.  If they are right then why Lord Krishna slaughtered Kansa. What crime had he committed? He just loved thyself, so just to save himself he committed atrocities on innocent people and even on his sister Yashodhara. But in the overall scenario he failed to love others.  So do we have to consider his act as an act of brutality or self defense?

Even our father of nation “MAHATMA GANDHI” loved thyself and his country and fought against the British to snatch the freedom from their hands to gain independence for his country, which had been in the shackles of bondage over a period of 200 years. Then why was he shot dead by his own countrymen, whom he loved and stood for. He loved others, then why was he shot dead.

Kansa and Gandhi, both have been the opposite sides of the same coin, one who loved himself and other oneself and others. Even then both were slaughtered. WHY???

What is the real meaning of love??? What we really are missing???? These instances leave me bewildered. I find myself lost in fog, the more I search for, the denser it gets.

Still my questions are unanswered. The question which prevails everywhere and each one of us seeks an answer to it.

If love is not about thyself or others, then what is it????

Love, what I feel, is not bound by any vivid meaning or description. It’s endless, the more you feel it, the more you are engrossed by its presence. Love is not just an essence; it’s about how you feel about yourself and everyone around you. Rather, it’s the essence that unites the communities and individuals together.  Love simply is self esteem/self image of an individual.

Love is like a seed, you sow it and with proper nurturing it turns into a bud…. then slowly a leaflet ….then a plant……then into a tree which bears fruits and flowers. Then, this tree bends with its fruits to feed the passerby. Passerby is overwhelmed by its offerings and honours its care. Soon its magnificence and glory spreads around the globe.

So if you really need to have that essence, that self esteem and that self image, all you need to possess is just that small seed of love, which you need to sow within yourself and nurture with your care, kindness and humbleness.  Hence, when it grows ready to be reaped, it offers love and becomes a catalyst in each other’s growth.

I have sowed my love seeds. When are you going to sow yours and reap them? J

“Broken Heart”

If I don’t understand you,

Then its okay I don’t have a heart

But if I do,

Even then I don’t have a heart

If I hurt you

Then its okay I don’t have a heart,

But if I don’t

Even then I don’t have a heart

If I don’t have feelings for you

Then its okay I don’t have a heart

But if I do

Even then I don’t have a heart

If I don’t love you,

Then its okay I don’t have a heart

But if I do

Even then I don’t have a heart

If I don’t have a heart

Then why does it pain

If I don’t have a heart

Then why does it want you

If I don’t have a heart

Then why does it love you

If I don’t have a heart

Then why does it wait for you

If I don’t have a heart

Then why are my eyes fixed on my cell

If I don’t have a heart

Then why it wants my cell to ring

If I don’t have a heart

Then why does it want to see you around

If I don’t have a heart

Then why does it want to express my love for you

If I don’t have a heart

Then why does it want to tell you

That you are the one

Who makes my life complete

If I don’t have a heart

Then why does it beat only for you

If I don’t have a heart

Then why does it think 24x7 about you.

If I don’t have a heart

Then why my dreams

Begin with you

And end with you

I really don’t have a heart

Else you could have seen my love for you

I really don’t have a heart

Else you would have been with me

I really don’t have a heart

Else you would have understood my true feelings

Now I really don’t have a heart

Coz it has been shattered into a million pieces

The pieces that cannot be fixed

To form a heart without clefts in it

I really don’t have a heart

Coz now it’s a truly broken one

I really don’t have a heart

Coz I have decided to move on

With the broken one I have.

Why the broken pieces still hurt

Why have I still not learnt to bear the pain?

Coz every piece of my heart

Has one and only one image

And that is of you.

But still I don’t have a heart

Coz now I call it a broken heart.