Icons

Plus UI integrates with Font Awesome to provide a comprehensive and versatile icon set. Our plus-icon component makes it easy to incorporate these icons into your application, and the icon registry allows for adding your own custom SVGs.

Using the plus-icon Component

To display an icon, use the <plus-icon> tag with the icon-name attribute set to the desired icon.

<!-- Displays a solid star icon -->
<plus-icon icon-name="star"></plus-icon>

<!-- Displays a regular heart icon -->
<plus-icon icon-name="heart" icon-style="regular"></plus-icon>

<!-- Displays a user icon with a larger size -->
<plus-icon icon-name="user" size="xl"></plus-icon>

<!-- Styling the icon color -->
<plus-icon icon-name="check" style="color: var(--plus-color-success-default);"></plus-icon>

Key Properties

• icon-name: The name of the Font Awesome icon (e.g., check, user, arrow-right).
• icon-style: The style of the icon. Can be solid (default), regular, or light.
• size: Sets the size of the icon. Accepts xs, sm, md (default), lg, xl, 2xl, and 3xl.
• label: An optional accessibility label. If not provided, it’s inferred from the icon name.

Color can be set by styling the component with the standard CSS color property or the --icon-color custom property.

Finding Icons

Plus UI includes a vast selection of icons from Font Awesome. To find an icon:

1. Visit the Font Awesome Gallery.
2. Search for the icon you need (make sure to check for its availability in the “Free” sets).
3. Use the icon’s name in the icon-name attribute of the plus-icon component.

For example, if you find an icon named “house”, you would use it like this: <plus-icon icon-name="house"></plus-icon>.

Custom Icons

You can register your own SVG icons for use with the plus-icon component. This is useful for including brand logos or custom graphics that aren’t in the Font Awesome library.

The registerIcon function allows you to add an SVG string to the icon registry under a specific name and style.

Usage

It’s best to register custom icons once when your application starts up.

import { registerIcon } from '@plusui/core/components/icon';

// Your custom SVG content as a string
const customLogoSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="..."/></svg>';

// Register the icon
registerIcon('my-logo', 'solid', customLogoSvg);

Once registered, you can use it just like any other icon:

<plus-icon icon-name="my-logo" icon-style="solid"></plus-icon>

Join the Community

Plus UI is built by the community. Join us on our platforms to contribute, get help, and stay up to date.

Figma GitHub Discord Twitter Open Collective