Icon
Displays SVG icons with style, size, and CDN fallback support.
First release: 1.0.0 Latest update: July 1, 2025 Current version: 1.0.0
Import
import { PlusIcon } from '@plusui/react';import { PlusIconComponent } from '@plusui/angular';import { PlusIcon } from '@plusui/vue';import PlusIcon from '@plusui/svelte';<script src="https://cdn.jsdelivr.net/npm/@plusui/core"></script>Package
@plusui/react@plusui/angular@plusui/vue@plusui/svelte@plusui/coreDocs
Changelog
Icon Changelog
Recent changes and updates for the icon component
v1.0.0
June 28, 2025
Feat
Introduced a new, unified SVG icon system with expanded features.
- Added a local registry for 32+ core icons with CDN fallback.
- Implemented `solid`, `regular`, and `light` style variants.
- Added `sm`, `md`, `lg`, and `xl` size variants.
- This change is part of the "Icon System Unification" EPIC (#73).
The Icon component (<plus-icon>) provides a consistent and performant way to display SVG icons in Plus UI. It supports multiple style variants (solid, regular, light), size options, and automatic CDN fallback if an icon is not available locally.
Anatomy
Section titled “Anatomy”Basic Example
Section titled “Basic Example” Show code
import { PlusIcon } from '@plusui/react';
export default () => { return ( <> <PlusIcon iconName="star"> </PlusIcon> </> );};import { Component } from '@angular/core';
@Component({ selector: 'app-example', template: ` <plus-icon icon-name="star"> </plus-icon> `})export class ExampleComponent {}<template> <plus-icon icon-name="star"> </plus-icon></template><plus-icon icon-name="star"></plus-icon><plus-icon icon-name="star"></plus-icon>Style Variants
Section titled “Style Variants”Use the icon-style attribute to switch between solid, regular, and light icon styles:
Show code
import { PlusIcon } from '@plusui/react';
export default () => { return ( <> <PlusIcon iconName="star" iconStyle="solid"> </PlusIcon> <PlusIcon iconName="star" iconStyle="regular"> </PlusIcon> <PlusIcon iconName="star" iconStyle="light"> </PlusIcon> </> );};import { Component } from '@angular/core';
@Component({ selector: 'app-example', template: ` <plus-icon icon-name="star" icon-style="solid"> </plus-icon> <plus-icon icon-name="star" icon-style="regular"> </plus-icon> <plus-icon icon-name="star" icon-style="light"> </plus-icon> `})export class ExampleComponent {}<template> <plus-icon icon-name="star" icon-style="solid"> </plus-icon> <plus-icon icon-name="star" icon-style="regular"> </plus-icon> <plus-icon icon-name="star" icon-style="light"> </plus-icon></template><plus-icon icon-name="star" icon-style="solid"></plus-icon><plus-icon icon-name="star" icon-style="regular"></plus-icon><plus-icon icon-name="star" icon-style="light"></plus-icon><plus-icon icon-name="star" icon-style="solid"></plus-icon><plus-icon icon-name="star" icon-style="regular"></plus-icon><plus-icon icon-name="star" icon-style="light"></plus-icon>Size & Color
Section titled “Size & Color”Control the icon size using the size attribute or the --icon-size CSS custom property. Color can be set via CSS:
Show code
import { PlusIcon } from '@plusui/react';
export default () => { return ( <> <PlusIcon iconName="heart" size="lg"> </PlusIcon> <PlusIcon iconName="home" style="--icon-size: 48px; color: #e11d48"> </PlusIcon> </> );};import { Component } from '@angular/core';
@Component({ selector: 'app-example', template: ` <plus-icon icon-name="heart" size="lg"> </plus-icon> <plus-icon icon-name="home" style="--icon-size: 48px; color: #e11d48"> </plus-icon> `})export class ExampleComponent {}<template> <plus-icon icon-name="heart" size="lg"> </plus-icon> <plus-icon icon-name="home" style="--icon-size: 48px; color: #e11d48"> </plus-icon></template><plus-icon icon-name="heart" size="lg"></plus-icon><plus-icon icon-name="home" style="--icon-size: 48px; color: #e11d48"></plus-icon><plus-icon icon-name="heart" size="lg"></plus-icon><plus-icon icon-name="home" style="--icon-size: 48px; color: #e11d48"></plus-icon>CDN Fallback
Section titled “CDN Fallback”If the requested icon is not found in the local bundle, it will be automatically loaded from the FontAwesome CDN:
Show code
import { PlusIcon } from '@plusui/react';
export default () => { return ( <> <PlusIcon iconName="nonexistent-icon"> </PlusIcon> </> );};import { Component } from '@angular/core';
@Component({ selector: 'app-example', template: ` <plus-icon icon-name="nonexistent-icon"> </plus-icon> `})export class ExampleComponent {}<template> <plus-icon icon-name="nonexistent-icon"> </plus-icon></template><plus-icon icon-name="nonexistent-icon"></plus-icon><plus-icon icon-name="nonexistent-icon"></plus-icon>API Reference
Section titled “API Reference”| Name | Type | Default | Description |
|---|---|---|---|
icon-name | string | — | Name of the icon to display |
icon-style | 'solid' | 'regular' | 'light' | 'solid' | Icon style variant |
size | 'xs' | 'sm' | 'md' | ... | 'md' | Size variant or custom CSS value |
| Name | Description |
|---|---|
| default | (Not typically used) |
CSS Custom Properties
Section titled “CSS Custom Properties”| Name | Description |
|---|---|
--icon-size | Sets the icon size |
--icon-color | Sets the icon color |
Accessibility (a11y)
Section titled “Accessibility (a11y)”- Uses
role="img"for screen readers - Add
aria-labelfor descriptive icons - Use
aria-hidden="true"for decorative icons
Why is my icon not showing?
- If the icon name is incorrect or not available locally, it will attempt to load from the CDN. Double-check the icon name and style.
How do I use a custom SVG?
- For custom SVGs, use a slot or inline SVG directly in your markup.
Join the Community
Plus UI is built by the community. Join us on our platforms to contribute, get help, and stay up to date.