--- meta: title: Icon description: Icons are symbols used to represent actions, objects, or concepts throughout the interface. layout: component --- ```html:preview ``` The icon component provides a flexible way to display icons from multiple libraries including Material Icons, Material Symbols, Line Icons, and custom brand icons. It also supports avatar generation, Gravatar, and custom image sources. ## Examples ### Basic Usage The simplest way to use an icon is by specifying the icon name in the `src` attribute. By default, icons use the Material Symbols Outlined library. ```html:preview ``` ### Sizes Use the `size` attribute to control the icon's dimensions. The default size is 24 pixels. ```html:preview ``` ### Colors Use the `color` attribute to apply semantic or predefined colors to your icons. ```html:preview ``` Additional color options are available for specific use cases: ```html:preview ``` ### Round Icons Add the `round` attribute to give icons a circular background. ```html:preview ``` ### Padded Icons Use the `padded` attribute to add internal spacing around the icon. ```html:preview ``` ### Squared Icons Use the `squared` attribute to maintain a 1:1 aspect ratio for the icon container. ```html:preview ``` ### Blink Animation Add the `blink` attribute to create a blinking effect, useful for notifications or alerts. ```html:preview ``` ## Icon Libraries The icon component supports multiple icon libraries. You can specify the library using the `library` attribute or use shorthand notation with the `@` symbol in the `src` attribute. ### Material Symbols Outlined (Default) Material Symbols Outlined is the default library. These icons are modern and versatile. ```html:preview ``` ### Material Icons Variants Material Icons come in several variants: filled, outlined, round, sharp, and two-tone. ```html:preview ``` You can also use the library attribute directly: ```html:preview ``` #### Shorthand Library Notation You can use convenient shorthand notations: - `@m` or `@mat` → material - `@mo` → material-outlined - `@mr` → material-round - `@ms` → material-sharp - `@mt` or `@m2` → material-two-tone - `@mso` → material-symbols-outlined ```html:preview ``` ### Line Icons Line Icons provide a collection of modern, consistent icons. Use `library="line"` or the `@line` shorthand. View Line Icons ```html:preview ``` Using shorthand notation: ```html:preview ``` ### Brand Icons Display brand logos and custom company icons using the brands library. ```html:preview ``` ### Custom Images Use custom images by providing a file path or URL in the `src` attribute. When using a path with a forward slash, the icon automatically uses the `src` library mode. ```html:preview ``` You can also explicitly set `library="src"`: ```html:preview ``` ### Avatar Generation The avatar library automatically generates avatar initials with consistent color schemes. Perfect for user profiles and identity representation. #### Basic Avatars ```html:preview ``` The avatar automatically extracts initials intelligently: - First letter of first word + first letter of any capital letter or word boundary - Supports camelCase (e.g., "ThankYou" → "TY") - Supports space-separated names (e.g., "John Doe" → "JD") #### Alphabet Display ```html:preview ``` #### Avatars with Colors Override the automatic color generation by specifying a `color` attribute: ```html:preview ``` #### Avatar Shapes Avatars work with or without the `round` attribute: ```html:preview ``` Using shorthand notation: ```html:preview ``` ### Gravatar Gravatar provides globally recognized avatars based on email addresses. Simply provide an email address as the `src` and the component will automatically detect it and use Gravatar. ```html:preview ``` #### Gravatar with Fallback You can specify a fallback image type using the `#` symbol followed by the fallback type: ```html:preview ``` Explicit library specification: ```html:preview ``` Using shorthand notation: ```html:preview ``` ### Libravatar Libravatar is an open-source alternative to Gravatar. Use it for federated avatar services. ```html:preview ``` Similar to Gravatar, you can specify fallback options: ```html:preview ``` ## Advanced Features ### Alt Text for Accessibility Use the `alt` attribute to provide alternative text for image-based icons (custom images, Gravatar, Libravatar). ```html:preview ``` ### Special Syntax The icon component supports special syntax in the `src` attribute for quick configuration. #### Hash Symbol (#) for Modifiers Add modifiers after a `#` symbol: ```html:preview ``` #### At Symbol (@) for Library Selection Quickly specify the library using `@`: ```html:preview ``` Combined with modifiers: ```html:preview ``` ### Slotted Content When no `src` is provided and no `library` is specified, you can use the default slot to insert custom content: ```html:preview ``` ### CSS Custom Properties The icon component exposes CSS custom properties for advanced styling: - `--icon-size`: Controls the icon dimensions (default: 24px) - `--icon-color`: Controls the icon color (default: inherit) ```html:preview ``` ### CSS Parts The icon component exposes the `icon` part for styling the internal icon element: ```html:preview ``` ## Use Cases ### In Buttons Icons are commonly used within buttons to provide visual context: ```html:preview Add Item Delete Edit ``` ### In Navigation Use icons to enhance navigation items: ```html:preview Home Settings Profile ``` ### Status Indicators Combine icons with colors to show status: ```html:preview
Active
Error
Warning
Info
``` ### User Avatars in Lists ```html:preview
John Smith
john.smith@example.com
Sarah Connor
sarah.connor@example.com
Mike Johnson
mike.johnson@example.com
``` ## Material Icons Reference Our icons are taken directly from Material Icons. Click or tap on any icon to copy its name, then you can use it in your HTML like this: View Icons ```html ```
Outlined Filled All icons