Documentation Index
Fetch the complete documentation index at: https://mintlify.com/raystack/apsara/llms.txt
Use this file to discover all available pages before exploring further.
Usage
Apsara includes a collection of SVG icons exported as React components. All icons are imported from the @raystack/apsara/icons package.
import { BellIcon, CheckCircleFilledIcon } from '@raystack/apsara/icons';
function App() {
return (
<div>
<BellIcon width={24} height={24} />
<CheckCircleFilledIcon width={24} height={24} />
</div>
);
}
Available icons
All icons are exported as React components with the Icon suffix. They accept standard SVG attributes as props.
Width of the icon in pixels.
Height of the icon in pixels.
CSS class name for styling.
Icon list
Bell with slash icon (notifications disabled).
Filled check circle icon (success indicator).
Colored coin icon variant.
Filled cross circle icon (error indicator).
Filled shopping bag icon.
Right-pointing triangle icon.
Examples
Basic usage
import { BellIcon } from '@raystack/apsara/icons';
function Notification() {
return (
<button>
<BellIcon width={20} height={20} />
<span>Notifications</span>
</button>
);
}
Custom styling
import { CheckCircleFilledIcon } from '@raystack/apsara/icons';
function SuccessMessage() {
return (
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<CheckCircleFilledIcon
width={24}
height={24}
className="success-icon"
style={{ color: 'green' }}
/>
<span>Operation completed successfully!</span>
</div>
);
}
With IconButton component
import { IconButton } from '@raystack/apsara';
import { FilterIcon } from '@raystack/apsara/icons';
function FilterButton() {
return (
<IconButton>
<FilterIcon width={20} height={20} />
</IconButton>
);
}
Status indicators
import {
CheckCircleFilledIcon,
CrossCircleFilledIcon
} from '@raystack/apsara/icons';
function StatusBadge({ status }: { status: 'success' | 'error' }) {
const Icon = status === 'success' ? CheckCircleFilledIcon : CrossCircleFilledIcon;
const color = status === 'success' ? '#30a46c' : '#e5484d';
return (
<div style={{ display: 'flex', alignItems: 'center' }}>
<Icon width={16} height={16} style={{ color }} />
<span style={{ marginLeft: '4px' }}>
{status === 'success' ? 'Success' : 'Error'}
</span>
</div>
);
}
Navigation icons
import { SidebarIcon, OrganizationIcon } from '@raystack/apsara/icons';
function NavigationMenu() {
return (
<nav>
<button>
<SidebarIcon width={20} height={20} />
<span>Dashboard</span>
</button>
<button>
<OrganizationIcon width={20} height={20} />
<span>Organizations</span>
</button>
</nav>
);
}
Conditional rendering
import { BellIcon, BellSlashIcon } from '@raystack/apsara/icons';
function NotificationToggle({ enabled }: { enabled: boolean }) {
const Icon = enabled ? BellIcon : BellSlashIcon;
return (
<button>
<Icon width={24} height={24} />
<span>{enabled ? 'Notifications On' : 'Notifications Off'}</span>
</button>
);
}
Notes
- All icons are exported as React components from SVG files
- Icons are generated automatically by the build process (see comment in source file)
- Icons support all standard SVG props including
width, height, className, style, fill, etc.
- For consistent sizing, it’s recommended to always specify both
width and height
- Icons inherit the current text color by default, which can be overridden with the
color CSS property
- Use with the
IconButton component for consistent icon button styling
Related