UWC Components
  • Default
  • Material
  • Fluent

On this page

Icon

Renders SVG icons from any icon library — Bootstrap Icons by default. Supports custom libraries via registerLibrary(), individual icons via registerLocalIcon(), and one-off icons via the src attribute.

uwc-icon resolves and renders SVG icons on demand. The default library is Bootstrap Icons. Use registerLibrary() to plug in Tabler, Lucide, Font Awesome, or any CDN-hosted icon set.

Import

All components

import '@uwc/components';

Selected component (Lit / Angular / Vue)

import { UwcIcon } from '@uwc/components/icon';
customElements.define('uwc-icon', UwcIcon);

React

import { UwcIcon } from '@uwc/components/react';

Usage

Lit

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('app-demo')
export class AppDemo extends LitElement {
  render() {
    return html`<uwc-icon name="star-fill"></uwc-icon>`;
  }
}

React

import React from 'react';
import { UwcIcon } from '@uwc/components/react';

export default function App() {
  return <UwcIcon name="star-fill" />;
}

Angular

import { Component } from '@angular/core';
import '@uwc/icon';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<uwc-icon name="star-fill"></uwc-icon>`,
})
export class AppComponent {}

Vue

import '@uwc/icon';

export default {
  template: `<uwc-icon name="star-fill"></uwc-icon>`,
};

Basic Usage

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('icon-overview-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;padding:.5rem 0;">
        <uwc-icon name="star-fill" size="28px" color="#f59e0b"></uwc-icon>
        <uwc-icon name="heart-fill" size="28px" color="#ef4444"></uwc-icon>
        <uwc-icon name="bell-fill" size="28px" color="#6366f1"></uwc-icon>
        <uwc-icon name="check-circle-fill" size="28px" color="#22c55e"></uwc-icon>
        <uwc-icon name="gear-fill" size="28px" color="#64748b"></uwc-icon>
        <uwc-icon name="arrow-clockwise" size="28px" color="#6366f1" spin></uwc-icon>
        <uwc-icon name="person-fill" size="28px"></uwc-icon>
        <uwc-icon name="envelope-fill" size="28px"></uwc-icon>
        <uwc-icon name="search" size="28px"></uwc-icon>
        <uwc-icon name="trash-fill" size="28px" color="#ef4444"></uwc-icon>
      </div>
    `;
  }
}

import React from 'react';
import { UwcIcon } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', gap: '1.25rem', alignItems: 'center', flexWrap: 'wrap', padding: '.5rem 0' }}>
      <UwcIcon name="star-fill" size="28px" color="#f59e0b" />
      <UwcIcon name="heart-fill" size="28px" color="#ef4444" />
      <UwcIcon name="bell-fill" size="28px" color="#6366f1" />
      <UwcIcon name="check-circle-fill" size="28px" color="#22c55e" />
      <UwcIcon name="gear-fill" size="28px" color="#64748b" />
      <UwcIcon name="arrow-clockwise" size="28px" color="#6366f1" spin />
      <UwcIcon name="person-fill" size="28px" />
      <UwcIcon name="envelope-fill" size="28px" />
      <UwcIcon name="search" size="28px" />
      <UwcIcon name="trash-fill" size="28px" color="#ef4444" />
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;padding:.5rem 0;">
      <uwc-icon name="star-fill" size="28px" color="#f59e0b"></uwc-icon>
      <uwc-icon name="heart-fill" size="28px" color="#ef4444"></uwc-icon>
      <uwc-icon name="bell-fill" size="28px" color="#6366f1"></uwc-icon>
      <uwc-icon name="check-circle-fill" size="28px" color="#22c55e"></uwc-icon>
      <uwc-icon name="gear-fill" size="28px" color="#64748b"></uwc-icon>
      <uwc-icon name="arrow-clockwise" size="28px" color="#6366f1" spin></uwc-icon>
      <uwc-icon name="person-fill" size="28px"></uwc-icon>
      <uwc-icon name="envelope-fill" size="28px"></uwc-icon>
      <uwc-icon name="search" size="28px"></uwc-icon>
      <uwc-icon name="trash-fill" size="28px" color="#ef4444"></uwc-icon>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap;padding:.5rem 0;">
      <uwc-icon name="star-fill" size="28px" color="#f59e0b"></uwc-icon>
      <uwc-icon name="heart-fill" size="28px" color="#ef4444"></uwc-icon>
      <uwc-icon name="bell-fill" size="28px" color="#6366f1"></uwc-icon>
      <uwc-icon name="check-circle-fill" size="28px" color="#22c55e"></uwc-icon>
      <uwc-icon name="gear-fill" size="28px" color="#64748b"></uwc-icon>
      <uwc-icon name="arrow-clockwise" size="28px" color="#6366f1" spin></uwc-icon>
      <uwc-icon name="person-fill" size="28px"></uwc-icon>
      <uwc-icon name="envelope-fill" size="28px"></uwc-icon>
      <uwc-icon name="search" size="28px"></uwc-icon>
      <uwc-icon name="trash-fill" size="28px" color="#ef4444"></uwc-icon>
    </div>
  `
};

Basic (Bootstrap Icons — default library)

The default library resolves names from Bootstrap Icons. Use name to pick any icon.

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('icon-basic-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;gap:1rem;align-items:center;flex-wrap:wrap;">
        <uwc-icon name="star-fill"></uwc-icon>
        <uwc-icon name="heart-fill"></uwc-icon>
        <uwc-icon name="bell-fill"></uwc-icon>
        <uwc-icon name="bookmark-fill"></uwc-icon>
        <uwc-icon name="camera-fill"></uwc-icon>
        <uwc-icon name="envelope-fill"></uwc-icon>
        <uwc-icon name="gear-fill"></uwc-icon>
        <uwc-icon name="house-fill"></uwc-icon>
        <uwc-icon name="search"></uwc-icon>
        <uwc-icon name="trash-fill"></uwc-icon>
      </div>
    `;
  }
}

import React from 'react';
import { UwcIcon } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' }}>
      <UwcIcon name="star-fill" />
      <UwcIcon name="heart-fill" />
      <UwcIcon name="bell-fill" />
      <UwcIcon name="bookmark-fill" />
      <UwcIcon name="camera-fill" />
      <UwcIcon name="envelope-fill" />
      <UwcIcon name="gear-fill" />
      <UwcIcon name="house-fill" />
      <UwcIcon name="search" />
      <UwcIcon name="trash-fill" />
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;gap:1rem;align-items:center;flex-wrap:wrap;">
      <uwc-icon name="star-fill"></uwc-icon>
      <uwc-icon name="heart-fill"></uwc-icon>
      <uwc-icon name="bell-fill"></uwc-icon>
      <uwc-icon name="bookmark-fill"></uwc-icon>
      <uwc-icon name="camera-fill"></uwc-icon>
      <uwc-icon name="envelope-fill"></uwc-icon>
      <uwc-icon name="gear-fill"></uwc-icon>
      <uwc-icon name="house-fill"></uwc-icon>
      <uwc-icon name="search"></uwc-icon>
      <uwc-icon name="trash-fill"></uwc-icon>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;gap:1rem;align-items:center;flex-wrap:wrap;">
      <uwc-icon name="star-fill"></uwc-icon>
      <uwc-icon name="heart-fill"></uwc-icon>
      <uwc-icon name="bell-fill"></uwc-icon>
      <uwc-icon name="bookmark-fill"></uwc-icon>
      <uwc-icon name="camera-fill"></uwc-icon>
      <uwc-icon name="envelope-fill"></uwc-icon>
      <uwc-icon name="gear-fill"></uwc-icon>
      <uwc-icon name="house-fill"></uwc-icon>
      <uwc-icon name="search"></uwc-icon>
      <uwc-icon name="trash-fill"></uwc-icon>
    </div>
  `
};

Sizes

Use the size attribute with any CSS length.

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('icon-sizes-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;gap:1rem;align-items:center;flex-wrap:wrap;">
        <uwc-icon name="star-fill" size="16px"></uwc-icon>
        <uwc-icon name="star-fill" size="20px"></uwc-icon>
        <uwc-icon name="star-fill" size="28px"></uwc-icon>
        <uwc-icon name="star-fill" size="40px"></uwc-icon>
        <uwc-icon name="star-fill" size="56px"></uwc-icon>
        <uwc-icon name="star-fill" size="72px"></uwc-icon>
      </div>
    `;
  }
}

import React from 'react';
import { UwcIcon } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' }}>
      <UwcIcon name="star-fill" size="16px" />
      <UwcIcon name="star-fill" size="20px" />
      <UwcIcon name="star-fill" size="28px" />
      <UwcIcon name="star-fill" size="40px" />
      <UwcIcon name="star-fill" size="56px" />
      <UwcIcon name="star-fill" size="72px" />
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;gap:1rem;align-items:center;flex-wrap:wrap;">
      <uwc-icon name="star-fill" size="16px"></uwc-icon>
      <uwc-icon name="star-fill" size="20px"></uwc-icon>
      <uwc-icon name="star-fill" size="28px"></uwc-icon>
      <uwc-icon name="star-fill" size="40px"></uwc-icon>
      <uwc-icon name="star-fill" size="56px"></uwc-icon>
      <uwc-icon name="star-fill" size="72px"></uwc-icon>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;gap:1rem;align-items:center;flex-wrap:wrap;">
      <uwc-icon name="star-fill" size="16px"></uwc-icon>
      <uwc-icon name="star-fill" size="20px"></uwc-icon>
      <uwc-icon name="star-fill" size="28px"></uwc-icon>
      <uwc-icon name="star-fill" size="40px"></uwc-icon>
      <uwc-icon name="star-fill" size="56px"></uwc-icon>
      <uwc-icon name="star-fill" size="72px"></uwc-icon>
    </div>
  `
};

Colors

Use the color attribute with any CSS color value.

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('icon-colors-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;gap:1rem;align-items:center;flex-wrap:wrap;">
        <uwc-icon name="heart-fill" size="32px" color="#ef4444"></uwc-icon>
        <uwc-icon name="star-fill" size="32px" color="#f59e0b"></uwc-icon>
        <uwc-icon name="check-circle-fill" size="32px" color="#22c55e"></uwc-icon>
        <uwc-icon name="info-circle-fill" size="32px" color="#3b82f6"></uwc-icon>
        <uwc-icon name="exclamation-triangle-fill" size="32px" color="#a855f7"></uwc-icon>
      </div>
    `;
  }
}

import React from 'react';
import { UwcIcon } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', gap: '1rem', alignItems: 'center', flexWrap: 'wrap' }}>
      <UwcIcon name="heart-fill" size="32px" color="#ef4444" />
      <UwcIcon name="star-fill" size="32px" color="#f59e0b" />
      <UwcIcon name="check-circle-fill" size="32px" color="#22c55e" />
      <UwcIcon name="info-circle-fill" size="32px" color="#3b82f6" />
      <UwcIcon name="exclamation-triangle-fill" size="32px" color="#a855f7" />
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;gap:1rem;align-items:center;flex-wrap:wrap;">
      <uwc-icon name="heart-fill" size="32px" color="#ef4444"></uwc-icon>
      <uwc-icon name="star-fill" size="32px" color="#f59e0b"></uwc-icon>
      <uwc-icon name="check-circle-fill" size="32px" color="#22c55e"></uwc-icon>
      <uwc-icon name="info-circle-fill" size="32px" color="#3b82f6"></uwc-icon>
      <uwc-icon name="exclamation-triangle-fill" size="32px" color="#a855f7"></uwc-icon>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;gap:1rem;align-items:center;flex-wrap:wrap;">
      <uwc-icon name="heart-fill" size="32px" color="#ef4444"></uwc-icon>
      <uwc-icon name="star-fill" size="32px" color="#f59e0b"></uwc-icon>
      <uwc-icon name="check-circle-fill" size="32px" color="#22c55e"></uwc-icon>
      <uwc-icon name="info-circle-fill" size="32px" color="#3b82f6"></uwc-icon>
      <uwc-icon name="exclamation-triangle-fill" size="32px" color="#a855f7"></uwc-icon>
    </div>
  `
};

Spin animation

Add spin to rotate the icon continuously — useful for loading states.

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('icon-spin-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;">
        <uwc-icon name="arrow-clockwise" size="28px" spin color="#6366f1"></uwc-icon>
        <uwc-icon name="gear-fill" size="28px" spin color="#f59e0b"></uwc-icon>
        <uwc-icon name="arrow-repeat" size="28px" spin color="#22c55e"></uwc-icon>
      </div>
    `;
  }
}

import React from 'react';
import { UwcIcon } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', gap: '1.5rem', alignItems: 'center', flexWrap: 'wrap' }}>
      <UwcIcon name="arrow-clockwise" size="28px" spin color="#6366f1" />
      <UwcIcon name="gear-fill" size="28px" spin color="#f59e0b" />
      <UwcIcon name="arrow-repeat" size="28px" spin color="#22c55e" />
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;">
      <uwc-icon name="arrow-clockwise" size="28px" spin color="#6366f1"></uwc-icon>
      <uwc-icon name="gear-fill" size="28px" spin color="#f59e0b"></uwc-icon>
      <uwc-icon name="arrow-repeat" size="28px" spin color="#22c55e"></uwc-icon>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;">
      <uwc-icon name="arrow-clockwise" size="28px" spin color="#6366f1"></uwc-icon>
      <uwc-icon name="gear-fill" size="28px" spin color="#f59e0b"></uwc-icon>
      <uwc-icon name="arrow-repeat" size="28px" spin color="#22c55e"></uwc-icon>
    </div>
  `
};

Icons in UI context

Icons are inline-flex by default and inherit currentColor — they compose naturally into buttons, alerts, and any component. 

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('icon-context-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;flex-direction:column;gap:1rem;max-width:360px;">
        <div style="display:flex;align-items:center;gap:.6rem;padding:.65rem .85rem;border-radius:8px;background:#dcfce7;border:1px solid #86efac;font-size:.875rem;color:#14532d;">
          <uwc-icon name="check-circle-fill" size="16px" color="#16a34a"></uwc-icon>
          Changes saved successfully.
        </div>
        <div style="display:flex;align-items:center;gap:.6rem;padding:.65rem .85rem;border-radius:8px;background:#fee2e2;border:1px solid #fca5a5;font-size:.875rem;color:#7f1d1d;">
          <uwc-icon name="x-circle-fill" size="16px" color="#dc2626"></uwc-icon>
          Failed to connect. Please retry.
        </div>
        <div style="display:flex;gap:.4rem;">
          <uwc-button icon="pencil" icon-only variant="secondary" aria-label="Edit"></uwc-button>
          <uwc-button icon="clipboard" icon-only variant="secondary" aria-label="Copy"></uwc-button>
          <uwc-button icon="trash" icon-only variant="danger" aria-label="Delete"></uwc-button>
        </div>
      </div>
    `;
  }
}

import React from 'react';
import { UwcIcon, UwcButton } from '@uwc/components/react';

export default function App() {
  const successStyle = {
    display: 'flex', alignItems: 'center', gap: '.6rem', padding: '.65rem .85rem',
    borderRadius: '8px', background: '#dcfce7', border: '1px solid #86efac',
    fontSize: '.875rem', color: '#14532d',
  };
  const errorStyle = {
    display: 'flex', alignItems: 'center', gap: '.6rem', padding: '.65rem .85rem',
    borderRadius: '8px', background: '#fee2e2', border: '1px solid #fca5a5',
    fontSize: '.875rem', color: '#7f1d1d',
  };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: '360px' }}>
      <div style={successStyle}>
        <UwcIcon name="check-circle-fill" size="16px" color="#16a34a" />
        Changes saved successfully.
      </div>
      <div style={errorStyle}>
        <UwcIcon name="x-circle-fill" size="16px" color="#dc2626" />
        Failed to connect. Please retry.
      </div>
      <div style={{ display: 'flex', gap: '.4rem' }}>
        <UwcButton icon="pencil" iconOnly variant="secondary" aria-label="Edit" />
        <UwcButton icon="clipboard" iconOnly variant="secondary" aria-label="Copy" />
        <UwcButton icon="trash" iconOnly variant="danger" aria-label="Delete" />
      </div>
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;flex-direction:column;gap:1rem;max-width:360px;">
      <div style="display:flex;align-items:center;gap:.6rem;padding:.65rem .85rem;border-radius:8px;background:#dcfce7;border:1px solid #86efac;font-size:.875rem;color:#14532d;">
        <uwc-icon name="check-circle-fill" size="16px" color="#16a34a"></uwc-icon>
        Changes saved successfully.
      </div>
      <div style="display:flex;align-items:center;gap:.6rem;padding:.65rem .85rem;border-radius:8px;background:#fee2e2;border:1px solid #fca5a5;font-size:.875rem;color:#7f1d1d;">
        <uwc-icon name="x-circle-fill" size="16px" color="#dc2626"></uwc-icon>
        Failed to connect. Please retry.
      </div>
      <div style="display:flex;gap:.4rem;">
        <uwc-button icon="pencil" icon-only variant="secondary" aria-label="Edit"></uwc-button>
        <uwc-button icon="clipboard" icon-only variant="secondary" aria-label="Copy"></uwc-button>
        <uwc-button icon="trash" icon-only variant="danger" aria-label="Delete"></uwc-button>
      </div>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;flex-direction:column;gap:1rem;max-width:360px;">
      <div style="display:flex;align-items:center;gap:.6rem;padding:.65rem .85rem;border-radius:8px;background:#dcfce7;border:1px solid #86efac;font-size:.875rem;color:#14532d;">
        <uwc-icon name="check-circle-fill" size="16px" color="#16a34a"></uwc-icon>
        Changes saved successfully.
      </div>
      <div style="display:flex;align-items:center;gap:.6rem;padding:.65rem .85rem;border-radius:8px;background:#fee2e2;border:1px solid #fca5a5;font-size:.875rem;color:#7f1d1d;">
        <uwc-icon name="x-circle-fill" size="16px" color="#dc2626"></uwc-icon>
        Failed to connect. Please retry.
      </div>
      <div style="display:flex;gap:.4rem;">
        <uwc-button icon="pencil" icon-only variant="secondary" aria-label="Edit"></uwc-button>
        <uwc-button icon="clipboard" icon-only variant="secondary" aria-label="Copy"></uwc-button>
        <uwc-button icon="trash" icon-only variant="danger" aria-label="Delete"></uwc-button>
      </div>
    </div>
  `
};
Changes saved successfully.
Failed to connect. Please retry.

Properties

Name Type Default Description
styles — css` :host { display: inline-flex; vertical-align: middle; justify-content: center; align-items: center; } /* This ensures the injected SVG obeys the host's size and color */ .icon-container, .icon-container svg { display: block; width: var(--icon-size); height: var(--icon-size); fill: var(--icon-color); } /* Spin animation for loading icons */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .icon-container.spin svg { animation: spin 1s linear infinite; } ` —
name string '' —
library string 'default' —
size string '18px' —
color string 'currentColor' —
spin boolean false —
src string | undefined — —

Events

Name Type Description
uwc-load CustomEvent —
uwc-error CustomEvent —