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.
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.
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.
Don't increase the icon size because the link text size will appear smaller.
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.
Some text styles reduce in size on small screens. Learn more about typography on mobile
The icon and the link are always vertically-aligned.
The link has the same interaction states as a Link whereas the icon doesn't have any interaction states.
Link with icon uses space tokens to define spacing values between elements.
Related elements or patterns
To give feedback about anything on this page, contact us.