• Design systems
  • Components
  1. Components
  2. Image

Image component examples

Image components keep sizing, cropping, loading and alternative text consistent across the product.

Also known as Picture

Open Image link source example
Image link from Aalto Design System

Image link

Aalto Design System
Open Text and image source example
Text and image from Aalto Design System

Text and image

Aalto Design System
Open Image source example
Image from Backpack

Image

Backpack
Open Image source example
Image from Chakra UI

Image

Chakra UI
Open Image source example
Image from Codex

Image

Codex
Open Shaped Image source example
Shaped Image from Duet Design System

Shaped Image

Duet Design System
Open Picture source example
Picture from Elisa Design System

Picture

Elisa Design System
Open Image source example
Image from Flowbite

Image

Flowbite
Open Image source example
Image from Fluent 2 Design System

Image

Fluent 2 Design System
Open Image source example
Image from HeroUI

Image

HeroUI
Open Image source example
Image from NewsKit Design System

Image

NewsKit Design System
Open Background image source example
Background image from PatternFly

Background image

PatternFly
Open Image source example
Image from Polaris

Image

Polaris
Open Animated Image source example
Animated Image from Shoelace

Animated Image

Shoelace
Open Image source example
Image from Solar

Image

Solar
Open Image slider source example
Image slider from Solar

Image slider

Solar
Open Image source example
Image from Tractie

Image

Tractie
Open Image Ratios source example
Image Ratios from Wise Design

Image Ratios

Wise Design

Related categories

Explore adjacent component patterns.

“You miss 100% of the shots you don't take. - Wayne Gretzky”

- Michael Scott

Blockquote

Quote, Pull quote, Block quote

theme.ts
1const theme = {
2radius: 'sm',
3neutral: 'slate'
4}

Code block

Code, Code editor, Code snippet, Code view, Inline code

Heading one

Heading two

Heading three

Heading

Headline, Display heading, Page heading, Title, Subheading

Icon

Icon list

Public design systems, component patterns, and the source material behind them.

Design systems

  • All design systems
  • Recommended picks
  • Submit a design system

Industries

  • Government
  • Finance
  • Travel
  • Retail
  • Healthcare
  • Communications
  • Media
  • Education
  • Technology

Components

  • UI component examples
  • Actions
  • Forms and input
  • Navigation
  • Feedback and status
  • Data display
  • Content and media
  • Layout and structure
  • Overlays
  • AI and conversation
Attributions

© 2026 designsystem.gallery