Backstage Simple Icons Plugin

Simple Icons is a community project that provides brand SVG icons. It covers thousands of products and services with a consistent style. The icons are free and open source. See the catalog at Simple Icons.

The Simple Icons plugin brings those icons into your Backstage app. You can reference an icon by its slug in entity links or any spot that renders an icon. It supports full color or monochrome. It works in light and dark themes. Icons stay sharp at any size.

Typical uses include catalog entities that link to tools such as Grafana Prometheus GitHub and BigQuery. You can add tech badges on system or component pages. You get consistent branding in custom cards and plugin UIs. With the EntityPresentationApi you can show a brand icon for an entity based on a simple annotation. This helps people scan lists faster.

The plugin is small and focused. It does not require server changes. You can include the full set or pick a small subset to keep your bundle lean. Recent releases track Backstage 1.41.1 and earlier updates. It builds on the official Simple Icons package under the hood.

Installation Instructions

These instructions apply to self-hosted Backstage only.

Install the plugin into your app package

Copy

yarn --cwd packages/app add @dweber019/backstage-plugin-simple-icons

Copy

// packages/app/src/App.tsx

import React from 'react';
import { createApp } from '@backstage/app-defaults';
import { apis } from './apis';
import { simpleIconsColor } from '@dweber019/backstage-plugin-simple-icons';

const app = createApp({
  apis,
  bindRoutes({ bind }) {
    // keep your existing route bindings
  },
  icons: simpleIconsColor,
});

export default app.createRoot();

You can switch to black and white icons if you prefer

Copy

// packages/app/src/App.tsx

import React from 'react';
import { createApp } from '@backstage/app-defaults';
import { apis } from './apis';
import { simpleIcons } from '@dweber019/backstage-plugin-simple-icons';

const app = createApp({
  apis,
  bindRoutes({ bind }) {
    // keep your existing route bindings
  },
  icons: simpleIcons,
});

export default app.createRoot();

Load only a small subset of icons if you want a lighter bundle

Copy

// packages/app/src/App.tsx

import React from 'react';
import { createApp } from '@backstage/app-defaults';
import { apis } from './apis';
import { siNodedotjs } from 'simple-icons';
import { createIcon } from '@dweber019/backstage-plugin-simple-icons';

const app = createApp({
  apis,
  bindRoutes({ bind }) {
    // keep your existing route bindings
  },
  icons: {
    nodedotjs: createIcon(siNodedotjs),
  },
});

export default app.createRoot();

Enable EntityPresentationApi so entities can show the right brand icon from an annotation

Copy

// packages/app/src/apis.ts

import { AnyApiFactory, createApiFactory } from '@backstage/core-plugin-api';
import { catalogApiRef, entityPresentationApiRef } from '@backstage/plugin-catalog-react';
import { SimpleIconsEntityPresentationApi } from '@dweber019/backstage-plugin-simple-icons';

export const apis: AnyApiFactory[] = [
  // keep your existing api factories
  createApiFactory({
    api: entityPresentationApiRef,
    deps: { catalogApi: catalogApiRef },
    factory: ({ catalogApi }) => {
      return SimpleIconsEntityPresentationApi.create({ catalogApi });
    },
  }),
];

Use icons in your entities

Use the icon field on links. Copy the icon slug from the Simple Icons site. Hover the icon name then copy

Copy

# catalog-info.yaml

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: demo
  links:
    - title: Prometheus
      url: https://prometheus.io
      icon: prometheus
    - title: Grafana
      url: https://grafana.com
      icon: grafana
    - title: Google BigQuery
      url: https://cloud.google.com/bigquery
      icon: googlebigquery
spec:
  type: service
  owner: team-a
  lifecycle: production

Use the annotation that powers EntityPresentationApi

Add the slug you want to show for this entity. This affects places where Backstage renders the entity icon through the presentation api

Copy

# catalog-info.yaml

apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: demo
  annotations:
    simpleicons.org/icon-slug: grafana
spec:
  type: service
  owner: team-a
  lifecycle: production

Backend impact

This plugin has no backend part. No changes are needed in the legacy backend. No changes are needed in the new backend system.

Changelog

This changelog is produced from commits made to the Simple Icons plugin since a year ago, and based on the code located here. It may not contain information about all commits. Releases and version bumps are intentionally omitted. This changelog is generated by AI.

Features

Update simple icons data in the plugin #80 merged 10 months ago #81 merged 10 months ago
Update simple icons dependency #73 merged 11 months ago #74 merged 11 months ago

Fixes

Use IconComponent type to fix types that referenced AppIcons #78 merged 11 months ago #79 merged 11 months ago

Maintenance

Update Backstage to 1.41.1 #108 merged 2 months ago #107 merged 2 months ago
Update Backstage to 1.41.0 Remove React imports #101 merged 3 months ago #102 merged 3 months ago
Update Backstage to 1.36.1 #92 merged 6 months ago #93 merged 6 months ago
Update Backstage to 1.35.0 #86 merged 8 months ago #87 merged 8 months ago
Update Backstage to 1.34.2 #84 merged 9 months ago #85 merged 9 months ago
Update Backstage dependencies to 1.32.2 #77 merged 11 months ago

Breaking changes

None

Set up Backstage in minutes with Roadie

Focus on using Backstage, rather than building and maintaining it.

Get a demo