Icons have become an essential component of modern design, particularly in digital interfaces. These small, visually appealing symbols have the power to convey complex ideas and actions in a simple and intuitive way. They provide a visual shorthand that can communicate anything from the most basic commands to more abstract concepts.
https://www.figma.com/file/5CbVpFEblYWbLHXPtVaXsd/UNIVERSAL-ICON-SET-v2.2-|-Preview?node-id=441%3A8&t=JLfRVZDjpPXPva52-1
Create a recognizable design. The human eye processes visual images much faster than text. It is also a universal way of understanding information in any language. So, the more accurate the metaphor of your icon is, the sooner it can be “read”. And this is the first thing to pay attention when creating icons.
<aside> <img src="/icons/checkmark_green.svg" alt="/icons/checkmark_green.svg" width="40px" /> Do
</aside>
Use clear metaphors
<aside> <img src="/icons/clear_red.svg" alt="/icons/clear_red.svg" width="40px" /> Don’t
</aside>
Avoid complex to understand metaphors
Simplicity can be achieved by using the minimum possible number of parts for creating an icon. If in the work process the icon turns out to be complex, do not be afraid to remove unnecessary details, leaving only the most important parts.
<aside> <img src="/icons/checkmark_green.svg" alt="/icons/checkmark_green.svg" width="40px" /> Do
</aside>
Make your icons as simple as possible
<aside> <img src="/icons/clear_red.svg" alt="/icons/clear_red.svg" width="40px" /> Don’t
</aside>
Don’t use a lot of details in your icon
To design a set of icons, use the same style so they look cohesive and users can easily recognize and understand them. Consider the context they will be used in and make sure they are clear for the target audience.
<aside> <img src="/icons/checkmark_green.svg" alt="/icons/checkmark_green.svg" width="40px" /> Do
</aside>
Keep consistent icon style in one set
<aside> <img src="/icons/clear_red.svg" alt="/icons/clear_red.svg" width="40px" /> Don’t
</aside>
Don’t mix different styles in one set
<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a10aadb3-acd3-4d8b-9718-6f407c449efe/icon-grid.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a10aadb3-acd3-4d8b-9718-6f407c449efe/icon-grid.png" width="40px" /> 24 x 24 px grid
</aside>
<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d16b5359-7eec-4d5d-9496-68ffa3bd470e/icon-safe.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d16b5359-7eec-4d5d-9496-68ffa3bd470e/icon-safe.png" width="40px" /> 2px padding
</aside>
<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/fbe052b9-958f-434a-b8aa-778ae5819cfb/icon-stroke.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/fbe052b9-958f-434a-b8aa-778ae5819cfb/icon-stroke.png" width="40px" /> 2px stroke
</aside>
<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/bf999eb5-7c80-4db2-b878-9ded7fa72614/icon-corner.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/bf999eb5-7c80-4db2-b878-9ded7fa72614/icon-corner.png" width="40px" /> Smooth corners
</aside>
