Free
Pro

Icon

ply-icon is easy way to add vector icons to your project. Use name="" to add preferred icon. Base theme has Base Icon Pack of 145 carefully curated icons. As well this way gives opportunity to add custom icons to your project. Override sprite paths once with provideBaseUI({ iconPath: 'assets/icons.svg' }) in app.config.ts — see Getting started. In this tutorial you can check how to do that.

free

Playground

HTML

<ply-icon name="info-circle" size="32">Icon</ply-icon>

Default Icon

Default icon example below.

Icon Color

Base Icon Pack is build with stroked icons. To control the color, use any color from Tailwindcss color palette classes with "stroke", for example class="stroke-slate-700".

Icon Size

Use Talwindcss classes width w- and height h- to control the icon size. It is mandatory to add equal values. There is no limits for preferred size

Installation

Run the following command to add this component to your project:

bash

npx ply-ui-cli add icon

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-ui-cli add icon
// Paths are relative to aliases.components (default: src/app/components)
import { IconComponent } from './icon/icon.component';

@Component({
  selector: 'app-your-component',
  imports: [
    IconComponent
  ],
  template: `...`
})
export class YourComponent {}

API for icon — generated from JSDoc in the library source.

API reference for icon
APIMemberTypeDefaultDescription
ply-iconclassstring''Additional host CSS classes (merged via cn()).
ply-iconnamestring | undefined''—
ply-iconpathstring''Outline sprite URL. Empty uses `provideBaseUI().iconPath` (default `assets/icons.svg`).
ply-iconcolorstring''—
ply-iconsizestring | number''Explicit size. Empty uses `provideBaseUI().defaultSize` unless the host already has a `w-*` / `h-*` class (those keep class-based sizing).
ply-iconfilledbooleanfalseRenders the solid variant from `filledPath` instead of the outline sprite.
ply-iconfilledPathstring''Solid sprite URL when `filled` is true. Empty uses `provideBaseUI().filledIconPath` (default `assets/icons-filled.svg`).