React SF Symbols Medium

A complete library of medium SF Symbols 27 for React.

What's included

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

Installation

npm add @andrilla/react-sf-medium

pnpm add @andrilla/react-sf-medium

bun add @andrilla/react-sf-medium

yarn add @andrilla/react-sf-medium

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

Usage

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

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

Frequently Asked Questions

See the FAQ.