Icon

Experimental Alpha

This library is a work-in-progress. We are releasing it early to gather feedback, but it is not ready for production.

Icon is used to visually represent an action, object, or state within the UI.

Examples

Vue

Lit

React

Live Preview

Default Icon

Basic icon with default sizing and neutral styling.

Sizes

Different size variants for the icon wrapper and SVG.

Types

Semantic types for color theming the icon.

With Custom SVG

Using the default slot to provide custom SVG content.

CSS Shadow Parts Customization

Use CSS Shadow Parts to customize the icon's appearance without breaking encapsulation. The following examples are meant solely to show how to utilize CSS shadow parts to create custom icon styles.

View Vue Code

<template>
  <section>
    <div class="mbe4">
      <h2>Default Icon</h2>
      <p class="mbs2 mbe3">Basic icon with default sizing and neutral styling.</p>
      <div class="stacked-mobile">
        <VueIcon
          size="16"
          noFill
        >
          <Star />
        </VueIcon>
      </div>
    </div>

    <div class="mbe4">
      <h2>Sizes</h2>
      <p class="mbs2 mbe3">Different size variants for the icon wrapper and SVG.</p>
      <div class="stacked-mobile items-center mbe4">
        <VueIcon
          noFill
          size="14"
        >
          <Star />
        </VueIcon>
        <VueIcon
          noFill
          size="16"
        >
          <Star />
        </VueIcon>
        <VueIcon
          noFill
          size="20"
        >
          <Star />
        </VueIcon>
        <VueIcon
          noFill
          size="24"
        >
          <Star />
        </VueIcon>
        <VueIcon
          noFill
          size="32"
        >
          <Star />
        </VueIcon>
        <VueIcon
          noFill
          size="48"
        >
          <Star />
        </VueIcon>
      </div>
    </div>

    <div class="mbe4">
      <h2>Types</h2>
      <p class="mbs2 mbe3">Semantic types for color theming the icon.</p>
      <div class="stacked-mobile mbe4">
        <VueIcon
          noFill
          type="info"
          size="20"
        >
          <Star />
        </VueIcon>
        <VueIcon
          noFill
          type="success"
          size="20"
        >
          <Star />
        </VueIcon>
        <VueIcon
          noFill
          type="warning"
          size="20"
        >
          <Star />
        </VueIcon>
        <VueIcon
          noFill
          type="error"
          size="20"
        >
          <Star />
        </VueIcon>
        <VueIcon
          noFill
          type="action"
          size="20"
        >
          <Star />
        </VueIcon>
        <VueIcon
          noFill
          type="monochrome"
          size="20"
        >
          <Star />
        </VueIcon>
      </div>
    </div>

    <div class="mbe4">
      <h2>With Custom SVG</h2>
      <p class="mbs2 mbe3">Using the default slot to provide custom SVG content.</p>
      <div class="stacked-mobile mbe4">
        <VueIcon
          noFill
          size="24"
          type="error"
        >
          <Apple />
        </VueIcon>
        <VueIcon
          noFill
          size="24"
          type="warning"
        >
          <Zap />
        </VueIcon>
        <VueIcon
          noFill
          size="24"
          type="success"
        >
          <CalendarCheck />
        </VueIcon>
      </div>
    </div>

    <div class="mbe4">
      <h2>CSS Shadow Parts Customization</h2>
      <p class="mbs2 mbe3">
        Use CSS Shadow Parts to customize the icon's appearance without breaking encapsulation. The following examples are meant solely to show how to utilize CSS shadow parts to create custom icon styles.
      </p>
    </div>
    <div class="stacked-mobile mbe4">
      <VueIcon
        class="custom-icon-base"
        size="24"
      >
        <Star />
      </VueIcon>
      <VueIcon
        class="custom-minimal"
        size="32"
        noFill
        type="primary"
      >
        <CalendarCheck />
      </VueIcon>
    </div>
  </section>
</template>

<script setup lang="ts">
import { VueIcon } from "agnosticui-core/icon/vue";
import { Apple, CalendarCheck, Zap, Star } from "lucide-vue-next";
</script>

<style scoped>
/* CSS Shadow Parts customization examples */

.custom-icon-base::part(icon-base) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  padding: 0.4rem;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.custom-icon-base svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  color: #b9c6ff;
  fill: none;
  stroke: currentColor;
}

.custom-minimal::part(icon-base) {
  border: 2px solid #e5e7eb;
  border-radius: 4px;
}
</style>

Live Preview

View Lit / Web Component Code

import { LitElement, html } from 'lit';
import 'agnosticui-core/icon';

export class IconLitExamples extends LitElement {
  // Render in light DOM to access global utility classes
  createRenderRoot() {
    return this;
  }

  render() {
    return html`
      <section>
        <div class="mbe4">
          <h2>Default Icon</h2>
          <p class="mbs2 mbe3">Basic icon with default sizing and neutral styling.</p>
          <div class="stacked-mobile">
            <ag-icon size="16" no-fill>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
              </svg>
            </ag-icon>
          </div>
        </div>

        <div class="mbe4">
          <h2>Sizes</h2>
          <p class="mbs2 mbe3">Different size variants for the icon wrapper and SVG.</p>
          <div class="stacked-mobile items-center mbe4">
            <ag-icon no-fill size="14">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
              </svg>
            </ag-icon>
            <ag-icon no-fill size="16">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
              </svg>
            </ag-icon>
            <ag-icon no-fill size="20">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
              </svg>
            </ag-icon>
            <ag-icon no-fill size="24">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
              </svg>
            </ag-icon>
            <ag-icon no-fill size="32">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
              </svg>
            </ag-icon>
            <ag-icon no-fill size="48">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
              </svg>
            </ag-icon>
          </div>
        </div>

        <div class="mbe4">
          <h2>Types</h2>
          <p class="mbs2 mbe3">Semantic types for color theming the icon.</p>
          <div class="stacked-mobile mbe4">
            <ag-icon no-fill type="info" size="20">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
              </svg>
            </ag-icon>
            <ag-icon no-fill type="success" size="20">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
              </svg>
            </ag-icon>
            <ag-icon no-fill type="warning" size="20">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
              </svg>
            </ag-icon>
            <ag-icon no-fill type="error" size="20">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
              </svg>
            </ag-icon>
            <ag-icon no-fill type="action" size="20">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
              </svg>
            </ag-icon>
            <ag-icon no-fill type="monochrome" size="20">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
              </svg>
            </ag-icon>
          </div>
        </div>

        <div class="mbe4">
          <h2>With Custom SVG</h2>
          <p class="mbs2 mbe3">Using the default slot to provide custom SVG content.</p>
          <div class="stacked-mobile mbe4">
            <ag-icon no-fill size="24" type="error">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M12 20.94c1.5 0 2.75 1.06 4.96 2.06 1.5-1.25 2.5-2.5 2.5-4.5V8.94a6 6 0 0 0-6-6 6 6 0 0 0-6 6v9.56c0 2 1 3.25 2.5 4.5 2.21-1 3.46-2.06 4.96-2.06z"></path>
                <path d="M8 14h8"></path>
                <path d="M8 10h8"></path>
              </svg>
            </ag-icon>
            <ag-icon no-fill size="24" type="warning">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
              </svg>
            </ag-icon>
            <ag-icon no-fill size="24" type="success">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                <line x1="16" y1="2" x2="16" y2="6"></line>
                <line x1="8" y1="2" x2="8" y2="6"></line>
                <line x1="3" y1="10" x2="21" y2="10"></line>
                <path d="m9 16 2 2 4-4"></path>
              </svg>
            </ag-icon>
          </div>
        </div>

        <div class="mbe4">
          <h2>CSS Shadow Parts Customization</h2>
          <p class="mbs2 mbe3">
            Use CSS Shadow Parts to customize the icon's appearance without breaking encapsulation. The following examples are meant solely to show how to utilize CSS shadow parts to create custom icon styles.
          </p>
        </div>
        <div class="stacked-mobile mbe4">
          <ag-icon class="custom-icon-base" size="24">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
            </svg>
          </ag-icon>
          <ag-icon class="custom-minimal" size="32" no-fill type="primary">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
              <path d="m9 16 2 2 4-4"></path>
            </svg>
          </ag-icon>
        </div>
      </section>
    `;
  }
}

// Register the custom element
customElements.define('icon-lit-examples', IconLitExamples);

Interactive Preview: Click the "Open in StackBlitz" button below to see this example running live in an interactive playground.

View React Code

import { ReactIcon } from "agnosticui-core/icon/react";

export default function IconReactExamples() {
  return (
    <section>
      <div className="mbe4">
        <h2>Default Icon</h2>
        <p className="mbs2 mbe3">Basic icon with default sizing and neutral styling.</p>
        <div className="stacked-mobile">
          <ReactIcon size="16" noFill>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
            </svg>
          </ReactIcon>
        </div>
      </div>

      <div className="mbe4">
        <h2>Sizes</h2>
        <p className="mbs2 mbe3">Different size variants for the icon wrapper and SVG.</p>
        <div className="stacked-mobile items-center mbe4">
          <ReactIcon noFill size="14">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
            </svg>
          </ReactIcon>
          <ReactIcon noFill size="16">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
            </svg>
          </ReactIcon>
          <ReactIcon noFill size="20">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
            </svg>
          </ReactIcon>
          <ReactIcon noFill size="24">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
            </svg>
          </ReactIcon>
          <ReactIcon noFill size="32">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
            </svg>
          </ReactIcon>
          <ReactIcon noFill size="48">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
            </svg>
          </ReactIcon>
        </div>
      </div>

      <div className="mbe4">
        <h2>Types</h2>
        <p className="mbs2 mbe3">Semantic types for color theming the icon.</p>
        <div className="stacked-mobile mbe4">
          <ReactIcon noFill type="info" size="20">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
            </svg>
          </ReactIcon>
          <ReactIcon noFill type="success" size="20">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
            </svg>
          </ReactIcon>
          <ReactIcon noFill type="warning" size="20">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
            </svg>
          </ReactIcon>
          <ReactIcon noFill type="error" size="20">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
            </svg>
          </ReactIcon>
          <ReactIcon noFill type="action" size="20">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
            </svg>
          </ReactIcon>
          <ReactIcon noFill type="monochrome" size="20">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
            </svg>
          </ReactIcon>
        </div>
      </div>

      <div className="mbe4">
        <h2>With Custom SVG</h2>
        <p className="mbs2 mbe3">Using the default slot to provide custom SVG content.</p>
        <div className="stacked-mobile mbe4">
          <ReactIcon noFill size="24" type="error">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <path d="M12 20.94c1.5 0 2.75 1.06 4.96 2.06 1.5-1.25 2.5-2.5 2.5-4.5V8.94a6 6 0 0 0-6-6 6 6 0 0 0-6 6v9.56c0 2 1 3.25 2.5 4.5 2.21-1 3.46-2.06 4.96-2.06z"></path>
              <path d="M8 14h8"></path>
              <path d="M8 10h8"></path>
            </svg>
          </ReactIcon>
          <ReactIcon noFill size="24" type="warning">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
            </svg>
          </ReactIcon>
          <ReactIcon noFill size="24" type="success">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
              <line x1="16" y1="2" x2="16" y2="6"></line>
              <line x1="8" y1="2" x2="8" y2="6"></line>
              <line x1="3" y1="10" x2="21" y2="10"></line>
              <path d="m9 16 2 2 4-4"></path>
            </svg>
          </ReactIcon>
        </div>
      </div>

      <div className="mbe4">
        <h2>CSS Shadow Parts Customization</h2>
        <p className="mbs2 mbe3">
          Use CSS Shadow Parts to customize the icon's appearance without breaking encapsulation. The following examples are meant solely to show how to utilize CSS shadow parts to create custom icon styles.
        </p>
      </div>
      <div className="stacked-mobile mbe4">
        <ReactIcon className="custom-icon-base" size="24">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
          </svg>
        </ReactIcon>
        <ReactIcon className="custom-minimal" size="32" noFill type="primary">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
            <line x1="16" y1="2" x2="16" y2="6"></line>
            <line x1="8" y1="2" x2="8" y2="6"></line>
            <line x1="3" y1="10" x2="21" y2="10"></line>
            <path d="m9 16 2 2 4-4"></path>
          </svg>
        </ReactIcon>
      </div>
    </section>
  );
}

Open in StackBlitz

Usage

TIP

The framework examples below import AgnosticUI as an npm package. Alternatively, you can use the CLI for complete control, AI/LLM visibility, and full code ownership:

npx ag init --framework FRAMEWORK # react, vue, lit, svelte, etc.
npx ag add Icon

The CLI copies source code directly into your project, giving you full visibility and control. After running npx ag add, you'll receive exact import instructions.

Vue

<template>
  <VueIcon size="24" type="success">
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
    </svg>
  </VueIcon>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { VueIcon } from 'agnosticui-core/icon/vue';
export default defineComponent({
  components: { VueIcon }
});
</script>

React

import { ReactIcon } from 'agnosticui-core/icon/react';

export default function Example() {
  return (
    <ReactIcon size="24" type="success">
      <svg viewBox="0 0 24 24" aria-hidden="true">
        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
      </svg>
    </ReactIcon>
  );
}

Lit (Web Components)

<script type="module">
  import 'agnosticui-core/icon';
</script>
<ag-icon size="24" type="success">
  <svg viewBox="0 0 24 24" aria-hidden="true">
    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
  </svg>
</ag-icon>

Props

Prop	Type	Default	Description
size	string	''	Size variant for the icon wrapper and SVG (e.g., '14', '16', '18', '20', '24', '32', '36', '40', '48', '56', '64').
type	'info' | 'action' | 'success' | 'warning' | 'error' | ''	''	Semantic type for color theming the icon.

CSS Shadow Parts

Part	Description
icon-base	The main wrapper element for the icon's SVG content.

Customization Example

/* Customize the icon base */
ag-icon.custom-gradient::part(icon-base) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  padding: 0.5rem;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

ag-icon.custom-gradient svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

Accessibility

Icons are typically decorative and use aria-hidden="true" on the SVG to prevent screen readers from announcing them. If the icon conveys meaning (e.g., in a button), pair it with descriptive text or ARIA labels on the parent element. For interactive icons, ensure the container has appropriate roles and labels.

Notes

• Sizes: Available options include '14', '16', '18', '20', '24', '32', '36', '40', '48', '56', '64'; empty string uses default sizing.
• Types: Empty type uses neutral styling; use 'info', 'action', 'success', 'warning', or 'error' for semantic colors.
• Default Slot: Provide custom SVG content via the default slot; the component scales the SVG to fit the size.
• All implementations share the same underlying styles and behavior. Properties can be set via attributes (e.g., <ag-icon size="24">) or property binding in Lit templates (e.g., .size=${'24'}).