Icon Link

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

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>