React SF Symbols

A complete library of small SF Symbols 27 for React.

What's included

This package includes 6,577 small symbols. Every symbol supports nine weights.

Installation

npm add @andrilla/react-sf

pnpm add @andrilla/react-sf

bun add @andrilla/react-sf

yarn add @andrilla/react-sf

deno add npm:@andrilla/react-sf

The medium and large variants are available from @andrilla/react-sf-medium and @andrilla/react-sf-large.

Usage

Each symbol is a default export. Import it using its SF Symbols name:

import SquareAndPencil from '@andrilla/react-sf/square.and.pencil'

export function MyComponent() {
	return <SquareAndPencil weight='semibold' />
}

Weights

• ultralight
• thin
• light
• regular
• medium
• semibold
• bold
• heavy
• black

Each symbol renders a standard <svg> element.

Recommended CSS

svg {
	fill: currentcolor;
	stroke: currentcolor;
	stroke-width: 0;
}

For use alongside buttons and links:

a,
button {
	&:has(> svg) {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: calc(var(--spacing) * 2);
	}
}

Ownership

All symbols are created and owned by Apple Inc. and are subject to their terms of use. Only symbols that Apple allows for SVG template export are included.

Related packages

• @andrilla/react-sf-medium
• @andrilla/react-sf-large

Frequently Asked Questions

See the FAQ.