Help Icons

A circled question mark is the more common convention, since the circle gives it a clear boundary and makes it read more like a clickable button rather than punctuation. A bare question mark without a frame can look ambiguous, especially next to text, so the circled version is generally the safer default for interactive help triggers.

This depends on how much explanation is needed — a small tooltip works well for a short, one-line clarification next to a form field, while a modal or dedicated help page is better suited to longer explanations, step-by-step guidance, or full documentation. Matching the interaction to the content length keeps the experience from feeling either too sparse or too heavy.

They're often used similarly, but the convention leans toward a distinction — help (question mark) implies 'I don't understand this, explain it', while info (lowercase i) implies 'here's additional context or a note', which isn't necessarily prompted by confusion. If your product uses both, keeping this distinction consistent helps users predict what kind of content each icon reveals.

Placing it immediately next to (usually after) the label or field it explains is the most common and clearest pattern, since it keeps the connection between the icon and its context obvious. Grouping all help links separately (like in a corner menu) works better for general product help rather than field-specific explanations.

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 or modal, it should be focusable and operable via keyboard (typically with proper button semantics and an accessible label like 'aria-label="Help"'), so users relying on keyboard navigation or screen readers can access the same explanation as mouse users.