An icon is a small image that represents an application, file, window, function button, section, etc. Usually, after you click on an icon, some action is performed. In web design, the icon is designed to enhance the text, a link, or some kind of design block and make them more illustrative.<\/p>\n
Why do webstores need icons<\/span><\/strong><\/h2>\nWeb icons is a simple and effective tool to navigate an unfamiliar site. Their advantage is that they are simple, concise, but at the same time very expressive. With their help, it is easy to draw visitors’ attention to any section of a site or convey some important information.<\/p>\n
Depending on their functions, icons can be divided into the following categories:<\/p>\n
\n- Navigation icons.<\/strong><\/span> It is clear from the name that the purpose of these icons is to make make it easier for people to navigate the site. For example, a trolley icon redirects a person to the cart page, an envelope — to the contact section, while Twitter, Facebook, Vkontakte or Instagram icons open the company’s pages on social networks.<\/li>\n
- Informative icons.<\/strong><\/span> With their help, you can show the services you provide, tell about the key values of the company or the benefits of your product. It is recommended to add small descriptions to such icons, e.g.: an illustration of a truck, and “Delivery information” written next to it.<\/li>\n
- Call-to-action icons.<\/strong><\/span> They should be used with caution because people do not always correctly understand their meaning. An arrow in a circle can be interpreted as both “Download” and “Down”. The “+” badge also has a couple of common meanings — both “Add to Cart” and “Learn More Information”. If you use these characters as buttons, we recommend adding short captions to them for greater clarity.<\/li>\n<\/ul>\n
Types of website icons<\/strong><\/span><\/h2>\nThe basic rule when creating icons is that they should be simple, understandable, distinguishable and clean, even in small size. Icons should fit into the overall site design and match the general color scheme, otherwise, the site will look messy and not very beautiful.<\/p>\n
Let’s take a look at the most popular types of icons to date.<\/p>\n
Line icons<\/span><\/strong><\/h4>\nLine icons will always be in fashion. These icons are clear and easy to read.<\/p>\n
![\"Icons](\"https:\/\/belvg.com\/wp-content\/uploads\/2019\/06\/pixel.png\" "\\"Icons")
<\/a><\/p>\nSimple forms<\/span><\/strong><\/h4>\nIcons that consist of simple forms have similar elements and therefore match each other.<\/p>\n
<\/a><\/p>\nGradient icons<\/strong><\/span><\/h4>\nGradient as the main trend of 2018 can also be featured in icons.<\/p>\n
<\/a><\/p>\nThick-line icons<\/span><\/strong><\/h4>\n<\/a>Flat icons<\/strong><\/span><\/h4>\nFlat icons also remain in fashion. Most modern icons are flat and differ only in their style.<\/p>\n
<\/a><\/p>\nHow icons for BelVG modules on Magento 2 store were created<\/span><\/strong><\/h2>\nThe Magento store contains modules from different companies and each company has its own style of icons for modules. It is really hard to make your modules stand out among such a variety of styles.<\/p>\n
<\/a><\/p>\nWe wanted to highlight our modules and themes so that they are recognizable among other icons while following all the latest trends.<\/p>\n
First, we wanted to make our icons using corporate colors and style. We tried it, they became recognizable and had their own style, but did not stand out among other icons.<\/p>\n
<\/a><\/p>\nThen we started looking for other options. We thought that the module is a product that is associated with a box. Therefore, we decided to combine a box and an icon of the module that shows what this module does.<\/p>\n
<\/a><\/p>\nBut we also needed to highlight the icon among the modules of other companies. We reviewed the icons of the store modules and figured that they were all flat. Therefore, we decided to highlight the icon by combining a 3D box with a simple and clear icon.<\/p>\n
<\/a><\/p>\nThus we made the icons stand out among others. We used simple forms, a little bit of 3D and a minimum number of colors. Here is what we had as a result.<\/p>\n
<\/a>You can check out these icons on our Magento store<\/a>.<\/p>\nThank you for reading, hope this article was helpful. Please leave your questions concerning web icons and their creation in the comment section and I will make sure all of them are answered. I wish you a good day and creative icons.<\/p>\n\n","protected":false},"excerpt":{"rendered":"Types of icons in ecommerce websites and how to create them","protected":false},"author":122,"featured_media":17132,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"_acf_changed":false,"footnotes":""},"categories":[474,497],"tags":[],"class_list":["post-17131","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-ecommerce","category-marketing","post_format-image"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t
Types of website icons<\/strong><\/span><\/h2>\nThe basic rule when creating icons is that they should be simple, understandable, distinguishable and clean, even in small size. Icons should fit into the overall site design and match the general color scheme, otherwise, the site will look messy and not very beautiful.<\/p>\n
Let’s take a look at the most popular types of icons to date.<\/p>\n
Line icons<\/span><\/strong><\/h4>\nLine icons will always be in fashion. These icons are clear and easy to read.<\/p>\n
<\/a><\/p>\nSimple forms<\/span><\/strong><\/h4>\nIcons that consist of simple forms have similar elements and therefore match each other.<\/p>\n
<\/a><\/p>\nGradient icons<\/strong><\/span><\/h4>\nGradient as the main trend of 2018 can also be featured in icons.<\/p>\n
<\/a><\/p>\nThick-line icons<\/span><\/strong><\/h4>\n<\/a>Flat icons<\/strong><\/span><\/h4>\nFlat icons also remain in fashion. Most modern icons are flat and differ only in their style.<\/p>\n
<\/a><\/p>\nHow icons for BelVG modules on Magento 2 store were created<\/span><\/strong><\/h2>\nThe Magento store contains modules from different companies and each company has its own style of icons for modules. It is really hard to make your modules stand out among such a variety of styles.<\/p>\n
<\/a><\/p>\nWe wanted to highlight our modules and themes so that they are recognizable among other icons while following all the latest trends.<\/p>\n
First, we wanted to make our icons using corporate colors and style. We tried it, they became recognizable and had their own style, but did not stand out among other icons.<\/p>\n
<\/a><\/p>\nThen we started looking for other options. We thought that the module is a product that is associated with a box. Therefore, we decided to combine a box and an icon of the module that shows what this module does.<\/p>\n
<\/a><\/p>\nBut we also needed to highlight the icon among the modules of other companies. We reviewed the icons of the store modules and figured that they were all flat. Therefore, we decided to highlight the icon by combining a 3D box with a simple and clear icon.<\/p>\n
<\/a><\/p>\nThus we made the icons stand out among others. We used simple forms, a little bit of 3D and a minimum number of colors. Here is what we had as a result.<\/p>\n
<\/a>You can check out these icons on our Magento store<\/a>.<\/p>\nThank you for reading, hope this article was helpful. Please leave your questions concerning web icons and their creation in the comment section and I will make sure all of them are answered. I wish you a good day and creative icons.<\/p>\n\n","protected":false},"excerpt":{"rendered":"Types of icons in ecommerce websites and how to create them","protected":false},"author":122,"featured_media":17132,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"_acf_changed":false,"footnotes":""},"categories":[474,497],"tags":[],"class_list":["post-17131","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-ecommerce","category-marketing","post_format-image"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t
Line icons will always be in fashion. These icons are clear and easy to read.<\/p>\n
Icons that consist of simple forms have similar elements and therefore match each other.<\/p>\n Gradient as the main trend of 2018 can also be featured in icons.<\/p>\n Flat icons also remain in fashion. Most modern icons are flat and differ only in their style.<\/p>\n The Magento store contains modules from different companies and each company has its own style of icons for modules. It is really hard to make your modules stand out among such a variety of styles.<\/p>\n We wanted to highlight our modules and themes so that they are recognizable among other icons while following all the latest trends.<\/p>\n First, we wanted to make our icons using corporate colors and style. We tried it, they became recognizable and had their own style, but did not stand out among other icons.<\/p>\n Then we started looking for other options. We thought that the module is a product that is associated with a box. Therefore, we decided to combine a box and an icon of the module that shows what this module does.<\/p>\n But we also needed to highlight the icon among the modules of other companies. We reviewed the icons of the store modules and figured that they were all flat. Therefore, we decided to highlight the icon by combining a 3D box with a simple and clear icon.<\/p>\n Thus we made the icons stand out among others. We used simple forms, a little bit of 3D and a minimum number of colors. Here is what we had as a result.<\/p>\n Thank you for reading, hope this article was helpful. Please leave your questions concerning web icons and their creation in the comment section and I will make sure all of them are answered. I wish you a good day and creative icons.<\/p>\n\n","protected":false},"excerpt":{"rendered":"Types of icons in ecommerce websites and how to create them","protected":false},"author":122,"featured_media":17132,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"_acf_changed":false,"footnotes":""},"categories":[474,497],"tags":[],"class_list":["post-17131","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-ecommerce","category-marketing","post_format-image"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t![\"Icons](\"https:\/\/belvg.com\/blog\/wp-content\/uploads\/2018\/11\/image4.png\" "\\"Icons")
<\/a><\/p>\nSimple forms<\/span><\/strong><\/h4>\n
<\/a><\/p>\nGradient icons<\/strong><\/span><\/h4>\n
<\/a><\/p>\nThick-line icons<\/span><\/strong><\/h4>\n
<\/a>Flat icons<\/strong><\/span><\/h4>\n<\/a><\/p>\nHow icons for BelVG modules on Magento 2 store were created<\/span><\/strong><\/h2>\n
<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a><\/p>\n<\/a>You can check out these icons on our Magento store<\/a>.<\/p>\n