Image

Anatomy

Guidelines

When to use

The Image component is the standard method to display any raster or vector assets within the UI. Common use cases include:

• Product logos and branding marks
• Illustrative graphics in empty states or onboarding flows
• User-uploaded content such as account logos or asset library previews
• Third-party integration icons loaded from external URLs
• Decorative images paired with marketing or instructional copy

Custom icons

When a specific icon doesn't exist within the Pluma Icon library, use Image to display a custom icon. Set its preset size and object-fit so the Image occupies the same dimensions as an Icon. Pair with the bounding box option to match the inner spacing icons use.

Image vs. Icon

• Image is used to render any normal, non-icon image such as illustrations or logos. Preferred for custom icon use.
• Icon renders a preset SVG path. Use it when the graphic is part of the Pluma Icon library and should inherit text color.

Best practices

Sizing consistency

When Images appear in a group with other Images or Icons, ensure they are all the same size. Mixing sizes disrupts visual rhythm and makes the layout feel inconsistent.

Appearance

Bounding box

The bounding box is an invisible box that surrounds and contains the image. When enabled, it adds proportional padding based on the image's size to keep adjacent images visually aligned.

Object fit

Object fit controls how the image is resized within its container when the container's aspect ratio differs from the image's intrinsic aspect ratio.

Sizes

Image supports preset sizes that align with the Icon sizing scale. Use these when Images need to sit alongside Icons at the same visual weight and alignment.

When no preset size is set, the image renders at its natural dimensions or any explicit width and height values.

Behaviors

Coin integration

When placed inside a Coin, Image automatically inherits the Coin's size, object-fit, and bounding box settings. This means an image used as a Coin's content doesn't need any additional sizing configuration.

Color scheme variants

The Image component supports color schemes. For each source provided, it can be associated with a specific color scheme to be displayed when a theme is toggled on. This is helpful for graphics or logos that have light and dark variations.

Inline display

Images can be displayed inline with surrounding text. When inline, the image automatically adjusts its vertical alignment to sit comfortably alongside uppercase or lowercase letters, matching the behavior of inline icons.

Content

Alt text

Alt text is written depending on how the Image is used. Every Image falls into one of three categories: decorative, functional, or informative.

Every Image must have an alt attribute. Consider the following examples for writing appropriate alt text:

For more information from an accessibility standpoint, see Effective alt text under the Accessibility tab.