The Icon component provides a flexible way to display SVG icons in your application, with support for both a built-in icon set and custom SVG files.
Basic usage
Use built-in icons by name:
import { FlxIcon } from '@flowx/react-ui-toolkit';
function BasicIcon() {
return <FlxIcon name="home" />;
}
Common icons
Here are some commonly used built-in icons:
import { FlxIcon } from '@flowx/react-ui-toolkit';
function CommonIcons() {
return (
<div style={{ display: 'flex', gap: '16px' }}>
<FlxIcon name="home" />
<FlxIcon name="settings" />
<FlxIcon name="user" />
<FlxIcon name="search" />
<FlxIcon name="menu" />
<FlxIcon name="close" />
<FlxIcon name="check" />
<FlxIcon name="edit" />
<FlxIcon name="delete" />
<FlxIcon name="plus" />
<FlxIcon name="arrowRight" />
<FlxIcon name="arrowLeft" />
</div>
);
}
Custom SVG path
Load icons from custom SVG files:
import { FlxIcon } from '@flowx/react-ui-toolkit';
function CustomIcon() {
return (
<FlxIcon
path="/assets/icons/custom-icon.svg"
onIconLoad={(success) => {
if (success) {
console.log('Icon loaded successfully');
} else {
console.error('Failed to load icon');
}
}}
/>
);
}
When using the path prop, it takes precedence over the name prop. The path should point to an SVG file accessible from your application.
Icon sizing
Control icon size with CSS:
import { FlxIcon } from '@flowx/react-ui-toolkit';
function SizedIcons() {
return (
<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
<FlxIcon
name="star"
style={{ width: '16px', height: '16px' }}
/>
<FlxIcon
name="star"
style={{ width: '24px', height: '24px' }}
/>
<FlxIcon
name="star"
style={{ width: '32px', height: '32px' }}
/>
<FlxIcon
name="star"
style={{ width: '48px', height: '48px' }}
/>
</div>
);
}
Icon colors
Style icons with CSS color properties:
import { FlxIcon } from '@flowx/react-ui-toolkit';
function ColoredIcons() {
return (
<div style={{ display: 'flex', gap: '16px' }}>
<FlxIcon
name="heart"
style={{ color: '#ef4444' }}
/>
<FlxIcon
name="star"
style={{ color: '#fbbf24' }}
/>
<FlxIcon
name="checkCircle"
style={{ color: '#10b981' }}
/>
<FlxIcon
name="info"
style={{ color: '#3b82f6' }}
/>
</div>
);
}
Interactive icons
Make icons clickable:
import { FlxIcon } from '@flowx/react-ui-toolkit';
function ClickableIcon() {
const handleClick = (event) => {
console.log('Icon clicked!', event);
};
return (
<FlxIcon
name="settings"
onClick={handleClick}
style={{ cursor: 'pointer' }}
role="button"
tabIndex={0}
aria-label="Settings"
/>
);
}
When making icons interactive, always include proper ARIA attributes like role="button" and aria-label for accessibility.
import { FlxButton, FlxIcon } from '@flowx/react-ui-toolkit';
function ButtonWithIcon() {
return (
<div style={{ display: 'flex', gap: '8px', flexDirection: 'column' }}>
<FlxButton
variant="fill"
icon="left"
iconComponent={<FlxIcon name="plus" />}
>
Add Item
</FlxButton>
<FlxButton
variant="ghost"
icon="right"
iconComponent={<FlxIcon name="arrowRight" />}
>
Continue
</FlxButton>
<FlxButton
variant="text"
icon="center"
iconComponent={<FlxIcon name="close" />}
aria-label="Close"
/>
</div>
);
}
Icon with loading state
Handle icon loading with callbacks:
import { FlxIcon } from '@flowx/react-ui-toolkit';
import { useState } from 'react';
function LoadingIcon() {
const [isLoading, setIsLoading] = useState(true);
const [loadError, setLoadError] = useState(false);
const handleIconLoad = (success) => {
setIsLoading(false);
if (!success) {
setLoadError(true);
}
};
return (
<div>
{isLoading && <span>Loading icon...</span>}
{loadError && <span>Failed to load icon</span>}
<FlxIcon
path="/assets/custom-icon.svg"
onIconLoad={handleIconLoad}
style={{ display: loadError ? 'none' : 'block' }}
/>
</div>
);
}
Custom styling
Apply custom classes and styles:
import { FlxIcon } from '@flowx/react-ui-toolkit';
function StyledIcon() {
return (
<FlxIcon
name="notification"
className="notification-icon"
style={{
width: '24px',
height: '24px',
color: '#3b82f6',
backgroundColor: '#dbeafe',
borderRadius: '50%',
padding: '8px'
}}
/>
);
}
Icon reference forwarding
Access the underlying DOM element:
import { FlxIcon } from '@flowx/react-ui-toolkit';
import { useRef, useEffect } from 'react';
function IconWithRef() {
const iconRef = useRef(null);
useEffect(() => {
if (iconRef.current) {
console.log('Icon element:', iconRef.current);
}
}, []);
return (
<FlxIcon
ref={iconRef}
name="home"
/>
);
}
Props
The name of a built-in icon from the FlowX icon set.
URL or path to a custom SVG file. Takes precedence over name when both are provided.
Additional CSS classes to apply to the icon container.
onClick
(event: SyntheticEvent) => void
Callback fired when the icon is clicked.
onIconLoad
(success: boolean) => void
Callback fired when a custom icon (via path) finishes loading. Receives true on success, false on error.
Inline styles to apply to the icon container.
TypeScript
The Icon component includes full type definitions:
import type { FlxIconProps, FlxIconName } from '@flowx/react-ui-toolkit';
const iconConfig: FlxIconProps = {
name: 'home',
className: 'custom-icon',
onClick: (e) => console.log('Clicked', e)
};
// Type-safe icon names
const iconName: FlxIconName = 'settings';
Accessibility
- When icons convey meaning, use
aria-label or aria-labelledby
- For decorative icons, use
aria-hidden="true"
- Interactive icons should have
role="button" and keyboard support
- Provide text alternatives for icon-only buttons
Never use icons alone to convey critical information. Always provide text labels or ARIA attributes for users who may not see the icon or understand its meaning.
import { MemoFlxIcon } from '@flowx/react-ui-toolkit';
function IconList({ icons }) {
return (
<div>
{icons.map(icon => (
<MemoFlxIcon key={icon.id} name={icon.name} />
))}
</div>
);
}
MemoFlxIcon variant prevents unnecessary re-renders in lists or frequently updating components.