0
# Keystone UI Icons
1

2
Keystone UI Icons is a comprehensive React icon library providing 286 individual SVG icon components. Built on Feather Icons, it offers TypeScript support, responsive sizing capabilities, and seamless integration with the Keystone UI design system. Each icon is optimized for performance with proper accessibility attributes and customizable appearance.
3

4
## Package Information
5

6
- **Package Name**: @keystone-ui/icons
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @keystone-ui/icons`
10

11
## Core Imports
12

13
```typescript
14
import { ActivityIcon, IconProps } from "@keystone-ui/icons";
15
```
16

17
For multiple icons:
18

19
```typescript
20
import { 
21
  HomeIcon, 
22
  UserIcon, 
23
  SettingsIcon, 
24
  SearchIcon 
25
} from "@keystone-ui/icons";
26
```
27

28
CommonJS:
29

30
```javascript
31
const { HomeIcon, UserIcon, SettingsIcon } = require("@keystone-ui/icons");
32
```
33

34
## Basic Usage
35

36
```typescript
37
import React from "react";
38
import { HomeIcon, UserIcon, SettingsIcon } from "@keystone-ui/icons";
39

40
function App() {
41
  return (
42
    <div>
43
      {/* Basic usage with default size (medium = 24px) */}
44
      <HomeIcon />
45
      
46
      {/* Custom size using predefined tokens */}
47
      <UserIcon size="large" />
48
      
49
      {/* Custom color */}
50
      <SettingsIcon color="#3366cc" />
51
      
52
      {/* Custom numeric size */}
53
      <HomeIcon size={32} />
54
      
55
      {/* With additional SVG attributes */}
56
      <UserIcon 
57
        size="small" 
58
        color="red"
59
        className="my-icon"
60
        onClick={() => console.log("clicked")}
61
      />
62
    </div>
63
  );
64
}
65
```
66

67
## Architecture
68

69
Keystone UI Icons is built around several key components:
70

71
- **Base Icon System**: `createIcon` utility function that generates consistent React components with proper TypeScript types
72
- **Size Mapping**: Built-in responsive size system with predefined tokens (small to large) and custom numeric support
73
- **SVG Optimization**: Each icon uses optimized SVG with proper accessibility attributes (aria-hidden, role, focusable)
74
- **Forward Refs**: All icons support React refs for direct DOM access
75
- **Type Safety**: Full TypeScript integration with proper prop types and IntelliSense support
76

77
## Capabilities
78

79
### Icon Components
80

81
286 individual icon components based on Feather Icons, each accepting IconProps for customization.
82

83
```typescript { .api }
84
// Example icon components (all follow the same pattern)
85
const ActivityIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
86
const AirplayIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
87
const AlertCircleIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
88
const AlertOctagonIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
89
const AlertTriangleIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
90
const AlignCenterIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
91
const AlignJustifyIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
92
const AlignLeftIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
93
const AlignRightIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
94
const AnchorIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
95

96
// Navigation and UI Icons
97
const ArrowDownIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
98
const ArrowLeftIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
99
const ArrowRightIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
100
const ArrowUpIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
101
const ChevronDownIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
102
const ChevronLeftIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
103
const ChevronRightIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
104
const ChevronUpIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
105
const HomeIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
106
const MenuIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
107

108
// Action Icons
109
const CheckIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
110
const CheckCircleIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
111
const CheckSquareIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
112
const XIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
113
const XCircleIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
114
const XSquareIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
115
const PlusIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
116
const PlusCircleIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
117
const PlusSquareIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
118
const MinusIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
119
const MinusCircleIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
120
const MinusSquareIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
121

122
// Media and Content Icons
123
const PlayIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
124
const PlayCircleIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
125
const PauseIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
126
const PauseCircleIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
127
const StopCircleIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
128
const SkipBackIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
129
const SkipForwardIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
130
const VolumeIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
131
const Volume1Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
132
const Volume2Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
133
const VolumeXIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
134

135
// Communication Icons
136
const MailIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
137
const MessageCircleIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
138
const MessageSquareIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
139
const PhoneIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
140
const PhoneCallIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
141
const PhoneIncomingIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
142
const PhoneOutgoingIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
143
const PhoneMissedIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
144
const PhoneOffIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
145

146
// File and Document Icons
147
const FileIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
148
const FileTextIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
149
const FilePlusIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
150
const FileMinusIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
151
const FolderIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
152
const FolderPlusIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
153
const FolderMinusIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
154
const DownloadIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
155
const DownloadCloudIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
156
const UploadIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
157
const UploadCloudIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
158

159
// User and Social Icons
160
const UserIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
161
const UsersIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
162
const UserPlusIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
163
const UserMinusIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
164
const UserCheckIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
165
const UserXIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
166
const HeartIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
167
const StarIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
168
const ThumbsUpIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
169
const ThumbsDownIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
170

171
// Brand Icons
172
const GithubIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
173
const GitlabIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
174
const TwitterIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
175
const FacebookIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
176
const InstagramIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
177
const LinkedinIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
178
const YoutubeIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
179
const SlackIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
180
const TrelloIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
181
const FigmaIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
182

183
// System and Settings Icons
184
const SettingsIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
185
const ToolIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
186
const CogIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
187
const LockIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
188
const UnlockIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
189
const KeyIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
190
const ShieldIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
191
const ShieldOffIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
192
const EyeIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
193
const EyeOffIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
194

195
// Other Essential Icons (additional 200+ icons follow the same pattern)
196
const SearchIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
197
const FilterIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
198
const EditIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
199
const Edit2Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
200
const Edit3Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
201
const TrashIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
202
const Trash2Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
203
const CopyIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
204
const SaveIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
205
const LoaderIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
206
const RefreshCwIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
207
const RefreshCcwIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
208
const PowerIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
209
const LogInIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
210
const LogOutIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
211
```
212

213
**Complete Icon List (286 icon components):**
214

215
ActivityIcon, AirplayIcon, AlertCircleIcon, AlertOctagonIcon, AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, ApertureIcon, ArchiveIcon, ArrowDownIcon, ArrowDownCircleIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowLeftCircleIcon, ArrowRightIcon, ArrowRightCircleIcon, ArrowUpIcon, ArrowUpCircleIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, AwardIcon, BarChartIcon, BarChart2Icon, BatteryIcon, BatteryChargingIcon, BellIcon, BellOffIcon, BluetoothIcon, BoldIcon, BookIcon, BookOpenIcon, BookmarkIcon, BoxIcon, BriefcaseIcon, CalendarIcon, CameraIcon, CameraOffIcon, CastIcon, CheckIcon, CheckCircleIcon, CheckSquareIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloudIcon, CloudDrizzleIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, CodeIcon, CodepenIcon, CodesandboxIcon, CoffeeIcon, ColumnsIcon, CommandIcon, CompassIcon, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, DatabaseIcon, DeleteIcon, DiscIcon, DivideIcon, DivideCircleIcon, DivideSquareIcon, DollarSignIcon, DownloadIcon, DownloadCloudIcon, DribbbleIcon, DropletIcon, EditIcon, Edit2Icon, Edit3Icon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FigmaIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FolderMinusIcon, FolderPlusIcon, FramerIcon, FrownIcon, GiftIcon, GitBranchIcon, GitCommitIcon, GitMergeIcon, GitPullRequestIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HardDriveIcon, HashIcon, HeadphonesIcon, HeartIcon, HelpCircleIcon, HexagonIcon, HomeIcon, ImageIcon, InboxIcon, InfoIcon, InstagramIcon, ItalicIcon, KeyIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, LinkIcon, Link2Icon, LinkedinIcon, ListIcon, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MapIcon, MapPinIcon, MaximizeIcon, Maximize2Icon, MehIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, Minimize2Icon, MinusIcon, MinusCircleIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointerIcon, MoveIcon, MusicIcon, NavigationIcon, Navigation2Icon, OctagonIcon, PackageIcon, PaperclipIcon, PauseIcon, PauseCircleIcon, PenToolIcon, PercentIcon, PhoneIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayIcon, PlayCircleIcon, PlusIcon, PlusCircleIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, RadioIcon, RefreshCcwIcon, RefreshCwIcon, RepeatIcon, RewindIcon, RotateCcwIcon, RotateCwIcon, RssIcon, SaveIcon, ScissorsIcon, SearchIcon, SendIcon, ServerIcon, SettingsIcon, ShareIcon, Share2Icon, ShieldIcon, ShieldOffIcon, ShoppingBagIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SlackIcon, SlashIcon, SlidersIcon, SmartphoneIcon, SmileIcon, SpeakerIcon, SquareIcon, StarIcon, StopCircleIcon, SunIcon, SunriseIcon, SunsetIcon, TabletIcon, TagIcon, TargetIcon, TerminalIcon, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, ToggleLeftIcon, ToggleRightIcon, ToolIcon, TrashIcon, Trash2Icon, TrelloIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TruckIcon, TvIcon, TwitchIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadIcon, UploadCloudIcon, UserIcon, UserCheckIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VoicemailIcon, VolumeIcon, Volume1Icon, Volume2Icon, VolumeXIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XIcon, XCircleIcon, XOctagonIcon, XSquareIcon, YoutubeIcon, ZapIcon, ZapOffIcon, ZoomInIcon, ZoomOutIcon
216

217
### Icon Creator Utility
218

219
Factory function for creating custom icon components (primarily for internal use).
220

221
```typescript { .api }
222
/**
223
 * Creates a React icon component with consistent styling and behavior
224
 * @param children - SVG content for the icon
225
 * @param name - Display name for the component
226
 * @returns ForwardRef icon component with IconProps interface
227
 */
228
function createIcon(
229
  children: React.ReactNode, 
230
  name: string
231
): React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
232
```
233

234
## Types
235

236
```typescript { .api }
237
interface IconProps extends React.SVGAttributes<SVGSVGElement> {
238
  /** The color for the SVG stroke property (defaults to currentColor) */
239
  color?: string;
240
  /** 
241
   * The size for the icon. Can be a predefined size token or custom number.
242
   * Predefined sizes: "small" (16px), "smallish" (20px), "medium" (24px), 
243
   * "largish" (28px), "large" (32px). Default: "medium"
244
   */
245
  size?: ResponsiveProp<"small" | "smallish" | "medium" | "largish" | "large"> | number;
246
}
247

248
// Re-exported from @keystone-ui/core
249
type ResponsiveProp<T> = T | readonly (T | null)[];
250
```
251

252
## Usage Examples
253

254
### Basic Icon Usage
255

256
```typescript
257
import { HomeIcon, UserIcon } from "@keystone-ui/icons";
258

259
function Navigation() {
260
  return (
261
    <nav>
262
      <HomeIcon /> Home
263
      <UserIcon /> Profile
264
    </nav>
265
  );
266
}
267
```
268

269
### Size Variations
270

271
```typescript
272
import { SettingsIcon } from "@keystone-ui/icons";
273

274
function Settings() {
275
  return (
276
    <div>
277
      <SettingsIcon size="small" />   {/* 16px */}
278
      <SettingsIcon size="medium" />  {/* 24px - default */}
279
      <SettingsIcon size="large" />   {/* 32px */}
280
      <SettingsIcon size={40} />      {/* Custom size */}
281
    </div>
282
  );
283
}
284
```
285

286
### Responsive Sizing
287

288
```typescript
289
import { MenuIcon } from "@keystone-ui/icons";
290

291
function Header() {
292
  return (
293
    <MenuIcon 
294
      size={["small", "medium", "large"]}
295
    />
296
  );
297
}
298
```
299

300
### Custom Styling
301

302
```typescript
303
import { SearchIcon } from "@keystone-ui/icons";
304

305
function SearchButton() {
306
  const searchRef = useRef<SVGSVGElement>(null);
307
  
308
  return (
309
    <button>
310
      <SearchIcon
311
        ref={searchRef}
312
        color="#0066cc"
313
        size="smallish"
314
        className="search-icon"
315
        style={{ marginRight: '8px' }}
316
      />
317
      Search
318
    </button>
319
  );
320
}
321
```
322

323
### Dynamic Icons
324

325
```typescript
326
import { PlayIcon, PauseIcon } from "@keystone-ui/icons";
327

328
function MediaPlayer({ isPlaying }: { isPlaying: boolean }) {
329
  const IconComponent = isPlaying ? PauseIcon : PlayIcon;
330
  
331
  return (
332
    <button>
333
      <IconComponent size="medium" color="white" />
334
    </button>
335
  );
336
}
337
```