In UI design, an info icon (often represented by a small “i” or a question mark inside a circle) is widely used in large varieties of scenarios, I would like to go over some general guidelines of when and how to use it:
Relative to Text Size: A common approach is to size the info icon equal to the text it accompanies. For body text, an icon size of 16x16 pixels - 18x18 pixels is often sufficient. For headers, which typically have larger text, the icon might need to be slightly larger, like 20x20 pixels - 24x24 pixels.
Touch Targets: If the info icon is interactive (e.g., opens a tooltip or modal on click), it’s important to consider touch target sizes. The minimum recommended touch target size is generally around 44x44 pixels, but the icon itself can be smaller within this touch area.
Relative Sizing: Adjusting the size of the info icon relative to the text size can improve readability and visual hierarchy. This is particularly useful in designs with significant variation in text sizes, such as a mix of large headers and small body text.
Additional Thoughts
Shall I use a Question Mark or an Info Icon?
Besides the link destination, “?” is more used for links, while “i” is often next to a text label toggling a tooltip.
Consider other wonderful approaches:
Google set a new pattern with dashed underline to showcase tooltip content in a minimalistic way. This is an emerging pattern nowadays with minimum distraction on display while keeping the touch target accessible.
