base-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. In this tutorial you can check how to do that.
Default icon example below.
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".
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
Run the following command to add this component to your project:
npx base-ui-cli add icon
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.
npx -y base-ui-mcp
Base UI provides standalone components. Import the exact elements you want to use into your component.
// Install: npx base-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 | Member | Type | Default | Description |
|---|---|---|---|---|
base-icon | class | string | '' | Additional host CSS classes (merged via cn()). |
base-icon | name | string | undefined | '' | — |
base-icon | path | unknown | 'assets/icons.svg' | — |
base-icon | color | string | '' | — |
base-icon | size | string | number | '' | — |
base-icon | filled | boolean | false | Renders the solid variant from `filledPath` instead of the outline sprite. |
base-icon | filledPath | unknown | 'assets/icons-filled.svg' | Sprite used when `filled` is true. Its symbols must use `fill="currentColor"`, not `fill="none"`. |
Content