<img height="1" width="1" style="display:none;" alt="" src="" data-consent-src="https://px.ads.linkedin.com/collect/?pid=233274&amp;fmt=gif" data-category-consent="cookie_cat_marketing">
Start trial
Log in
Best free icon Collection

3 Essential tips for using icons in your catalog [Including free download of +2.300 Icons]

 

Icons are essential for our online experience. They provide a universal way to convey functionality and attract the eye of the readers. Claromentios writes that research has shown that icons, when used correctly, can enhance the usability, be easily remembered, and improve the design of web pages or software being used

This also applies to digital catalogs as well. 

According to the infographic website Visme, 90% of the information we process in our brain is visual. 70% of our sensorial receptors are placed in our eyes. We remember 80% of visual content, 20% of written content and only 10% of what we hear. 

This is why today we'd like to share 3 essential tips to using icons in your online catalog.

#1 Explain your icons on the first page

#2 Ensure icons are easily spotted

#3 Use Universally understandable icons

 

When using a flipbook platform, like iPaper, you can easily incorporate these tips when you create online brochures. 

Related read: How to make a digital flipbook (simple step-by-step guide)

#1 Explain your icons on the first page

A good way of helping the viewer comprehend the icons you are using in your catalog is by simply adding a text label in the beginning explains the use of each icon. This especially applies, when the used symbol is not universally understood.  

bedre bad.png

From above example, you can see how BEDRE BAD incorporates icons with text, to help their readers to a better navigation. 

The hand has the text "Go to..."

The plus: "Read about the product"

Play-icon: "start the video"

Shopping Icon: "go to web shop"

List-icon: "add to shopping list".

 

#2 Ensure icons are easily spotted

You can also do as SKODA and use highly visible green icons (sliding in on the flipbook). Here a camera, showing a bigger picture when you click on it. A play icon starting a video. And a hand icon, where you jump to the page written in the text. 

skoda.png

#3 Use Universally understandable icons

Icons should always help the user easily identify, which action to take.. Examples: 

  • A shopping basket to highlight which products can be bought
  • A download symbol on downloads.
  • A + for opening up a window of more text, images, etc. 
  • A camera icon to indicate photos
  • Social media icons

Stanhome Italy uses the universal social icons on the front page of their digital flipbook to direct viewers to their various channels. 

Stanhome.png

#Conclusion

As you've probably noticed there are a ton of different icons online. Some are free and some are not. You can find some really nice free icons - if you know where to look. The help you all out we have gathered our favourite assets to use when enriching online catalogs for you to download for free! 

This includes +2.300 assets featuring: 

  • icons
  • loading gifs
  • backgrounds
  • illustrations 

Preloader_3.gif Example of a loading gif

Download the Best Free Icon Collection here 

About the author

Valentin Jørgensen

Valentin Jørgensen

UX designer @iPaper. I'm a user advocate and passionate about solving problems. I care deeply about brands that resonates and goes the extra mile to put a smile on people’s faces. Big fan of Steves Krug's approach "Don't make me think". I like nature and carrots.

Back to the blog