Elgato Icons

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
└── ...