Icon

Renders a square icon

Usage

<template>
  <winui-icon
    src="https://img.icons8.com/matisse/100/windows-logo.png"
    alt="Windows logo"
  />
</template>

Props

src required

• Type: string
• Default: undefined

The path or URL to the icon image.

alt optional

• Type: string
• Default: undefined

The alt text of the icon (visible when the icon image fails to load).

size optional

• Type: number | string
• Default: undefined

The size of the icon. A predefined size also helps prevent the Cumulative Layout Shift (opens new window) issue.

Customization

Use the class name .winui-icon to override/customize the component's styles.

Examples

Specifying the icon's size

<template>
  <winui-icon
    src="https://img.icons8.com/matisse/100/windows-logo.png"
    alt="Windows logo"
    size="48"
  />
</template>