The agnostic-astro package utilizes utilizes XElement. Here's an agnostic-astro TBD:

Ensure you've installed the agnostic-astro npm package (note this installs depedency agnostic-css as well):

npm i agnostic-astro

and then import common.min.css from your “base layout” (you should only need to do this in once place as this is global CSS). This brings in the required CSS custom properties, reset, and properties:

import 'agnostic-css/public/css-dist/common.min.css';

Then you can import Astro Icons component:

import AgIcon from 'agnostic-astro/Icon.astro';

AgnosticUI Icon component is a thin wrapper around SVG icons and is meant to work with most reputable SVG icon systems. Note you will need to ensure the SVG icons being used have had their width and height attributes removed so that they can dynamically have their width set based on CSS classes applied. Further, the SVG icons themselves must either use fill=currentColor or not supply a fill presentational attribute so that they utilize the font color defined in CSS. Same for strokes.

<!-- Using an SVG -->
<AgIcon type="success" size={40}>
  <IconOctiHouse />
</AgIcon> 
<!-- Using an SVG sprite symbol -->
<AgIcon type="success" size={32}>
  <svg class="icon-star">
    <use xlink:href="#star"></use>
  </svg>
</AgIcon>