React SF Symbols Large

A complete library of large SF Symbols 27 for React.

What's included

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

Installation

npm add @andrilla/react-sf-large

pnpm add @andrilla/react-sf-large

bun add @andrilla/react-sf-large

yarn add @andrilla/react-sf-large

deno add npm:@andrilla/react-sf-large

Usage

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

import SquareAndPencil from '@andrilla/react-sf-large/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
• @andrilla/react-sf-medium

Frequently Asked Questions

See the FAQ.