Link with icon

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

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

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 icon size issue

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

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

Link with icon uses PatternFly 4 spacers to define spacing values between elements.

Link with icon spacing

For feedback and bug reports concerning PatternFly Elements components, create an issue in the GitHub repository.