• Public
  • Public/Protected
  • All



npm versionnpm downloads Twitter Follow

This project is part of the @thi.ng/umbrella monorepo.


This package provides the full set of IBM's Carbon icons in hiccup format (i.e. as Javascript encoded SVG), ready to be used with @thi.ng/hdom / @thi.ng/hiccup.

Each icon is defined in its own source file and can be imported individually. The converted icons DO NOT have a fixed size and will expand to the available size (see example below).

Contact sheet

All icons can be previewed here: contact sheet. (Source code)


STABLE - used in production


yarn add @thi.ng/hiccup-carbon-icons
// ES module
<script type="module" src="https://unpkg.com/@thi.ng/hiccup-carbon-icons?module" crossorigin></script>

// UMD
<script src="https://unpkg.com/@thi.ng/hiccup-carbon-icons/lib/index.umd.js" crossorigin></script>

Package sizes (gzipped, pre-treeshake): ESM: 16.41 KB / CJS: 16.93 KB / UMD: 16.15 KB


Usage examples

Several demos in this repo's /examples directory are using this package.

A selection:

ScreenshotDescriptionLive demoSource
Parser grammar livecoding editor/playground & codegenDemoSource
rdom drag & drop exampleDemoSource


Generated API docs

import { renderOnce } from "@thi.ng/hdom";
import { CODE } from "@thi.ng/hiccup-carbon-icons";

// using tachyons css classes for brevity
const iconButton = (icon, onclick, label?) =>
    ["a", { onclick, href: "#" },
        ["span.dib.w1.h1.mr1", icon],

renderOnce(iconButton(CODE, () => alert("hi"), "show me the code"));

Icon conversion process

The icon conversion is largely automated via the supplied bash script (currently with some additional minor manual cleanup needed) and requires svgo and a checkout of both the original carbon-icons repo and the umbrella mono repo.

# install pre-requisites
yarn global add svgo

git clone https://github.com/IBM/carbon-icons.git
git clone https://github.com/thi-ng/umbrella.git

# build xml to hiccup converter CLI tool
cd umbrella/examples/xml-converter
yarn install
yarn build-cli

# switch to package root
cd ../../hiccup-carbon-icons
# convert icons and write results to package src folder
./convert-icons src ../../carbon-icons/src/svg/*.svg

# update contact sheet (will be written to package root)
yarn test

# open in browser
open contact-sheet.html

# rebuild package
yarn build


Karsten Schmidt


© 2018 - 2020 Karsten Schmidt // Apache Software License 2.0

Generated using TypeDoc