Icon
The
Icon component displays icons with optional captions and overlays, providing a flexible way to present visual content in your application.Source
LLM docs
Package
Examples
3
Properties
39
Basics
Render any icon from the built-in Tabler set by its registry
name.Loading demo…
import { Icon, Row } from '@plocks/ui';
export function Demo() {
return (
<Row gap="lg" align="center" wrap="wrap">
<Icon name="home" />
<Icon name="search" />
<Icon name="bell" />
<Icon name="calendar" />
<Icon name="heart" />
<Icon name="star" />
<Icon name="user" />
<Icon name="settings" />
</Row>
);
}Stroke
Set
stroke to change the line thickness of outlined icons. It defaults to 1.5.Loading demo…
import { Flex, Icon, Text } from '@plocks/ui';
const strokeVariants = [
{ label: 'Thin (0.75)', value: 0.75 },
{ label: 'Default (1.5)', value: 1.5 },
{ label: 'Bold (3)', value: 3 },
];
export function Demo() {
return (
<Flex direction="row" align="center" gap="lg" wrap="wrap">
{strokeVariants.map(({ label, value }) => (
<Flex key={label} direction="column" align="center" gap="sm">
<Icon name="contrast" size="xl" stroke={value} />
<Text variant="small" style={{ textAlign: 'center' }}>{label}</Text>
</Flex>
))}
</Flex>
);
}Variants
Compare filled and outlined versions of the same icons.
Loading demo…
import { Column, Icon, Row, Text } from '@plocks/ui';
const variants = ['outlined', 'filled'] as const;
export function Demo() {
return (
<Column gap="md">
{variants.map(variant => (
<Row key={variant} gap="md" align="center">
<Text>{variant}</Text>
<Icon name="heart" variant={variant} size="xl" />
<Icon name="star" variant={variant} size="xl" />
<Icon name="bell" variant={variant} size="xl" />
</Row>
))}
</Column>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources