0
# Icons & Theming
1

2
Built-in SVG icon components and comprehensive theming system with CSS variables and passthrough customization.
3

4
## Capabilities
5

6
### Icon System
7

8
PrimeReact includes 47 built-in SVG icon components for common UI interactions and states.
9

10
```typescript { .api }
11
/**
12
 * Base icon component interface
13
 * @param props - Icon configuration options
14
 * @returns JSX element
15
 */
16
interface IconProps {
17
  /** CSS class name */
18
  className?: string;
19
  /** Inline styles */
20
  style?: React.CSSProperties;
21
  /** Click event handler */
22
  onClick?: (e: React.MouseEvent<SVGSVGElement>) => void;
23
  /** Icon spin animation */
24
  spin?: boolean;
25
}
26

27
/**
28
 * Base icon component
29
 * @param props - IconBase configuration options
30
 * @returns JSX element
31
 */
32
function IconBase(props: IconBaseProps): JSX.Element;
33

34
interface IconBaseProps extends IconProps {
35
  /** SVG path data */
36
  pathData?: string;
37
  /** ViewBox dimensions */
38
  viewBox?: string;
39
}
40
```
41

42
### Available Icons
43

44
All icon components follow the same interface and naming pattern:
45

46
```typescript { .api }
47
// Navigation Icons
48
function AngleDownIcon(props: IconProps): JSX.Element;
49
function AngleLeftIcon(props: IconProps): JSX.Element;
50
function AngleRightIcon(props: IconProps): JSX.Element;
51
function AngleUpIcon(props: IconProps): JSX.Element;
52
function AngleDoubleDownIcon(props: IconProps): JSX.Element;
53
function AngleDoubleLeftIcon(props: IconProps): JSX.Element;
54
function AngleDoubleRightIcon(props: IconProps): JSX.Element;
55
function AngleDoubleUpIcon(props: IconProps): JSX.Element;
56
function ChevronDownIcon(props: IconProps): JSX.Element;
57
function ChevronLeftIcon(props: IconProps): JSX.Element;
58
function ChevronRightIcon(props: IconProps): JSX.Element;
59
function ChevronUpIcon(props: IconProps): JSX.Element;
60
function ArrowDownIcon(props: IconProps): JSX.Element;
61
function ArrowUpIcon(props: IconProps): JSX.Element;
62

63
// Action Icons
64
function CheckIcon(props: IconProps): JSX.Element;
65
function TimesIcon(props: IconProps): JSX.Element;
66
function PlusIcon(props: IconProps): JSX.Element;
67
function MinusIcon(props: IconProps): JSX.Element;
68
function SearchIcon(props: IconProps): JSX.Element;
69
function SearchPlusIcon(props: IconProps): JSX.Element;
70
function SearchMinusIcon(props: IconProps): JSX.Element;
71
function RefreshIcon(props: IconProps): JSX.Element;
72
function PencilIcon(props: IconProps): JSX.Element;
73
function TrashIcon(props: IconProps): JSX.Element;
74
function UndoIcon(props: IconProps): JSX.Element;
75
function UploadIcon(props: IconProps): JSX.Element;
76

77
// Status Icons
78
function BanIcon(props: IconProps): JSX.Element;
79
function ExclamationTriangleIcon(props: IconProps): JSX.Element;
80
function InfoCircleIcon(props: IconProps): JSX.Element;
81
function TimesCircleIcon(props: IconProps): JSX.Element;
82
function SpinnerIcon(props: IconProps): JSX.Element;
83

84
// UI Icons
85
function BarsIcon(props: IconProps): JSX.Element;
86
function CalendarIcon(props: IconProps): JSX.Element;
87
function EyeIcon(props: IconProps): JSX.Element;
88
function EyeSlashIcon(props: IconProps): JSX.Element;
89
function FilterIcon(props: IconProps): JSX.Element;
90
function FilterSlashIcon(props: IconProps): JSX.Element;
91
function StarIcon(props: IconProps): JSX.Element;
92
function StarFillIcon(props: IconProps): JSX.Element;
93
function ThLargeIcon(props: IconProps): JSX.Element;
94
function WindowMaximizeIcon(props: IconProps): JSX.Element;
95
function WindowMinimizeIcon(props: IconProps): JSX.Element;
96

97
// Sort Icons
98
function SortAltIcon(props: IconProps): JSX.Element;
99
function SortAmountDownIcon(props: IconProps): JSX.Element;
100
function SortAmountUpAltIcon(props: IconProps): JSX.Element;
101
```
102

103
**Usage Examples:**
104

105
```typescript
106
import { SearchIcon, PlusIcon, CheckIcon } from "primereact/icons/search";
107
import { PlusIcon } from "primereact/icons/plus";
108
import { CheckIcon } from "primereact/icons/check";
109

110
// Basic icon usage
111
<SearchIcon />
112

113
// Icon with custom styling
114
<PlusIcon className="text-blue-500" style={{ fontSize: '1.5rem' }} />
115

116
// Icon with click handler
117
<CheckIcon onClick={() => console.log('Checked!')} />
118

119
// Spinning icon
120
<SpinnerIcon spin />
121
```
122

123
### Passthrough System
124

125
Comprehensive theming system allowing deep customization of component DOM structure and styling.
126

127
```typescript { .api }
128
/**
129
 * Global passthrough configuration interface
130
 */
131
interface PassThroughOptions {
132
  /** Root element customization */
133
  root?: PassThroughType<object>;
134
  /** Input element customization */
135
  input?: PassThroughType<object>;
136
  /** Panel element customization */
137
  panel?: PassThroughType<object>;
138
  /** Header element customization */
139
  header?: PassThroughType<object>;
140
  /** Content element customization */
141
  content?: PassThroughType<object>;
142
  /** Footer element customization */
143
  footer?: PassThroughType<object>;
144
  /** Custom element customization */
145
  [key: string]: PassThroughType<object> | undefined;
146
}
147

148
/**
149
 * Passthrough type supporting static values or dynamic functions
150
 */
151
type PassThroughType<T> = T | ((options: PassThroughMethodOptions) => T);
152

153
/**
154
 * Context provided to passthrough functions
155
 */
156
interface PassThroughMethodOptions {
157
  /** Component props */
158
  props: any;
159
  /** Component state */
160
  state: any;
161
  /** Component context */
162
  context: any;
163
  /** Parent component info */
164
  parent: {
165
    props: any;
166
    state: any;
167
    context: any;
168
  };
169
  /** Global configuration */
170
  global: {
171
    ptOptions: any;
172
  };
173
}
174

175
/**
176
 * Global passthrough configuration
177
 */
178
interface PrimeReactPTOptions {
179
  /** Merge strategy for passthrough objects */
180
  mergeProps?: boolean;
181
  /** CSS transition class names */
182
  cssTransition?: {
183
    /** Timeout duration */
184
    timeout?: number;
185
    /** CSS class names for transition states */
186
    classNames?: {
187
      appear?: string;
188
      appearActive?: string;
189
      appearDone?: string;
190
      enter?: string;
191
      enterActive?: string;
192
      enterDone?: string;
193
      exit?: string;
194
      exitActive?: string;
195
      exitDone?: string;
196
    };
197
  };
198
}
199
```
200

201
**Usage Examples:**
202

203
```typescript
204
import { Button } from "primereact/button";
205
import { InputText } from "primereact/inputtext";
206

207
// Basic passthrough usage
208
<Button 
209
  label="Submit"
210
  pt={{
211
    root: { className: 'my-custom-button' },
212
    label: { style: { color: 'red' } }
213
  }}
214
/>
215

216
// Dynamic passthrough with function
217
<InputText
218
  pt={{
219
    root: ({ props, state }) => ({
220
      className: `custom-input ${props.invalid ? 'invalid' : ''}`,
221
      'data-state': state.focused ? 'focused' : 'blurred'
222
    })
223
  }}
224
/>
225

226
// Global passthrough configuration
227
import { PrimeReactAPI } from "primereact/api";
228

229
PrimeReactAPI.ptOptions = {
230
  mergeProps: true,
231
  cssTransition: {
232
    timeout: 300,
233
    classNames: {
234
      enter: 'fade-enter',
235
      enterActive: 'fade-enter-active',
236
      exit: 'fade-exit',
237
      exitActive: 'fade-exit-active'
238
    }
239
  }
240
};
241
```
242

243
### Tailwind Integration
244

245
Pre-configured Tailwind CSS passthrough options for rapid styling with utility classes.
246

247
```typescript { .api }
248
/**
249
 * Tailwind CSS passthrough configuration
250
 */
251
interface TailwindPassThrough {
252
  /** Global Tailwind passthrough options */
253
  global?: PassThroughOptions;
254
  /** Component-specific Tailwind options */
255
  [componentName: string]: PassThroughOptions;
256
}
257

258
/**
259
 * Import Tailwind passthrough configuration
260
 */
261
import { Tailwind } from "primereact/passthrough/tailwind";
262
```
263

264
**Usage Examples:**
265

266
```typescript
267
import { PrimeReactAPI } from "primereact/api";
268
import { Tailwind } from "primereact/passthrough/tailwind";
269

270
// Apply Tailwind passthrough globally
271
PrimeReactAPI.ptOptions = {
272
  pt: Tailwind
273
};
274

275
// Or apply to specific components
276
<Button 
277
  label="Tailwind Button"
278
  pt={Tailwind.button}
279
/>
280
```
281

282
### Theme Configuration
283

284
Global theming system with CSS variables and styled/unstyled modes.
285

286
```typescript { .api }
287
/**
288
 * Theme configuration interface
289
 */
290
interface ThemeConfiguration {
291
  /** Theme name */
292
  theme?: string;
293
  /** Unstyled mode */
294
  unstyled?: boolean;
295
  /** CSS module support */
296
  cssModule?: boolean;
297
  /** Theme CSS import */
298
  importTheme?: () => Promise<any>;
299
}
300

301
/**
302
 * Apply theme configuration
303
 */
304
interface PrimeReactThemeAPI {
305
  /** Current theme name */
306
  theme: string;
307
  /** Unstyled mode enabled */
308
  unstyled: boolean;
309
  /** Change theme dynamically */
310
  changeTheme: (currentTheme: string, newTheme: string, linkElementId?: string) => void;
311
}
312
```
313

314
**Usage Examples:**
315

316
```typescript
317
// Enable unstyled mode
318
import { PrimeReactAPI } from "primereact/api";
319

320
PrimeReactAPI.unstyled = true;
321

322
// Dynamic theme switching
323
import { changeTheme } from "primereact/api";
324

325
// Switch from light to dark theme
326
changeTheme('saga-blue', 'vela-blue', 'theme-link');
327

328
// CSS Variables (in your CSS)
329
:root {
330
  --primary-color: #007ad9;
331
  --primary-color-text: #ffffff;
332
  --surface-0: #ffffff;
333
  --surface-50: #fafafa;
334
  --surface-100: #f5f5f5;
335
  /* ... more variables */
336
}
337
```
338

339
### Styling Modes
340

341
PrimeReact supports multiple styling approaches for maximum flexibility.
342

343
```typescript { .api }
344
/**
345
 * Styling mode configuration
346
 */
347
interface StylingMode {
348
  /** Styled mode with themes */
349
  styled?: {
350
    /** Theme name */
351
    theme: string;
352
    /** Theme CSS URL */
353
    url?: string;
354
  };
355
  /** Unstyled mode with custom CSS */
356
  unstyled?: {
357
    /** Passthrough options */
358
    pt?: PassThroughOptions;
359
    /** CSS module classes */
360
    cx?: (classes: string[]) => string;
361
  };
362
}
363
```
364

365
**Available Themes:**
366

367
- **Light Themes**: saga-blue, saga-green, saga-orange, saga-purple
368
- **Dark Themes**: vela-blue, vela-green, vela-orange, vela-purple
369
- **Material Design**: md-light-indigo, md-light-deeppurple, md-dark-indigo, md-dark-deeppurple
370
- **Bootstrap**: bootstrap4-light-blue, bootstrap4-light-purple, bootstrap4-dark-blue, bootstrap4-dark-purple
371
- **Custom**: Fully customizable with CSS variables
372

373
**CSS Import Examples:**
374

375
```typescript
376
// Theme CSS imports
377
import "primereact/resources/themes/saga-blue/theme.css";
378
import "primereact/resources/primereact.min.css";
379
import "primeicons/primeicons.css";
380

381
// Or dynamic import
382
const loadTheme = async (theme: string) => {
383
  await import(`primereact/resources/themes/${theme}/theme.css`);
384
};
385
```