octicons-svelte

Svelte components for GitHub Octicons — modern SVG icons and legacy font-based icons.

Two icon sets

| Set | Version | Rendering | Import path. | | ---------- | --------|----------------------------------- | ------------------------------------------ | | Modern | v19 | Inline <svg> | @children-of-atom/octicons-svelte | | Legacy | v2 | <span> with icon-* CSS classes | @children-of-atom/octicons-svelte/legacy |

Installation

pnpm add @children-of-atom/octicons-svelte

Svelte 5 is a required peer dependency:

pnpm add svelte@^5

Usage

Import using a namespace so icons are accessible via dot notation in Svelte templates:

<script lang="ts">
  import * as Octicon from '@children-of-atom/octicons-svelte';
</script>

<Octicon.AlertFill />
<Octicon.GitBranch size={24} />
<Octicon.Check aria-label="Success" />

<script lang="ts">
  import * as Octicon from '@children-of-atom/octicons-svelte/legacy';
</script>

<Octicon.Clock />
<Octicon.Gear size={14} />

Named imports work too if you prefer:

import { AlertFill, GitBranch } from "@children-of-atom/octicons-svelte";

Modern icon props

Modern icons render as <svg> elements and scale automatically.

| Prop | Type | Default | Description | | ----------------- | ------------------------------------------------------------- | ---------------- | ------------------------------------------------------------- | | size | number \| 'small' \| 'medium' \| 'large' | 16 | Icon size in px. Aliases: small=16, medium=32, large=64 | | fill | string | 'currentColor' | SVG fill color | | verticalAlign | 'middle' \| 'text-bottom' \| 'text-top' \| 'top' \| 'unset' | 'text-bottom' | Inline vertical-align style. Pass 'unset' to opt out | | class | string | — | Additional CSS class | | aria-label | string | — | Accessible label; sets role="img" automatically | | aria-labelledby | string | — | Same as above, via element ID reference | | ...rest | SVGAttributes | — | Any other SVG attribute |

When neither aria-label nor aria-labelledby is set, the icon is hidden from assistive technology (aria-hidden="true").

<!-- Decorative icon (hidden from screen readers) -->
<Octicon.Star />

<!-- Meaningful icon (announced by screen readers) -->
<Octicon.Star aria-label="Starred" />

<!-- Custom size and color -->
<Octicon.Heart size={32} fill="red" />

<!-- Size alias -->
<Octicon.AlertFill size="large" />

<!-- No vertical-align override -->
<Octicon.Gear verticalAlign="unset" />

Legacy icon props

Legacy icons render as <span> elements and depend on the icon-* CSS classes provided by the Pulsar/Atom theme.

| Prop | Type | Default | Description | | ----------- | ---------------------- | ------- | -------------------------------------------------------------------- | | size | number | — | When set, applies font-size and --icon-size CSS variable inline | | monospace | boolean | false | Centers the icon in a fixed-width box (useful in monospace contexts) | | class | string | — | Additional CSS class | | ...rest | HTMLAttributes<span> | — | Any other span attribute |

When size is omitted the icon inherits its size from the surrounding context, which is usually the right behavior inside status bar tiles and other Atom UI.

<!-- Inherits size from theme -->
<Octicon.Clock />

<!-- Explicit size -->
<Octicon.Gear size={14} />

<!-- Fixed-width for alignment in monospace contexts -->
<Octicon.Check monospace />

License

This work is licensed under The MIT License.