Skip to content
lab components / Visuals

Contained Icon

Highlight specific content, topics, or sessions with a styled icon container to improve scannability

ExamplesPropertiesGuidelines

This is a Lab component!

That means it doesn't satisfy our definition of done and may be changed or even deleted. For an exact status, please reach out to the Fancy team through the dev_fancy or ux_fancy channels.

import { ContainedIcon } from "@siteimprove/fancylab";

#Examples

The ContainedIcon component wraps the existing Icon component in a styled container. It uses the brand color palette by default.

#Default

Pass any icon as a child. The container uses the brand color palette — a light background with a dark foreground icon. Remember to only pass the specific icon component, for example IconSettings, and not the Icon wrapper. The Icon wrapper is added by ContainedIcon.

Theme: agentic-ai-2025
<ContainedIcon> <IconSettings /> </ContainedIcon>

#Properties

Theme: agentic-ai-2025
PropertyDescriptionDefinedValue
childrenRequired
elementAn icon to display inside the styled container
typeOptional
unknownControls the color palette of the container — defaults to "brand"
data-observe-keyOptional
stringUnique string, used by external script e.g. for event tracking
classNameOptional
stringCustom className that's applied to the outermost element (only intended for special cases)
styleOptional
objectStyle object to apply custom inline styles (only intended for special cases)

#Guidelines

#Best practices

  • Use Contained Icons to highlight important content, topics, or sessions — not for decorative purposes.
  • Always pair a Contained Icon with a visible label or heading so its meaning is clear to all users.
  • Use a universally recognized icon that is relevant to the content it represents.

#Do not use when

  • You need an interactive element — use a Button with an Icon instead.
  • The icon is part of inline text or a form field — use the Icon component directly.

#Accessibility

The icon inside ContainedIcon is hidden from assistive technology (aria-hidden). Always provide a visible label or heading near the component so that its meaning is accessible to screen reader users.