Skip to Content
UI Components/Cupertino UI/Cupertino Icons

Cupertino Icons

iOS SF Symbols icon set with 1000+ icons

Framework

View in WebF Go

Download WebF Go to preview this component on devices and desktop.

Installation

Install
1npm install @openwebf/react-cupertino-ui

Usage

Icons.tsx
1import { CupertinoIcons, FlutterCupertinoIcon } from '@openwebf/react-cupertino-ui';
2
3export function IconsExample() {
4  return (
5    <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
6      <FlutterCupertinoIcon type={CupertinoIcons.star_fill} style={{ fontSize: 28 }} />
7      <FlutterCupertinoIcon type={CupertinoIcons.heart_fill} style={{ fontSize: 28, color: '#ff2d55' }} />
8      <FlutterCupertinoIcon type={CupertinoIcons.search} style={{ fontSize: 28 }} />
9    </div>
10  );
11}

API Reference

Props (React)

NameTypeDefaultDescription
typeCupertinoIcons-Icon key (SF Symbols mapping).
labelstring-Accessibility label.
Full type definitions: npm package docs.