Info Icons

The convention leans toward a distinction — info implies 'here's additional context or a note' that's useful but not necessarily prompted by confusion, while help (question mark) implies 'I don't understand this, explain it'. If your product uses both, keeping this distinction consistent helps users predict what kind of content each icon reveals.

Blue is a common convention for informational messages specifically, especially in alert/banner systems that use a color scheme to distinguish message types (blue for info, yellow for warning, red for error, green for success). If your product doesn't use that color-coded alert pattern, a neutral color for a standalone info icon works fine too.

Info (circled 'i') signals neutral, helpful context with no urgency, while a warning icon (often a triangle with an exclamation mark) signals something that needs attention but isn't necessarily broken, and an error icon (often a circle with an X or exclamation) signals something has gone wrong. Using the correct icon for each severity level helps users gauge how seriously to treat a message at a glance.

This depends on how important the information is — a hover-triggered tooltip works well for supplementary details that aren't essential to complete a task, while always-visible inline text is better for information users need without an extra interaction step, since tooltips can be easy to miss, especially on touch devices.

Each icon keeps the license from its source library attached to it, and terms can differ depending on which library a specific icon comes from. Check the license shown on the individual icon's page before using it commercially.

Yes — if the icon triggers a tooltip on interaction, it should be focusable and operable via keyboard (typically with proper button semantics and an accessible label like 'aria-label="More information"'), so users relying on keyboard navigation or screen readers can access the same content as mouse users.