React Native Mantine › Data display
ThemeIcon
Icon with themed background
Import: import { ThemeIcon } from 'react-native-mantine';
Usage
import { ThemeIcon, Icon } from 'react-native-mantine';
// Filled variant (default)
<ThemeIcon color="blue" size="lg">
<Icon name="heart" size={20} color="white" />
</ThemeIcon>
// Light variant
<ThemeIcon color="red" variant="light" size="md">
❤️
</ThemeIcon>
// Gradient variant
<ThemeIcon
variant="gradient"
gradient={{ from: 'blue', to: 'cyan', deg: 45 }}
size="xl"
>
📧
</ThemeIcon>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children (required) | React.ReactNode | Icon component or element to display | |
color | MantineColor | "blue" | Key of theme.colors to apply color |
variant | 'filled' | 'light' | 'gradient' | 'outline' | "filled" | Controls appearance - filled (solid background), light (subtle background), gradient (gradient background), or outline (border only) |
gradient | MantineGradient | { from: "blue", to: "cyan", deg: 45 } | Controls gradient settings in gradient variant only - object with from, to, and deg properties |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number | "md" | Predefined size or number to set width and height in pixels |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | "sm" | Key of theme.radius or number to set border-radius in pixels |
style | ViewStyle | Additional styles to apply to the icon container |