0
# Graphics and Icons
1

2
Icon components, brand elements, and visual utilities. Note that the Icons component is deprecated in favor of the @storybook/icons package.
3

4
## Capabilities
5

6
### Icons Component (Deprecated)
7

8
Legacy icon component maintained for backward compatibility.
9

10
```typescript { .api }
11
interface IconsProps extends React.ComponentProps<'svg'> {
12
  /** Icon name/type to display */
13
  icon: IconType;
14
  /** Use symbol rendering instead of inline SVG */
15
  useSymbol?: boolean;
16
  /** Click handler */
17
  onClick?: () => void;
18
  /** Suppress deprecation warning (internal use) */
19
  __suppressDeprecationWarning?: boolean;
20
}
21

22
/**
23
 * Icon component (deprecated)
24
 * @deprecated No longer used, will be removed in Storybook 9.0
25
 * Please use the @storybook/icons package instead
26
 */
27
const Icons: React.ComponentType<IconsProps>;
28

29
/**
30
 * Available icon types from the legacy icon system
31
 * Maps to icon names that can be used with the Icons component
32
 */
33
type IconType = string; // Specific icon names from the legacy icon library
34

35
/**
36
 * Icon definitions mapping
37
 * Object containing all available icons in the legacy system
38
 */
39
const icons: Record<string, string>;
40
```
41

42
### Symbol Component
43

44
Symbol component for rendering icon symbols.
45

46
```typescript { .api }
47
/**
48
 * Symbol component for rendering icon symbols
49
 */
50
const Symbols: React.ComponentType<{
51
  /** Symbol configuration */
52
  [key: string]: any;
53
}>;
54
```
55

56
### Brand Components
57

58
Storybook brand elements for consistent branding across interfaces.
59

60
```typescript { .api }
61
/**
62
 * Storybook logo component with proper sizing and styling
63
 */
64
const StorybookLogo: React.ComponentType<{
65
  /** Logo size configuration */
66
  [key: string]: any;
67
}>;
68

69
/**
70
 * Storybook icon component (smaller brand mark)
71
 */
72
const StorybookIcon: React.ComponentType<{
73
  /** Icon size and styling configuration */
74
  [key: string]: any;
75
}>;
76
```
77

78
## Usage Examples
79

80
**Legacy Icons (Deprecated):**
81

82
```typescript
83
import { Icons } from "@storybook/components";
84

85
// Basic icon usage (shows deprecation warning)
86
<Icons icon="settings" />
87

88
// Icon with click handler
89
<Icons 
90
  icon="trash" 
91
  onClick={() => console.log('Delete clicked')}
92
/>
93

94
// Using symbol rendering
95
<Icons icon="home" useSymbol={true} />
96

97
// Suppress deprecation warning (not recommended)
98
<Icons 
99
  icon="info" 
100
  __suppressDeprecationWarning={true}
101
/>
102
```
103

104
**Modern Icon Usage (Recommended):**
105

106
```typescript
107
// Instead of the deprecated Icons component, use @storybook/icons:
108
import { SettingsIcon, TrashIcon, HomeIcon } from "@storybook/icons";
109

110
<SettingsIcon />
111
<TrashIcon onClick={() => console.log('Delete clicked')} />
112
<HomeIcon />
113
```
114

115
**Brand Components:**
116

117
```typescript
118
import { StorybookLogo, StorybookIcon } from "@storybook/components";
119

120
// Full Storybook logo
121
<StorybookLogo />
122

123
// Compact icon version
124
<StorybookIcon />
125
```
126

127
**Symbol Component:**
128

129
```typescript
130
import { Symbols } from "@storybook/components";
131

132
<Symbols />
133
```
134

135
## Migration from Icons Component
136

137
The Icons component is deprecated and will be removed in Storybook 9.0. Users should migrate to the @storybook/icons package:
138

139
**Before (deprecated):**
140
```typescript
141
import { Icons } from "@storybook/components";
142

143
<Icons icon="settings" onClick={handleClick} />
144
<Icons icon="trash" />
145
<Icons icon="home" />
146
```
147

148
**After (recommended):**
149
```typescript
150
import { SettingsIcon, TrashIcon, HomeIcon } from "@storybook/icons";
151

152
<SettingsIcon onClick={handleClick} />
153
<TrashIcon />
154
<HomeIcon />
155
```
156

157
## Available Legacy Icons
158

159
The legacy `icons` object contains mappings for various icon names. Common icons include:
160

161
- `settings` - Settings/configuration icon
162
- `trash` - Delete/remove icon  
163
- `home` - Home/dashboard icon
164
- `info` - Information icon
165
- `warning` - Warning/alert icon
166
- `error` - Error icon
167
- `success` - Success/checkmark icon
168
- `edit` - Edit/pencil icon
169
- `add` - Add/plus icon
170
- `remove` - Remove/minus icon
171

172
For a complete list of available icons, inspect the `icons` export:
173

174
```typescript
175
import { icons } from "@storybook/components";
176
console.log(Object.keys(icons)); // All available icon names
177
```
178

179
## Brand Guidelines
180

181
When using the brand components:
182

183
- Use `StorybookLogo` for primary branding and headers
184
- Use `StorybookIcon` for compact spaces like favicons or small UI elements
185
- Maintain proper spacing and sizing according to Storybook's brand guidelines
186
- Ensure sufficient contrast against backgrounds
187

188
## Integration Notes
189

190
Graphics components integrate with Storybook's theming system and automatically adapt to light/dark themes. The deprecated Icons component includes extensive deprecation warnings to guide migration to the modern @storybook/icons package.
191

192
All graphics components are optimized for performance and accessibility, including proper ARIA labels and scalable rendering at different sizes.