platformicons

Platformicons

A set of platform and framework icons from the people behind https://sentry.io.

Installation

# yarn
yarn add platformicons

# npm
npm install platformicons

React is a peer dependency, so make sure it’s installed in your project.

The package ships both CommonJS and ESM builds:

• "main" → build/index.js (CommonJS — works with webpack, Gatsby, etc.)
• "module" → esmbuild/index.js (ESM — works with Vite, Astro, etc.)

Most bundlers pick the right entry automatically. Static SVG imports ensure both module systems resolve icons correctly.

Usage

import { PlatformIcon } from ‘platformicons’;

function App() {
  return <PlatformIcon platform="javascript-react" size={32} />;
}

Props

Prop	Type	Default	Description
platform	string	—	Platform identifier (e.g. "python-django", "javascript-react")
size	string | number	20	Icon width and height in pixels
format	"sm" | "lg"	"sm"	"sm" uses compact icons from /svg, "lg" uses detailed icons from /svg_80x80
radius	number | null	3	Border radius in pixels
withLanguageIcon	boolean	false	Show a small language badge in the bottom-right corner (e.g. the Python logo on a Django icon)
languageIconStyles	React.CSSProperties	{}	Custom styles for the language badge

Platform Names

Platforms use a language-framework naming convention:

python-django
javascript-react
ruby-rails
go-echo

Both dashes and dots are accepted (python-django and python.django are equivalent). If an exact match isn’t found, the library falls back to the language icon (the part before the first dash), then to a generic default icon.

node-* is an alias for javascript-* for backwards compatibility.

You can get the full list of supported platform keys at runtime:

import { platforms } from ‘platformicons’;
// platforms is a string[] of all valid platform keys

Preloading

To avoid render jank when icons appear on a new page, you can preload them:

import { preloadIcons } from ‘platformicons’;

// Preload all icons (both sizes)
preloadIcons();

// Preload only small or large icons
preloadIcons(‘sm’);
preloadIcons(‘lg’);

This inserts <link rel="preload"> tags into the document head.

Using SVGs Directly

If you aren’t using React, the raw SVG files are included in the package:

• platformicons/svg/ — small icons (solid backgrounds, optimized for small sizes)
• platformicons/svg_80x80/ — large icons (transparent backgrounds, 80x80px)

Publishing Changes

Platformicons uses GitHub Actions to publish changes. You don’t need to update the version in package.json since that’s done automatically.

• Make a change but don’t update the version in package.json
• Merge with Master
• Head to the Release workflow and then run the workflow
• This will create an issue in getsentry/publish
• Add the accepted label to publish

Contributing

See CONTRIBUTING.md for development setup and how to add new icons.