Featured icon components

The theme prop accepts "light", "gradient", "dark", "outline", "modern" and "modern-neue". The default is "light".

The color prop accepts "brand", "gray", "success", "warning" and "error", and falls back to "brand" at runtime. All five colors are styled for every theme except "modern-neue", which only defines styles for "gray". The examples on this page use "gray" for both modern themes.

Featured icons support "sm", "md", "lg" and "xl", and the default is "sm". For every theme except "outline", these render 32px, 40px, 48px and 56px containers. The "outline" theme uses a smaller center with rings drawn around it.

Automatic sizing only applies when you pass a component reference, like icon={CheckCircle}. If you pass a React element, like icon={<CheckCircle />}, it's wrapped in a div and keeps whatever size you give it, so add a size class such as size-5 yourself.

Yes. Anything you pass as children renders inside the container after the icon. You can leave out the icon prop and pass your own content instead.

Pass Tailwind classes through className. They're merged last with tailwind-merge, so a class like rounded-lg overrides the conflicting class from the theme.