0
# Storage Management
1

2
Functions for managing icon data in local storage, including loading, checking, and adding icons. The storage system maintains a local cache of loaded icons to improve performance and enable offline usage.
3

4
## Capabilities
5

6
### Check Icon Status
7

8
Check if an icon has been loaded and is available in local storage.
9

10
```typescript { .api }
11
/**
12
 * Check if icon data is loaded and available in storage
13
 * @param name - Icon name in format "prefix:name" or "@provider:prefix:name"
14
 * @returns true if icon is loaded, false otherwise
15
 */
16
function iconLoaded(name: string): boolean;
17
```
18

19
**Usage Examples:**
20

21
```typescript
22
import { iconLoaded } from "@iconify/react";
23

24
// Check if icon is loaded
25
if (iconLoaded("mdi:home")) {
26
  console.log("Icon is ready to use");
27
} else {
28
  console.log("Icon needs to be loaded");
29
}
30

31
// Check with provider
32
if (iconLoaded("@custom-provider:mdi:account")) {
33
  console.log("Custom provider icon is loaded");
34
}
35
```
36

37
### Get Icon Data
38

39
Retrieve loaded icon data from storage.
40

41
```typescript { .api }
42
/**
43
 * Get loaded icon data from storage
44
 * @param name - Icon name in format "prefix:name" or "@provider:prefix:name"
45
 * @returns Icon data if available, null if not loaded
46
 */
47
function getIcon(name: string): IconifyIcon | null;
48
```
49

50
**Usage Examples:**
51

52
```typescript
53
import { getIcon } from "@iconify/react";
54

55
// Get icon data
56
const iconData = getIcon("mdi:home");
57
if (iconData) {
58
  console.log("Icon dimensions:", iconData.width, "x", iconData.height);
59
  console.log("Icon SVG body:", iconData.body);
60
} else {
61
  console.log("Icon not found in storage");
62
}
63

64
// Use icon data directly in component
65
const homeIcon = getIcon("mdi:home");
66
if (homeIcon) {
67
  <Icon icon={homeIcon} />
68
}
69
```
70

71
### List Loaded Icons
72

73
Get a list of all loaded icons, optionally filtered by provider and prefix.
74

75
```typescript { .api }
76
/**
77
 * List loaded icons
78
 * @param provider - Optional provider to filter by (empty string for default provider)
79
 * @param prefix - Optional prefix to filter by
80
 * @returns Array of icon names that are loaded
81
 */
82
function listIcons(provider?: string, prefix?: string): string[];
83
```
84

85
**Usage Examples:**
86

87
```typescript
88
import { listIcons } from "@iconify/react";
89

90
// List all loaded icons
91
const allIcons = listIcons();
92
console.log("All loaded icons:", allIcons);
93

94
// List icons from specific prefix
95
const mdiIcons = listIcons("", "mdi");
96
console.log("MDI icons:", mdiIcons);
97

98
// List icons from custom provider
99
const customIcons = listIcons("custom-provider");
100
console.log("Custom provider icons:", customIcons);
101

102
// List icons from specific provider and prefix
103
const specificIcons = listIcons("custom-provider", "custom");
104
console.log("Specific icons:", specificIcons);
105
```
106

107
### Add Single Icon
108

109
Add a single icon to storage for later use by name.
110

111
```typescript { .api }
112
/**
113
 * Add single icon to storage
114
 * @param name - Icon name to use when referencing the icon
115
 * @param data - Icon data containing SVG and metadata
116
 * @returns true if icon was added successfully, false on error
117
 */
118
function addIcon(name: string, data: IconifyIcon): boolean;
119
```
120

121
**Usage Examples:**
122

123
```typescript
124
import { addIcon } from "@iconify/react";
125

126
// Add custom icon
127
const customIconData = {
128
  body: '<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>',
129
  width: 24,
130
  height: 24
131
};
132

133
const success = addIcon("my-star", customIconData);
134
if (success) {
135
  console.log("Icon added successfully");
136
  // Now can use: <Icon icon="my-star" />
137
}
138

139
// Add icon with prefix
140
addIcon("custom:star", customIconData);
141
// Use as: <Icon icon="custom:star" />
142

143
// Add icon from loaded data
144
const existingIcon = getIcon("mdi:home");
145
if (existingIcon) {
146
  addIcon("my-home", existingIcon);
147
}
148
```
149

150
### Add Icon Collection
151

152
Add multiple icons from an icon collection (icon set) to storage.
153

154
```typescript { .api }
155
/**
156
 * Add icon collection to storage
157
 * @param data - Icon collection data with prefix and icons
158
 * @param provider - Optional provider name, empty string for default
159
 * @returns true if collection was added successfully, false on error
160
 */
161
function addCollection(data: IconifyJSON, provider?: string): boolean;
162
```
163

164
**Usage Examples:**
165

166
```typescript
167
import { addCollection } from "@iconify/react";
168

169
// Add complete icon set
170
const iconSet = {
171
  prefix: "my-icons",
172
  icons: {
173
    star: {
174
      body: '<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>',
175
    },
176
    heart: {
177
      body: '<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>',
178
    },
179
    home: {
180
      body: '<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>',
181
    }
182
  },
183
  width: 24,
184
  height: 24
185
};
186

187
const success = addCollection(iconSet);
188
if (success) {
189
  console.log("Icon collection added");
190
  // Now can use: <Icon icon="my-icons:star" />
191
  // And: <Icon icon="my-icons:heart" />
192
  // And: <Icon icon="my-icons:home" />
193
}
194

195
// Add collection to custom provider
196
addCollection(iconSet, "my-provider");
197
// Use as: <Icon icon="@my-provider:my-icons:star" />
198
```
199

200
### Icon Collection Format
201

202
Complete interface for icon collection data used with `addCollection`.
203

204
```typescript { .api }
205
interface IconifyJSON {
206
  /** Prefix for all icons in this collection */
207
  prefix: string;
208
  
209
  /** Map of icon names to icon data */
210
  icons: Record<string, IconifyIcon>;
211
  
212
  /** Optional aliases that reference other icons */
213
  aliases?: Record<string, Partial<IconifyIcon> & { parent: string }>;
214
  
215
  /** Default width for all icons (can be overridden per icon) */
216
  width?: number;
217
  
218
  /** Default height for all icons (can be overridden per icon) */
219
  height?: number;
220
  
221
  /** Default left offset for all icons */
222
  left?: number;
223
  
224
  /** Default top offset for all icons */
225
  top?: number;
226
  
227
  /** Default horizontal flip for all icons */
228
  hFlip?: boolean;
229
  
230
  /** Default vertical flip for all icons */
231
  vFlip?: boolean;
232
  
233
  /** Default rotation for all icons */
234
  rotate?: number;
235
}
236

237
interface IconifyIcon {
238
  /** SVG content inside <svg> element */
239
  body: string;
240
  
241
  /** Icon width */
242
  width?: number;
243
  
244
  /** Icon height */
245
  height?: number;
246
  
247
  /** Left offset */
248
  left?: number;
249
  
250
  /** Top offset */
251
  top?: number;
252
  
253
  /** Horizontal flip */
254
  hFlip?: boolean;
255
  
256
  /** Vertical flip */
257
  vFlip?: boolean;
258
  
259
  /** Rotation in quarter-turns */
260
  rotate?: number;
261
}
262
```
263

264
### Storage Best Practices
265

266
```typescript
267
import { addIcon, addCollection, iconLoaded, getIcon } from "@iconify/react";
268

269
// Check before adding to avoid duplicates
270
if (!iconLoaded("custom:star")) {
271
  addIcon("custom:star", starIconData);
272
}
273

274
// Batch add related icons using collections
275
const uiIcons = {
276
  prefix: "ui",
277
  icons: {
278
    close: { body: '<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>' },
279
    check: { body: '<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>' },
280
    menu: { body: '<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>' }
281
  },
282
  width: 24,
283
  height: 24
284
};
285

286
addCollection(uiIcons);
287

288
// Verify icons are available
289
console.log("UI icons loaded:", listIcons("", "ui"));
290
```