Skip to main content

  • Foundations
    • Border radius
    • Breakpoints
    • Colours
    • Colour scheme
    • Elevation
    • Focus and outline
    • Sizing and spacing
    • Layout
    • Motion
    • Typography
    • Z-index
  • Elements
    • Buttons
    • Code
    • Icons
    • Figure and caption
    • Forms
    • Links
    • Lists
    • Media
    • Tables
  • Components
    • Accordion
    • Alerts
    • Avatar
    • Blockquote
    • Breadcrumbs
    • Card
    • Chiplets
    • Details and summary
    • Dialog
    • Empty state
    • Stats
    • Global footer
    • Horizontal rule
    • Kanban
    • Key-value list
    • Meter
    • Objects
    • Pagination
    • Polka background
    • Post-it note
    • Progress
    • Speech bubbles
    • Status dot
    • Skeleton
    • Skip link
    • Spinner
    • Toggles
    • Tooltip
    • Webmentions
  • Patterns
    • Article header
    • Author card
    • App list and app sheet
    • Error page
    • Related posts
    • Search results
    • Utilities

John Peart

  • Search
  • Menu
John Peart

Icons

Interaction icons and arrows.

Interaction icons

42 likes

12 reposts

8 replies

3 bookmarks

5 mentions

<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.

Ivory app icon 1Password app icon Overcast app icon
<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.

Mastodon logo

Mastodon

BlueSky logo

Bluesky

Github logo

GitHub

<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

↑ 12%

↓ 4%

<p class="data-up"><span class="arrow">↑</span> 12%</p>
<p class="data-down"><span class="arrow">↓</span> 4%</p>
A line drawing of John Peart

John Peart

www.johnpe.art

Mastodon logo

Mastodon

BlueSky logo

Bluesky

LinkedIn logo

LinkedIn

Github logo

GitHub