0
# Icon Metadata
1

2
Complete metadata system providing comprehensive information about all 5,945 icons including categories, tags, unicode values, version data, and style variant availability.
3

4
## Capabilities
5

6
### Icons Metadata File
7

8
Access to complete icon metadata for programmatic icon management and discovery.
9

10
```javascript { .api }
11
/**
12
 * Complete icon metadata import
13
 * Contains metadata for all 5,945 icons in a structured format
14
 */
15
import iconsData from "@tabler/icons/icons.json";
16

17
interface IconsData {
18
  [iconName: string]: IconMetadata;
19
}
20

21
interface IconMetadata {
22
  name: string;
23
  category: string;
24
  tags: string[];
25
  styles: {
26
    outline?: StyleInfo;
27
    filled?: StyleInfo;
28
  };
29
}
30

31
interface StyleInfo {
32
  version: string;
33
  unicode: string;
34
}
35
```
36

37
**Usage Examples:**
38

39
```javascript
40
import iconsData from "@tabler/icons/icons.json";
41

42
// Access specific icon metadata
43
const homeIcon = iconsData.home;
44
console.log(homeIcon.category); // "Buildings"
45
console.log(homeIcon.tags); // ["house", "building", "residence"]
46

47
// Check available styles
48
const hasOutline = homeIcon.styles.outline !== undefined;
49
const hasFilled = homeIcon.styles.filled !== undefined;
50

51
// Get version and unicode information
52
const outlineVersion = homeIcon.styles.outline?.version; // "1.0"
53
const outlineUnicode = homeIcon.styles.outline?.unicode; // "ea44"
54
```
55

56
### Category-based Filtering
57

58
Filter and organize icons by their categorical classification.
59

60
```javascript { .api }
61
/**
62
 * Filter icons by category
63
 * @param iconsData - Complete icons metadata object
64
 * @param categoryName - Category name to filter by
65
 * @returns Array of icons in the specified category
66
 */
67
function getIconsByCategory(iconsData: IconsData, categoryName: string): IconMetadata[];
68
```
69

70
**Usage Examples:**
71

72
```javascript
73
import iconsData from "@tabler/icons/icons.json";
74

75
// Get all icons in a specific category
76
const designIcons = Object.values(iconsData).filter(icon => 
77
  icon.category === 'Design'
78
);
79

80
const communicationIcons = Object.values(iconsData).filter(icon => 
81
  icon.category === 'Communication'
82
);
83

84
// Get all available categories
85
const categories = [...new Set(Object.values(iconsData).map(icon => icon.category))];
86

87
// Count icons per category
88
const categoryCounts = categories.reduce((acc, category) => {
89
  acc[category] = Object.values(iconsData).filter(icon => 
90
    icon.category === category
91
  ).length;
92
  return acc;
93
}, {});
94
```
95

96
### Tag-based Search
97

98
Search and filter icons using their associated tags for semantic discovery.
99

100
```javascript { .api }
101
/**
102
 * Search icons by tags
103
 * @param iconsData - Complete icons metadata object
104
 * @param searchTag - Tag to search for
105
 * @returns Array of icons containing the specified tag
106
 */
107
function getIconsByTag(iconsData: IconsData, searchTag: string): IconMetadata[];
108

109
/**
110
 * Search icons by multiple tags (AND operation)
111
 * @param iconsData - Complete icons metadata object
112
 * @param searchTags - Array of tags that must all be present
113
 * @returns Array of icons containing all specified tags
114
 */
115
function getIconsByTags(iconsData: IconsData, searchTags: string[]): IconMetadata[];
116
```
117

118
**Usage Examples:**
119

120
```javascript
121
import iconsData from "@tabler/icons/icons.json";
122

123
// Find icons with specific tag
124
const arrowIcons = Object.values(iconsData).filter(icon =>
125
  icon.tags.includes('arrow')
126
);
127

128
const userIcons = Object.values(iconsData).filter(icon =>
129
  icon.tags.includes('user')
130
);
131

132
// Find icons with multiple tags (AND)
133
const userManagementIcons = Object.values(iconsData).filter(icon =>
134
  icon.tags.includes('user') && icon.tags.includes('management')
135
);
136

137
// Find icons with any of multiple tags (OR)
138
const socialIcons = Object.values(iconsData).filter(icon =>
139
  ['social', 'share', 'communication'].some(tag => icon.tags.includes(tag))
140
);
141

142
// Get all unique tags
143
const allTags = [...new Set(Object.values(iconsData).flatMap(icon => icon.tags))];
144
```
145

146
### Style Availability Check
147

148
Determine which style variants are available for specific icons.
149

150
```javascript { .api }
151
/**
152
 * Check style availability for icons
153
 * @param iconMetadata - Metadata for a specific icon
154
 * @returns Object indicating available styles
155
 */
156
interface StyleAvailability {
157
  hasOutline: boolean;
158
  hasFilled: boolean;
159
  bothStyles: boolean;
160
  outlineOnly: boolean;
161
  filledOnly: boolean;
162
}
163

164
function getStyleAvailability(iconMetadata: IconMetadata): StyleAvailability;
165
```
166

167
**Usage Examples:**
168

169
```javascript
170
import iconsData from "@tabler/icons/icons.json";
171

172
// Check styles for specific icon
173
const homeIcon = iconsData.home;
174
const homeStyles = {
175
  hasOutline: homeIcon.styles.outline !== undefined,
176
  hasFilled: homeIcon.styles.filled !== undefined,
177
  bothStyles: homeIcon.styles.outline !== undefined && homeIcon.styles.filled !== undefined,
178
  outlineOnly: homeIcon.styles.outline !== undefined && homeIcon.styles.filled === undefined,
179
  filledOnly: homeIcon.styles.outline === undefined && homeIcon.styles.filled !== undefined
180
};
181

182
// Find icons available in both styles
183
const dualStyleIcons = Object.values(iconsData).filter(icon =>
184
  icon.styles.outline !== undefined && icon.styles.filled !== undefined
185
);
186

187
// Find outline-only icons
188
const outlineOnlyIcons = Object.values(iconsData).filter(icon =>
189
  icon.styles.outline !== undefined && icon.styles.filled === undefined
190
);
191

192
// Find filled-only icons
193
const filledOnlyIcons = Object.values(iconsData).filter(icon =>
194
  icon.styles.outline === undefined && icon.styles.filled !== undefined
195
);
196
```
197

198
### Version and Unicode Information
199

200
Access version history and unicode codepoints for each icon style.
201

202
```javascript { .api }
203
/**
204
 * Version and unicode information for icon styles
205
 */
206
interface StyleInfo {
207
  /** Version when this style was introduced or last modified */
208
  version: string;
209
  /** Unicode codepoint in hexadecimal format */
210
  unicode: string;
211
}
212

213
/**
214
 * Get unicode codepoint as number
215
 * @param unicodeHex - Hexadecimal unicode string
216
 * @returns Decimal unicode value
217
 */
218
function parseUnicode(unicodeHex: string): number;
219
```
220

221
**Usage Examples:**
222

223
```javascript
224
import iconsData from "@tabler/icons/icons.json";
225

226
// Get version information
227
const homeIcon = iconsData.home;
228
const outlineVersion = homeIcon.styles.outline?.version; // "1.0"
229
const filledVersion = homeIcon.styles.filled?.version; // "2.3"
230

231
// Get unicode information
232
const outlineUnicode = homeIcon.styles.outline?.unicode; // "ea44"
233
const filledUnicode = homeIcon.styles.filled?.unicode; // "f6eb"
234

235
// Convert unicode to decimal
236
const outlineCodepoint = parseInt(outlineUnicode, 16); // 60004
237
const filledCodepoint = parseInt(filledUnicode, 16); // 63211
238

239
// Find icons by version
240
const latestIcons = Object.values(iconsData).filter(icon =>
241
  (icon.styles.outline?.version === "3.34" || icon.styles.filled?.version === "3.34")
242
);
243

244
// Generate unicode character
245
const unicodeChar = String.fromCharCode(outlineCodepoint);
246
```
247

248
## Common Usage Patterns
249

250
### Icon Discovery Interface
251

252
Build icon picker interfaces using metadata for searching and categorization.
253

254
```javascript
255
import iconsData from "@tabler/icons/icons.json";
256

257
// Icon picker data structure
258
const iconPickerData = {
259
  categories: [...new Set(Object.values(iconsData).map(icon => icon.category))],
260
  tags: [...new Set(Object.values(iconsData).flatMap(icon => icon.tags))],
261
  icons: Object.values(iconsData)
262
};
263

264
// Search function for icon picker
265
function searchIcons(query) {
266
  const lowerQuery = query.toLowerCase();
267
  return Object.values(iconsData).filter(icon =>
268
    icon.name.includes(lowerQuery) ||
269
    icon.category.toLowerCase().includes(lowerQuery) ||
270
    icon.tags.some(tag => tag.toLowerCase().includes(lowerQuery))
271
  );
272
}
273

274
// Category navigation
275
function getIconsByCategory(category) {
276
  return Object.values(iconsData).filter(icon => icon.category === category);
277
}
278
```
279

280
### Dynamic Icon Loading
281

282
Combine metadata with dynamic loading for efficient icon management.
283

284
```javascript
285
import iconsData from "@tabler/icons/icons.json";
286

287
// Load icon with fallback
288
async function loadIconWithFallback(iconName, preferredStyle = 'outline') {
289
  const iconMeta = iconsData[iconName];
290
  if (!iconMeta) {
291
    throw new Error(`Icon "${iconName}" not found`);
292
  }
293

294
  // Check preferred style availability
295
  const hasPreferred = iconMeta.styles[preferredStyle] !== undefined;
296
  const fallbackStyle = preferredStyle === 'outline' ? 'filled' : 'outline';
297
  const hasFallback = iconMeta.styles[fallbackStyle] !== undefined;
298

299
  const styleToUse = hasPreferred ? preferredStyle : 
300
                     hasFallback ? fallbackStyle : null;
301

302
  if (!styleToUse) {
303
    throw new Error(`No styles available for icon "${iconName}"`);
304
  }
305

306
  return await import(`@tabler/icons/${styleToUse}/${iconName}.svg`);
307
}
308

309
// Preload icons by category
310
async function preloadCategoryIcons(category, style = 'outline') {
311
  const categoryIcons = Object.values(iconsData).filter(icon =>
312
    icon.category === category && icon.styles[style] !== undefined
313
  );
314

315
  const loadPromises = categoryIcons.map(icon =>
316
    import(`@tabler/icons/${style}/${icon.name}.svg`)
317
  );
318

319
  return await Promise.all(loadPromises);
320
}
321
```
322

323
### Icon Statistics
324

325
Generate statistics and insights about the icon library.
326

327
```javascript
328
import iconsData from "@tabler/icons/icons.json";
329

330
// Library statistics
331
const stats = {
332
  totalIcons: Object.keys(iconsData).length,
333
  outlineIcons: Object.values(iconsData).filter(icon => 
334
    icon.styles.outline !== undefined).length,
335
  filledIcons: Object.values(iconsData).filter(icon => 
336
    icon.styles.filled !== undefined).length,
337
  dualStyleIcons: Object.values(iconsData).filter(icon =>
338
    icon.styles.outline !== undefined && icon.styles.filled !== undefined).length,
339
  categories: [...new Set(Object.values(iconsData).map(icon => icon.category))].length,
340
  totalTags: [...new Set(Object.values(iconsData).flatMap(icon => icon.tags))].length
341
};
342

343
// Category distribution
344
const categoryDistribution = Object.values(iconsData).reduce((acc, icon) => {
345
  acc[icon.category] = (acc[icon.category] || 0) + 1;
346
  return acc;
347
}, {});
348

349
// Tag popularity
350
const tagPopularity = Object.values(iconsData)
351
  .flatMap(icon => icon.tags)
352
  .reduce((acc, tag) => {
353
    acc[tag] = (acc[tag] || 0) + 1;
354
    return acc;
355
  }, {});
356
```