@prival-odc/azure-colored-icons

This package ships colored Azure SVG icons as raw .svg files and provides a tiny framework-agnostic Web Component: <azure-icon>.

Install

npm install @prival-odc/azure-colored-icons

Use raw SVG files (assets)

You can reference icons by path via package exports:

import { getIconUrl } from "@prival-odc/azure-colored-icons";

const url = getIconUrl("networking/virtual-networks");
document.querySelector("img").src = url;

Or import a specific icon path (bundler-dependent):

import iconUrl from "@prival-odc/azure-colored-icons/icons/networking/virtual-networks.svg";

Use Web Component

<script type="module">
  import "@prival-odc/azure-colored-icons/web-component";
</script>

<azure-icon name="networking/virtual-networks" size="32" aria-label="Virtual Networks"></azure-icon>

Attributes

• name: "category/icon-name" (recommended)
• src: direct URL to an SVG (overrides name if set)
• size: number (pixels) or CSS size ("24px", "1.5rem", etc.)
• title: tooltip + fallback alt text
• aria-label: sets alt for accessibility

List available icons

import { listIcons } from "@prival-odc/azure-colored-icons";
console.log(listIcons()); // ["networking/virtual-networks", ...]

Notes about licensing

These SVGs originate from Microsoft Azure icon sets. Make sure your intended use (especially redistribution) complies with Microsoft licensing/trademark terms. This package was generated from an uploaded icon archive; no license file was included here.

Use (CSS classes)

Import the stylesheet (choose one):

<!-- readable -->
<link rel="stylesheet" href="node_modules/@prival-odc/azure-colored-icons/dist/azure-icons.css">
<!-- or minified -->
<link rel="stylesheet" href="node_modules/@prival-odc/azure-colored-icons/dist/azure-icons.min.css">

Then use icon classes:

<i class="az az-networking-virtual-networks" aria-hidden="true"></i>

CSS Variables (theme / dark mode)

• --az-size controls width/height (default: 1em)
• --az-filter lets you apply a CSS filter (default: none)

Example (dark mode):

:root { --az-size: 24px; }

@media (prefers-color-scheme: dark) {
  :root {
    /* Optional: if you want to tweak brightness/contrast in dark mode */
    --az-filter: brightness(1.1) contrast(1.05);
  }
}

You can also use size utility classes:

<i class="az az-networking-virtual-networks az-s-32"></i>

Enterprise notes

• The package uses explicit exports, so you can import:
  • @prival-odc/azure-colored-icons/styles.css
  • @prival-odc/azure-colored-icons/styles.min.css
• Icons are referenced with relative URLs (./icons/...) so they work when the dist/ folder is served as-is.