How to Design Icons?
You can follow this 4 step process to design icons, here I am using a very popular prototyping tool called Figma.
Figma
Figma is a browser based UI and UX creation application with design, prototyping and code generation tools. Figma also comes with its desktop application but firstly, it is known for its browser compatible seamless experience and secondly, the principles behind the desktop app remains the same – it provides the same experience and still uses network connection rather than locally downloading all the tools, basically it remains an online app in both the cases.
1. Start with Grids: Great icons are made using grids, for designing better icons you should first define your bounding box and a save zone within your bounding box and then set a few key lines. For professional icons one must use grid as a template for making the icons proportion uniform. Also while creating grids make sure that the grid size must be same for all the icons, stick to the same size usually 24px * 24px.
2. Shape and orientation of the icon: The next step of the design process would be to work on the shape of the icon and get a basic icon ready. By orientation we mean that if the icon appears to be too narrow vertically, rotate it maybe diagonally or in any other orientation.
3. Corners and Stroke: The next step would be to choose a proper stroke for the icon and work on the corners (make the rounded or sharp, etc.). Ideal thickness in most of the cases is 2px and rounded corners with 3px border radius. This will help you obtain a professional icon that is representative of the action it performs.
4. Review and iterate: The final step of the process of designing icon would be to test the final icon design. The feedback you receive after that must to taken into account and the design should be iterated accordingly until a final design is obtained that satisfies the usability tests.
What Is Iconography?
Iconography is a fascinating field that explores the visual language of symbols, signs, and images. These visual elements convey meaning, produce emotions, and serve as powerful communication tools across various domains. In this comprehensive guide, we’ll learn about the origins, significance, and contemporary applications of iconography.
Contact Us