Icon Link 1.2.2

Use .velin-icon-link to create links with a leading or trailing icon, automatically aligned and spaced. Deutsch: icon-link-de

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Use Icon Link helpers/content styles for readable, accessible markup.

When not

Do not hide focusable controls with visually-hidden without a focusable path.

Basic example

Read more
Download

<a href="#" class="velin-icon-link">
  <velin-icon name="arrow-right" size="16"></velin-icon> Read more
</a>

<a href="#" class="velin-icon-link">
  Download <velin-icon name="download" size="16"></velin-icon>
</a>

Hover transform

Add .velin-icon-link--hover to animate the icon on hover (the icon shifts slightly).

Learn more

<a href="#" class="velin-icon-link velin-icon-link--hover">
  Learn more <velin-icon name="arrow-right" size="16"></velin-icon>
</a>