9 results

Preview
Arrow Icon
Arrow pointing forward
Preview
Check Icon
A completion mark from one polyline
Preview
Chevron Icon
A line-only chevron
Preview
Close Icon
A crossing close mark
Preview
Heart Icon
A heart from two arcs
Preview
Mail Icon
A mail mark from an envelope outline
Preview
Menu Icon
A three-line menu
Preview
Play Icon
A play mark from one triangle
Preview
Search Icon
A search mark from a circle and a line

Play Icon

A play mark from one triangle

Preview

PaletteSwiss

HTML

<figure>
  <svg viewBox="0 0 24 24" width="72" height="72" aria-hidden="true">
    <path fill="currentColor" d="M8 5v14l12-7z" />
  </svg>
  <figcaption>Play</figcaption>
</figure>

CSS

:root {
  --ink: #111111;
  --paper: #ffffff;
  --accent: #e10600;
  --accent-2: #111111;
  --on-accent: #ffffff;
  --muted: #5c5c5c;
  --line: #111111;
  --chip: #f2f2f2;
}

figure { margin: 0; text-align: center; color: var(--ink); }
figcaption { margin-top: 0.4rem; font-weight: 700; }

Tailwind

<style>
:root {
  --ink: #111111;
  --paper: #ffffff;
  --accent: #e10600;
  --accent-2: #111111;
  --on-accent: #ffffff;
  --muted: #5c5c5c;
  --line: #111111;
  --chip: #f2f2f2;
}
</style>
<figure class="m-0 text-center text-[var(--ink)]">
  <svg viewBox="0 0 24 24" width="72" height="72" aria-hidden="true">
    <path fill="currentColor" d="M8 5v14l12-7z" />
  </svg>
  <figcaption class="mt-[0.4rem] font-bold">Play</figcaption>
</figure>