Icons

Interaction icons and arrows.

Interaction icons

<span class="interaction-icon like"></span>
<span class="interaction-icon repost"></span>
<span class="interaction-icon reply"></span>
<span class="interaction-icon bookmark"></span>
<span class="interaction-icon link"></span>

Interaction icon — large

<span class="interaction-icon interaction-icon--large like"></span>

App icon

Rounded-square app icon for images representing an app. Add large for the bigger size used in article headers.

<img class="app-icon" src="/images/app-icons/1password.jpg" alt="1Password app icon">
<img class="app-icon large" src="/images/app-icons/1password.jpg" alt="1Password app icon">

Social icon

A link that pairs a 20px SVG glyph with a label. Used in author-card social links and footer meta.

<a href="{{ url }}" class="social-icon no-underline" title="{{ tooltip }}" target="_blank" rel="me external">
  {% include "components/icons/mastodon.svg" %}
  <p class="secondary-text small-text padding" style="--mult: 0;">{{ label }}</p>
</a>

Arrows

<p class="data-up"><span class="arrow">↑</span> 12%</p>
<p class="data-down"><span class="arrow">↓</span> 4%</p>