Skip to main content
veenpermand
veenpermand
Participant
October 10, 2020
Answered

Confusion with choosing base Icon sizes for various web dimension

  • October 10, 2020
  • 1 reply
  • 525 views

Hello Designers,

I came across a problem on deciding with system icons size while designing for different web dimensions. Pls suggest me what are the base Icon sizes while designing for 1920×1080 and 1024X768. Also give me knowledge about if there is any relativity of choosing icons sizes in correspondent with page dimensions.

To Illustrate my problem more, let's assume I choose 24X24 as base Icon size while designing for 1024x768 dimension but, can I also use the same 24X24 as base icon size for 1920X1080 as well? or will there be any variation?  If Yes why? and if No, pls explain.

 

Thanks and regards

Kishan Permand

This topic has been closed for replies.
Correct answer Spas K.

Hi Kishan.

 

That's usually a matter of testing. Visibility is what's important. If the icons look good and are legible at this size with both resolutions, you will be fine. The resolutions mentioned are for desktop and (I assume) for tablet devices.

 

Depending on the situation and style for the icons, I will sometimes do 18x18 icons for desktop, and 24x24 on mobile devices, since their screens are smaller, even though their resolutions are bigger. It's about maintaining the same physical size of the icon, which varies depending on screen size & scaling, so you should test it on a device and resize if needed.

 

 

 

 

1 reply

Spas K.
Community Expert
Spas K.Community ExpertCorrect answer
Community Expert
October 11, 2020

Hi Kishan.

 

That's usually a matter of testing. Visibility is what's important. If the icons look good and are legible at this size with both resolutions, you will be fine. The resolutions mentioned are for desktop and (I assume) for tablet devices.

 

Depending on the situation and style for the icons, I will sometimes do 18x18 icons for desktop, and 24x24 on mobile devices, since their screens are smaller, even though their resolutions are bigger. It's about maintaining the same physical size of the icon, which varies depending on screen size & scaling, so you should test it on a device and resize if needed.

 

 

 

 

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices