Link with icon
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
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.
Theme
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.
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.
Alignment
The icon and the link are always vertically-aligned.
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.
| Example | Token | Description |
|---|---|---|
| 16 | --rh-space-lg | 16px spacer |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
