IconFrame

free

IconFrame is a container for displaying icons with consistent styling, supporting default, thick, layered, and muted visual variants.

Preview

Dark

import IconFrame from '@/components/composites/IconFrame';
import { PiCurrencyCircleDollar, PiGear, PiUser } from 'react-icons/pi'

export default function UsageDemo() {
  return (
    <div className="flex items-center gap-4">
      <IconFrame>
        <PiCurrencyCircleDollar className="text-xl" />
      </IconFrame>
      <IconFrame>
        <PiUser className="text-xl" />
      </IconFrame>
      <IconFrame>
        <PiGear className="text-xl" />
      </IconFrame>
    </div>
  );
}

Installation

Add this component with the NateUI CLI.

npx nateui@latest add IconFrame

Examples

Variants

Preview

Dark

import IconFrame from '@/components/composites/IconFrame';
import { PiCheckCircle } from 'react-icons/pi'

export default function VariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <IconFrame>
        <PiCheckCircle className="text-xl" />
      </IconFrame>
      <IconFrame variant="thick">
        <PiCheckCircle className="text-xl" />
      </IconFrame>
      <IconFrame variant="layered">
        <PiCheckCircle className="text-xl" />
      </IconFrame>
      <IconFrame variant="elavated">
        <PiCheckCircle className="text-xl" />
      </IconFrame>
      <IconFrame variant="muted">
        <PiCheckCircle className="text-xl" />
      </IconFrame>
    </div>
  );
}

Custom Size

Preview

Dark

import IconFrame from '@/components/composites/IconFrame';
import { PiCheckCircle } from 'react-icons/pi'

export default function CustomSizeDemo() {
  return (
    <div className="flex items-end gap-4">
      <IconFrame size={32}>
        <PiCheckCircle className="text-base" />
      </IconFrame>
      <IconFrame size={40}>
        <PiCheckCircle className="text-xl" />
      </IconFrame>
      <IconFrame size={58}>
        <PiCheckCircle className="text-2xl" />
      </IconFrame>
    </div>
  );
}

API

Prop	Description	Type	Default
`variant`	Visual style variant of the icon frame.	`'default' \| 'elavated' \| 'thick' \| 'layered' \| 'muted'`	`'default'`
`size`	Width and height of the icon frame in pixels.	`number`	`40`
`children`	Icon or content to display inside the frame.	`ReactNode`	—
`className`	Additional CSS classes to apply to the frame.	`string`	—