@gsti/microsoft

Microsoft icon fonts packaged for the web, Font Awesome style.

Installation

npm install @gsti/microsoft

CDN

No installation needed — link directly from jsDelivr or unpkg:

<!-- jsDelivr (recommended) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gsti/[email protected]/css/all.min.css">

<!-- unpkg -->
<link rel="stylesheet" href="https://unpkg.com/@gsti/[email protected]/css/all.min.css">

To load a single font family instead of everything:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gsti/[email protected]/css/azure.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gsti/[email protected]/css/microsoft.min.css">

Usage — CSS

Import the full stylesheet (all fonts):

<link rel="stylesheet" href="node_modules/@gsti/microsoft/css/all.css">

Or import a specific font only:

<link rel="stylesheet" href="node_modules/@gsti/microsoft/css/azure.css">
<link rel="stylesheet" href="node_modules/@gsti/microsoft/css/microsoft.css">

HTML syntax

<i class="ms-azure ms-f000"></i>

Two classes are required:

| Class | Role | |---|---| | ms-<family> | Selects the font (e.g. ms-azure) | | ms-<codepoint> | Selects the icon (e.g. ms-f000) |

The base class .ms is optional — family classes already apply all rendering properties.

Available families

| CSS class | Font | |---|---| | ms-azure | Microsoft Azure | | ms-dark-blue | Microsoft Dark Blue | | ms-grey-blue | Microsoft Grey Blue | | ms-light-blue | Microsoft Light Blue | | ms-dynamics | Microsoft Dynamics 365 | | ms-entra | Microsoft Entra | | ms-planner | Microsoft Planner | | ms-power | Microsoft Power | | ms-powerpoint | Microsoft PowerPoint | | ms-project | Microsoft Project | | ms-teams-dark | Microsoft Team Dark Purple | | ms-teams-grey | Microsoft Team Grey Purple | | ms-teams-light | Microsoft Team Light Purple |

Size modifiers

<i class="ms-azure ms-f000 ms-2x"></i>
<i class="ms-azure ms-f000 ms-fw"></i>

Relative sizes (aligned to surrounding text):

| Class | Size | |---|---| | ms-2xs | 10px | | ms-xs | 12px | | ms-sm | 14px | | ms-lg | 20px | | ms-xl | 24px | | ms-2xl | 32px |

Literal multipliers:

| Class | Size | |---|---| | ms-1x | 1em | | ms-2x | 2em | | ms-3x | 3em | | ms-4x | 4em | | ms-5x | 5em | | ms-6x … ms-10x | 6em … 10em |

Width:

| Class | Effect | |---|---| | ms-fw | Fixed width (1.25em) — aligns icons in lists | | ms-width-auto | Natural width |

Rotation & flip

<i class="ms-azure ms-f000 ms-rotate-90"></i>
<i class="ms-azure ms-f000 ms-rotate-180"></i>
<i class="ms-azure ms-f000 ms-rotate-270"></i>
<i class="ms-azure ms-f000 ms-flip-horizontal"></i>
<i class="ms-azure ms-f000 ms-flip-vertical"></i>
<i class="ms-azure ms-f000 ms-flip-both"></i>

<!-- Custom angle via CSS variable -->
<i class="ms-azure ms-f000 ms-rotate-by" style="--ms-rotate-angle: 45deg"></i>

| Class | Effect | |---|---| | ms-rotate-90 | 90° clockwise | | ms-rotate-180 | 180° | | ms-rotate-270 | 270° clockwise | | ms-flip-horizontal | Mirror horizontally | | ms-flip-vertical | Mirror vertically | | ms-flip-both | Mirror on both axes | | ms-rotate-by | Custom angle via --ms-rotate-angle |

Animations

<i class="ms-azure ms-f000 ms-spin"></i>
<i class="ms-azure ms-f000 ms-spin ms-spin-reverse"></i>
<i class="ms-azure ms-f000 ms-spin-pulse"></i>
<i class="ms-azure ms-f000 ms-beat"></i>
<i class="ms-azure ms-f000 ms-beat-fade"></i>
<i class="ms-azure ms-f000 ms-bounce"></i>
<i class="ms-azure ms-f000 ms-fade"></i>
<i class="ms-azure ms-f000 ms-flip"></i>
<i class="ms-azure ms-f000 ms-shake"></i>

| Class | Effect | |---|---| | ms-spin | Continuous rotation | | ms-spin-reverse | Reverse spin direction (combine with ms-spin) | | ms-spin-pulse | Spin in 8 steps | | ms-beat | Pulsing scale | | ms-beat-fade | Pulsing scale + opacity | | ms-bounce | Bouncing | | ms-fade | Fading opacity | | ms-flip | 3D flip | | ms-shake | Shaking |

Animations respect prefers-reduced-motion and are disabled automatically for users who prefer reduced motion.

Customize via CSS variables:

.my-icon {
  --ms-animation-duration: 2s;
  --ms-animation-delay: 0.5s;
  --ms-beat-scale: 1.5;
  --ms-bounce-height: -0.75em;
}

Other utilities

<!-- Stacking two icons -->
<span class="ms-stack">
  <i class="ms-azure ms-f000 ms-stack-2x"></i>
  <i class="ms-dark-blue ms-f001 ms-stack-1x ms-inverse"></i>
</span>

<!-- List icons -->
<ul class="ms-ul">
  <li><i class="ms-azure ms-f000 ms-li"></i> Item</li>
</ul>

<!-- Bordered -->
<i class="ms-azure ms-f000 ms-border"></i>

<!-- Pull left / right -->
<i class="ms-azure ms-f000 ms-pull-left"></i>

| Class | Effect | |---|---| | ms-stack | Container for stacked icons | | ms-stack-1x | Foreground icon (normal size) | | ms-stack-2x | Background icon (2× size) | | ms-inverse | White color (for use on dark backgrounds) | | ms-ul | Unstyled list with icon bullets | | ms-li | Icon bullet inside ms-ul | | ms-border | Adds a border around the icon | | ms-pull-left | Floats icon to the left | | ms-pull-right | Floats icon to the right |

Examples

<!-- Azure icon (codepoint F000) -->
<i class="ms-azure ms-f000"></i>

<!-- Same icon in dark blue -->
<i class="ms-dark-blue ms-f000"></i>

<!-- Teams icon, light purple, 2× size, fixed width -->
<i class="ms-teams-light ms-f042 ms-2x ms-fw"></i>

Usage — JavaScript / TypeScript

import { families, azure } from '@gsti/microsoft';

// Full font name
console.log(families['azure']); // "Microsoft Azure"

// Unicode character for an icon
console.log(azure.icons['f000']); // ""

// Import a single family
import { icons } from '@gsti/microsoft/azure';

// Import everything
import * as ms from '@gsti/microsoft/all';
console.log(ms.azure.family); // "Microsoft Azure"

Naming icons

Codepoints have no semantic names in the font files. To create readable aliases in your project:

/* aliases.css */
.ms-azure-storage::before   { --ms: "\f005"; }
.ms-azure-vm::before        { --ms: "\f01a"; }

Or in JavaScript:

export const azureIcons = {
  storage:        'f005',
  virtualMachine: 'f01a',
};

SCSS

Import the SCSS sources for full customization:

// Override defaults before importing
$font-path: '/assets/webfonts';

@use '@gsti/microsoft/scss/azure';
@use '@gsti/microsoft/scss/microsoft';

Build

npm run build

Compiles scss/ → css/, copies fonts/ → webfonts/, generates js/.

License

MIT — Copyright (c) 2026 Groupe STI