Featured Icon

Light Theme

Soft, light-colored background with a brand-colored icon. Subtle and minimal.

Gradient Theme

Background uses a gradient wash for more visual depth than the light theme.

Dark Theme

Inverted color scheme — dark/solid background with lighter icon rendering. High contrast.

Outline Theme

Transparent background with a visible border ring. Clean, line-based aesthetic.

Modern Theme

Card-style container with subtle border and shadow. Contemporary flat styling.

Modern Neue Theme

Refined modern variant with an outer ring shadow for added depth and emphasis.

Sizes

Four size options for different contexts — from compact inline use to large feature displays.

Usage

Import the FeaturedIcon component and pass any icon element.

import { FeaturedIcon } from "omnira-ui/FeaturedIcon";
import { TickCircle } from "iconsax-react";

export default function MyFeature() {
    return (
        <div>
            <FeaturedIcon
                icon={<TickCircle size={24} variant="Bulk" />}
                theme="modern-neue"
                color="brand"
                size="lg"
            />
            <h3>Feature Title</h3>
            <p>Feature description goes here.</p>
        </div>
    );
}