Discover icons used throughout the Elgato ecosystem, commonly found in Stream Deck, Wave Link, Camera Hub, Capture, and Marketplace. Mix, match, and curate your own icon packs based on our design language.

Usage

npm install @elgato/icons

JavaScript Variables

Icons can be imported as SVG strings from @elgato/icons/{s,m,l}, for example:

import { iconLogoElgato } from "@elgato/icons/l";

iconLogoElgato; // SVG string of the Elgato logo, large (l) size.

Icons are available in up to three sizes, small (s), medium (m), and large (l).

• @elgato/icons/s — optimized for 16 × 16 px.
• @elgato/icons/m — optimized for 20 × 20 px.
• @elgato/icons/l — optimized for 24 × 24 px.

React Components

Icons can be imported as React components from @elgato/icons/react, for example

import { IconLogoElgato } from "@elgato/icons/react";

export default function MyComponent() {
    return (
        <div className="icon-wrapper">
            <IconLogoElgato size="m" />
        </div>
    );
};

Icons are available in up to three sizes, small (s), medium (m), and large (l), and the preferred size can be specified using the size property. If the preferred size does not exist, the default size will be used.

SVG Files

All original SVG files are distributed with this package, and can be found within the svg/ directory.

.
├── svg/
|   └── l/
│   ├── m/
│   ├── s/
|   │   ├── ...
|   │   ├── warning.svg
|   │   ├── window--filled.svg
|   │   └── window.svg
└── ...

Font

An icon font is distributed in the font/ directory, in TTF, WOFF, and WOFF2 formats, with a ready-to-use CSS stylesheet.

.
├── font/
│   ├── elgato-icons.css
│   ├── elgato-icons.ttf
│   ├── elgato-icons.woff
│   ├── elgato-icons.woff2
│   └── info.json
└── ...

Import the stylesheet from the package and use icon class names directly:

import "@elgato/icons/font";

Or reference it directly in HTML via a CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@elgato/icons/font/elgato-icons.css" />

<i class="elgato-icons-accessories-l"></i>
<i class="elgato-icons-camera-l"></i>
<i class="elgato-icons-settings-l"></i>

Class names follow the patterns elgato-icons-{icon-name}-{size} for regular icons and elgato-icons-{icon-name}--filled-{size} for filled variants, where {size} is one of l, m, or s. A full mapping of icon names (including filled variants) to unicode code points can be found in font/info.json.