Icons are one of the important assets for designers and developers. whether you are designing or developing a website, a web app, or apps even a slide or anything, you always need icons. The primary reason we love using icons is that they help us connect with users faster than text, Learn more about why are icons so important.

Today, I will rank the top 5 icon websites you need to know about. based on:

1. Consistent icon style
2. Pixel-perfect icons
3. Free and optimized SVG
4. The number of clicks needed to download any icon

Let’s get started:

1. Figicon.com

About Figicon:
Figicon is a Free Figma icons Library for minimal and consistent icons, here are the top features of figicon:

— Minimal and Pixel-perfect icons
 — Free SVG icons
 — Easily Copy/Paste icons from the Website without Login
 — One Click to Copy/Download any icon
 — Weekly New icons
 — Organized Figma File
 — Request Any icons ( Paid User )
 — One Time Payment Option ( For Full Access )
 — Designed by one Rule and One Designer ( Limited Style )

2. Flaticon.com

About Flaticon:
Flaticon is the biggest website for icons where thousands of designers around the world share icons daily, here are the top features of flaticon:

— Biggest icons collection
 — Free PNG icons ( Paid SVG )
 — Easily Copy/Paste PNG icons from the Website without Login
 — Lots of Variant of any icons
 — Two-Click to Copy/Download any icon
— Daily New icons
 — No Consistent icons due to many designers contributing icons daily
 — Subscription Model ( For Full & SVG Access )

3. icon8.com

About icon8:
icon8 is another major website for icons, they also have a huge icons collection, here are the top features of icon8:

— Huge icons collection
 — All open-source icons collection
 — Free PNG icons ( Paid SVG )
 — Easily Copy/Paste PNG icons from the Website without Login
 — Some beautiful icon variant crafted by their own team
 — Three Click to Copy/Download
 — Lots of Ads while exploring free
 — along with icons they provide illustrations and other assets for your need
 — Consistent icons with different variant
 — Subscription Model ( For Full & SVG Access )

4. fontawesome.com

About fontawesome:
fontawesome is the developer's favorite icon website, here are the top features of fontawesome:

— Huge icons collection
 — Free SVG icons
 — Easily Copy/Paste PNG icons from the Website without Login
 — Lots of Variant of any icons
 — Two-Click Copy/Download
 — Consistent icons
 — Subscription Model ( For Full Access )

5. feathericons.com

About feather icons:
feather icons is one of the most beloved open-source icon websites. Even though they have a relatively small collection of icons, these are used by hundreds of thousands of users worldwide. Here are the top features of feather icons:

— Only 200+ icons
 — Free SVG icons
 — Easily Copy/Paste PNG icons from the Website without Login
 — One-Click to Copy/Download
 — Consistent icons
 — Open Source

Also here are some more icons website :

6. https://iconscout.com/
7. https://www.streamlinehq.com/
8. https://iconic.app/
9. https://thenounproject.com/
10. https://heroicons.com/

Thanks for reading, I Hope you will find this collection helpful.

Last but not least :

I often write about UX design, product design, and more. Feel free to follow me on Medium.

For work inquiry?

📨 Email me at arianzesan@gmail.com

Design process & Free Resources — Youtube

Follow Me on: Twitter

Top 5 free icon websites for Designers and Developers was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.

There is a saying “A picture is worth a thousand words”. An icon is a picture that signifies some words or even the equivalent of a thousand words in a simple and concise way to communicate with others.

Icons VS Human

Historically, humans have used icons from ancient times, we often see reports or research papers from materialist philosophers that discuss icons that represent something we won’t ever understand, but we can be assured they have been used for a very long time.

Additionally, we’re so familiar with the icons from our childhood on public transportation, at the airport, and in a variety of other places that have always made communication so easy for us.

Icons break the language barrier and help us to communicate easily. From that idea, icons first appeared on computer interfaces in the 80s. You can learn more about their history when you read The History of Icons.

Icons are becoming so popular on the web that we can’t even imagine a website, app, or operating system without them. Here are two examples of the current medium, Twitter’s mobile app and Linkedin’s website where icons play a key role.

As a result, it becomes so vital to use icons wisely so that your icons make a perfect connection with your users.

What are the best ways to use icons?

An online website, app, or service is not successful if its users are not satisfied. Therefore, every designer and developer should focus on the user’s experience. Icons play a significant role in the user experience, so choosing the right icon is crucial.

In general, most users are aware that the Home icon indicates the main page/home page of any website or app. Clicking it is supposed to take them back to the main page/home page. so Try to stick to the most common icon practice when using your app’s icon. If you are using a home button, only use it for the home page/main page. Do not use a home button to open your app’s other pages. In this way, users can understand what the icon represents and why it was used. Using the right icon will help your app/website/presentation to connect with your audience fast and easily. Let’s see some examples of big companies using icons perfectly.

In addition, Icons have the huge power to connect your app, website, or presentation with your audience quickly and easily. Take a look at some examples of big companies using icons effectively.

Google :

Google uses its own icon pack named Material Design. That’s why we always see consistency across all google products, whether it’s their website, app, or other services.

Here’s an example of how Google connects with its users through its icons. Anyone who uses Google Maps can easily recognize which way he/she should use to take from his/her location to his/her home.

• on car — 1 min
• on Motorcycle — 1 min
• on Train — not available
• By walking — 1 min
• By Hiring
• on Air

Apple

also, Apple has its own icon pack called SF Symbols. With SF symbols, Apple is able to create the most powerful and most used eco-system in the entire world. They are easy to use and pretty straightforward to use.

Here you can see their control center without any text but with just an icon everyone can understand and use what they need to use or control. There is no language barrier in this design, which is one of the biggest goals of having perfect icons.

Other Company:

Nearly all major companies have their own icon pack where they can keep their design consistent and connect more closely with their users, such as Facebook, Instagram, and TikTok.

One thing we’ll find in common with all these big companies is that they always use simple icons wherever possible. In addition, they know where to use the right icon at the right time.

What are the benefits of simple icons?

It is important to remember that an icon’s primary goal is to communicate with the user. Designing a fancy icon will not help the user to achieve the user goal rather it will waste the user’s time and attention. In addition, to create a consistent look of the entire icon pack, big companies try to keep it simple so they can design a consistent icon pack that fits the whole app/website.

here is some example of fancy vs simple icons:

Icons should be used more on apps and websites for the following reasons:

• Using more icons will make it easier for users to access information. Because icons are more clickable with a mouse and finger
• In fact, icons get more attention and visibility than text since a picture is worth a thousand words, so using more icons will attract the attention of the user.
• The use of icons instead of text saves space and makes the apps or website look cleaner.
• Moreover, icons don’t have a language barrier, so any user can understand and use them.

How can I design icons easily(only for designers):

there are some basic rules to designing simple & consistent icons.

• start with a grid system
• follow the KISS principle (keep it super simple)
• Make it consistent by using the same size & same radius
• Use the same Stroke size
• Use the Same Padding inside

If you guys would like me to write a more detailed article about how to design icons, please let me know in the comments. Here is the ideate icons Guideline:

Which icon pack i should use(If you don’t want to design your own icon pack):

There are many websites that sell icons, such as Shutterstock, Adobe Stock, Creative Market, Flaticon, icons8, and more, but those aren’t simple and consistent, and even if you find a simple one, you’ll have trouble finding an icon that matches.

Because of that, I don’t want to miss the opportunity to create a simple & consistent icon pack for those who are looking for an icon pack for their website, mobile app, or startup.

Initially, I started designing the icon pack ideate icons back in 2021, and it took me eight months and six days to create 2000+ simple, consistent icons with 20+ categories. Also, I add 50 icons (10 requested icons) every month to the icon pack.

Feel free to Buy: https://zesan.gumroad.com/l/icons

Here is a glimpse of ideate icons :

Features

• Minimal and Pixel-perfect
• Based on 24px pixel-grid
• All shapes are vector
• Easily to change scale and tone
• 1.5px line stroke
• Line and Solid
• Editable with Figma
• 20+ Categories
• Consistent icons

File includes

• Figma File
• Sketch File
• SVG Files
• PNG Files

See More on: https://zesan.gumroad.com/l/icons

Thanks for the read. have a great day. Comments and Claps are always appreciated.

Last but not least :

I often write about UX design, product design, and more. Feel free to follow me on medium.

For work inquiry?

📨 Email me at arianzesan@gmail.com

Design process & Free Resources — Youtube

More on : Twitter | Behance

Why are icons so important?  — every Designer & Developer should know this ! was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.

“Deciding what not to do is as important as deciding what to do.” — Steve jobs.

“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs.

I am more comfortable saying that i am a problem solver rather than saying i am a UI/UX designer. To solve any problem there should be a process that can break down the problem and help to solve it more accurately. without having a process will look like you are ruining without any destination, there is no end also it will take lots of time to solve any problem. that is the reason everyone should have a design thinking process. i follow the Double Diamond process, which is the name of a design process model popularized by the British Design Council in 2005, and adapted from the divergence-convergence model proposed in 1996 by Hungarian-American linguist Béla H. Bánáthy.

Hench, there is no right or perfect problem-solving process because every problem is different, to solve a specific problem we need a specific solution. but having a problem-solving process allows me to start working on the problem initially without wasting time by assuming. once i can understand the problem then i can tweak the process according to it’s need. even it let me know when to break the rules and why it has a good reason.

The Double Diamond process :

there are two diamonds in the double diamond process:

• First Diamond used for UX
• Second Diamond used for UI

That two diamonds have four-step:

• Discover
• Define
• Develop
• Deliver

So let’s discuss how i apply the Double Diamond process to my real-life project:

Whenever i got a new project, immediately i start with this double diamond process:

At first, i focus on UX

on the UX diamond diagram, there are two-step: Discover and Define.

Discover:

On discover, i will go wide to explore the problem in detail :

• understanding the problem: to understand the problem i start talking with the client/team, trying to hear their story how they came up with their ideas, and how they want to affect users and business with their products.
• Observing the problem: on this phase, i will start observing what i got from the client/team. their targeted users, their business plans, their requirements, their competitors, and more. also, will observe how i can add value to their ideas/plans.
• Researching on the problem: once i got the targeted user and the business plans and requirements then i will go to the targeted users, and will do research on their opinion about the project. My research includes a survey for the wide range of user research and User persona to know more dept of a single user perspective.
• Competitive analysis: also if there are any competitors available, then i will start a competitive analysis about how they function and how i can make a better experience.

Define:

After discovering the problem i will have much more information about the problem, so in the define stage i will narrow down every piece of information i have :

• Summarise the whole Discovery stage: i will summarise the whole problem and start finding and start to point out the user perspective and business perspective
• Requirements: after summarising once again i will start discussing with the client/team to find out those requirements the business and the users want together.
• Feature Priority: once i find the requirement then i will make a feature priority list which will help me to prioritize features in the future.

When i will be done with the UX part then i will start with the second diamond, i spend more time on this stage.

On the UI diamond diagram, there are two steps: Develop and Deliver.

Develop:

In develop, again i will go wide to explore design solutions based on the result i got from the first diamond. i will

• Ideate: instead of jumping directly on designing on design software like Figma or sketch, i start brainstorming with pen and paper. i make some initial sketches( also known as low fidelity wireframes) to play with the idea i got from UX.
• Wireframes: once i am happy with brainstorming ideas and done with making some initial sketches then i jump into making a wireframe of it, it helps to see if the functionality/feature is working or not. with wireframe, i reach out to the client/team to discuss more that.
• Visual Research: after completing the wireframe i jump into doing visual research. visual research includes the color, typography, and style guide. most of the time i select a color based on the product type and targeted users also including color theory to make the best color for the project, the same goes for typography and others.
• Visual Design: on this phase, i started to make some concept design. i play with different concepts based on my all exploration. i often use most of my time here to make my design as much as visually attractive.

Deliver:

After developing the product here come to deliver the final product which is done at this stage. on this stage again i will narrow down every piece of design i have :

• Finalizing the Design: on this phase, i present my different concepts towards the client/team and after discussing with them together we finalize one design to go further.
• Prototyping: with the finalized design i make a clickable prototype to get feedback from users.
• Collecting feedback: with the prototype, i took feedback from the client/team and also from the users. i try to improve the design based on their feedback. once i have done with the update and the final design is ready to ship.

and i finally transfer the design to the developer team. most of the time to transfer the design by using zeplin or Figma, to learn more about what tools i use for my daily to a daily basis you can read my another article on “tools i use as a UI/UX designer”

Note: This cycle will be continued whenever the product will release and we will make improvements by collecting more feedback from the users.

About the cycle of improvements there is a saying by me that :

There is no final design or there is no perfect design.

Make your design usable. that’s enough.

It’ll save your time and your mental health.

Thanks for the read. have a great day.

My design process as a UI/UX designer — Starting to handover was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

Back in September 2021 I and the 7krave team got a contact to redesign their app. besides that i joined as a Sr. Ui/Ux designer on arcab in November 2021.

after 5 months of working with the 7krave team.7krave 2.0 app was released in February in the app store and google play. they got a hugely positive response. check the case: https://cutt.ly/FA44Ztc

After finishing the project i wanted to take another project but my mental health was not ready taking back to back projects. so i took a break from everything.

i went to Saint Martin Island, the most beautiful place in Bangladesh. when i decide to go for a trip i decide

• not to take my MacBook with me,
• not check my email
• not check my slack

i was completely out from any kind of work. and enjoyed my time so well.

Benefits i got this from the break :

— i got a new exciting experience of visiting nature and

— explored the lives of people on the island. they are so amazing and the way they think about their life is so easier than us.

— My mental stress was gone

— i become more motivated toward my work

— also invent some side hustle ideas while walking on the beach.

— got time to think about life again.

The major thing i learn from the break:

Instead of quitting your goal. take a break from it, give some time to your mind and body. it makes you stronger and more motivated than before.

btw here are some shots i took from my exciting trip.

enjoy.

#experience #uiuxdesigner #breakingbarriers #lifeadvice #life #mentalhealth #work #designer #adviceforsuccess