Link with icon

  1. Overview
  2. Sample pattern
  3. Style
  4. Usage
  5. Best practices
  6. Behavior
  7. Interaction states
  8. Spacing
  1. Overview
  2. Sample pattern
  3. Style
  4. Usage
  5. Best practices
  6. Behavior
  7. Interaction states
  8. Spacing

Overview

Link with icon features an icon that adds context to the link itself. It’s positioned to the left or on top of a link, depending on orientation.

Sample pattern

Link with icon

Style

Link with icon is available in light and dark themes. It’s a grouping of a small icon near a link, similar to how a list item is a grouping of a bullet point near text. The icon chosen should represent what a user will get when they click on or tap the link. It acts as a functional addition instead of only visual.

Link with icon specs

Theme

Link with icon theme light Link with icon theme dark

Usage

Use link with icon to increase the visual interest of a link without using a call to action style. Link with icon can replace links that are used on their own, but not in a paragraph of text.

Best practices

Don't increase the icon size because the link text size will appear smaller.

Link with icon icon size issue

Behavior

Responsive design

Link with icon can be used on large and small screens. When the width of the link exceeds the width of its container, the text will break to two lines.

Link with icon responsive desktop
Link with icon responsive mobile
Some text styles reduce in size on small screens. Learn more about typography on mobile

Alignment

The icon and the link are always vertically-aligned.

Link with icon alignment Link with icon alignment

Interaction states

The link has the same interaction states as a Link whereas the icon doesn't have any interaction states.

Spacing

Link with icon uses space tokens to define spacing values between elements.

Link with icon spacing
Example Token Description
16 --rh-space-lg 16px spacer