Ask Claude CodeAsk Codex

Icons

SVG icons placed next to text in buttons, links, and breadcrumbs. For an animated chevron, use ChevronToArrow or the Expand chevron.

Installation

bun add @harmo-ui/css @harmo-ui/react

Usage

import { Chevron, Link } from "@harmo-ui/react";

<Link href="/settings">
  Settings
  <Chevron />
</Link>

Examples

This site is using your theme

Static chevron

The chevron is drawn in the middle third of its box. .hchevron pulls it in so the gap to the text matches other icons: the first link has the class, and the second, without it, leaves a wider gap.

SettingsSettings
<>
  <Link href="/settings">
    Settings
    <Chevron />
  </Link>
  <Link href="/settings">
    Settings
    <ChevronIcon className="hicon" />
  </Link>
</>

Following the text

Sized in em and drawn in currentColor, an icon takes the size and color of the text beside it. .hicon keeps it from shrinking, and aria-hidden="true" leaves the naming to the text.

SettingsSettingsSettings
<>
  <Link href="/settings" style={{ fontSize: "0.875rem" }}>
    Settings
    <Chevron />
  </Link>
  <Link href="/settings">
    Settings
    <Chevron />
  </Link>
  <Link href="/settings" style={{ fontSize: "1.25rem" }}>
    Settings
    <Chevron />
  </Link>
</>

Direction

The static chevron points forward, toward the end of the line. data-direction="back" points it toward the start, as for a previous-month button.

<>
  <Button variant="tertiary" aria-label="Previous month">
    <Chevron direction="back" />
  </Button>
  <Button variant="tertiary" aria-label="Next month">
    <Chevron />
  </Button>
</>

Right to left

The same chevrons in Arabic. Both mirror: forward points left, toward the end of the line, and back points right.

الإعدادات
<>
  <Link href="/settings">
    الإعدادات
    <Chevron />
  </Link>
  <Button variant="tertiary" aria-label="الشهر السابق">
    <Chevron direction="back" />
  </Button>
  <Button variant="tertiary" aria-label="الشهر التالي">
    <Chevron />
  </Button>
</>

API reference

React

<Chevron> draws the static chevron, with .hicon and .hchevron. Give your own icons className="hicon", aria-hidden="true", and focusable="false". Other props are the <svg>'s attributes.

PropEffect
directionback points it toward the start of the line; forward when left out

HTML

An <svg class="hicon">, a direct child of its button, link, or other container, with aria-hidden="true", focusable="false", and a width and height in em, unless its container sizes it. There's no icons.css: it uses the container's CSS, such as button.css or link.css, and chevron.css for .hchevron. It needs no script.

  • Size icons in em so they follow the text size. 1.125em puts the chevron at about cap height.
  • Draw with fill="currentColor" or stroke="currentColor" so icons follow the text color.
  • Breadcrumb separators use the static chevron with class="hbreadcrumb-separator hchevron".
HookEffect
.hiconMarks an icon for its container: buttons, links, and filter chips keep it from shrinking, and links switch to an icon layout
.hchevronPulls the static chevron in by 0.1875em on both sides; leave it off any other glyph
data-direction="back" on .hchevronPoints the static chevron toward the start of the line, as for a previous-month button; it points toward the end when left out

See Icons' full contract.

Accessibility

Icons next to text are decorative: aria-hidden="true" and focusable="false", with the text carrying the meaning. A control with only an icon needs its own name; see Button's icon-only buttons.