Skip to content



Informer is a pattern used to visually indicate hints within the interface. It is useful when there is limited space to add, for example, a hint link alongside a component.


The informer consists of the following elements:

  • Info icon with margin-left: 4px
  • Tooltip containing the hint message (appears upon hovering over the icon)


Avoid using the Info icon with the h1 title. This title typically pertains to hero blocks and similar elements. Adding hints to the main page title might seem unusual.

Info icon with different title sizes
Font sizeIcon sizeUsage
36px (--fs-700), 32px (--fs-600)LUse exclusively for the largest titles and controls.
Smaller than 24px (--fs-500)MSuitable for text sizes smaller than 24px.


Informer states
StateAppearance exampleStyles
Normalbackground-color: var(--icon-secondary-neutral)
HoverThe icon color doesn't change on hover. Only cursor changes to cursor: help.

Click zone

Informer click zone
Icon sizeTarget zone sizeAppearance example
L24px * 24px
M16px * 16px


For comprehensive details, refer to the Tooltip.

Usage in UX/UI

When the Info icon contains supplementary information about a control within a group of controls (for example, filters), pay attention to margins.

When controls are accompanied by text labels, position the Info icon adjacent to the labels.

Released under the MIT License.

Released under the MIT License.