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

Arrow Icon

Arrow pointing forward

Preview

PaletteDarkMonoWarm

HTML

<figure>
      <svg viewBox="0 0 24 24" width="72" height="72" aria-hidden="true">
        <path fill="none" stroke="currentColor" stroke-width="2" d="M5 12h14M13 6l6 6-6 6"/>
      </svg>
      <figcaption>Arrow</figcaption>
    </figure>

CSS

:root {
  --ink: #241c16;
  --paper: #fffaf1;
  --accent: #d4552b;
  --accent-2: #4338ca;
  --on-accent: #fff;
  --muted: #6a6156;
  --line: #d7ccb8;
  --chip: #efe6d6;
}

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

Tailwind

<style>
:root {
  --ink: #241c16;
  --paper: #fffaf1;
  --accent: #d4552b;
  --accent-2: #4338ca;
  --on-accent: #fff;
  --muted: #6a6156;
  --line: #d7ccb8;
  --chip: #efe6d6;
}
</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="none" stroke="currentColor" stroke-width="2" d="M5 12h14M13 6l6 6-6 6"/>
      </svg>
      <figcaption class="mt-[0.4rem] font-bold">Arrow</figcaption>
    </figure>