Brand Icons

The product mark, as an SVG component. The system ships no third-party logos: a service's mark is its owner's trademark, so take it from that service's own brand kit and hand it to the component that shows it, like Social Button's icon.

tsx

1import { LogoMark } from "@pestoui/core"

Sizes

The mark is 24px unless a size class says otherwise. It is drawn in strokes on a 24px grid, so it stays crisp at every step.

Monochrome

By default the mark is pinned to the foreground ink. monochrome releases it to currentColor, so it takes the text colour of whatever it sits on — muted text in the first row, an inverse surface in the second.

Props

Prop	Type	Default	Description
monochrome	boolean	—	Paint the mark in currentColor instead of the foreground ink.
className	string	—	Size and, with monochrome, colour. The mark is size-6 by default.
…props	SVGProps<SVGSVGElement>	—	Everything else lands on the svg. Pass aria-hidden when a label sits beside the mark, or aria-label when it stands alone.

PreviousBanner Next Breadcrumb

Pesto UI · 117 documented components