Icon with background

An icon with a background color. Use this to display larger icons for a more styled look.
Properties
variant
size
icon
square
Example
Source Code
Installation
"use client";

import React from "react";
import { IconWithBackground } from "@/subframe/components/IconWithBackground";

function IconWithBackgroundExample() {
  return (
    <IconWithBackground
      variant="brand"
      size="x-small"
      icon="FeatherCheck"
      square={false}
    />
  );
}

export default IconWithBackgroundExample;

Props

Icon with background
Prop
Type
Default
Additional info
variant
"brand" | "neutral" | "error" | "success" | "warning"
"brand"
size
"x-large" | "large" | "medium" | "small" | "x-small"
"x-small"
icon
IconName
"FeatherCheck"
square
boolean
false

Examples

Variants

Sizes

Square