Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
103 lines (72 sloc) 3.89 KB

Usage

Inline SVG (recommended)

We recommend inlining SVG when possible since it's a best practice. Overall, this is the simplest way for using SVG in your HTML documents.

Production-ready SVG files are available in the dist folder, which have been optimized with SVGO.

Note that SVG files in dist folder only include most current icons reflected in carbon-design-system website.

Using SVG sprite

Requirements:

  • svgxuse polyfill
  • Serve carbon-icons.svg as a static asset
  • Use carbon-icons.svg from same origin to avoid CORS issues.

Using SVG sprite from static assets (recommended)

Install carbon-icons and svgxuse so you can use carbon-icons.svg and svgxuse.js.

npm i carbon-icons svgxuse

Use the SVG sprite (carbon-icons.svg) by serving it as a static asset. Note that the use of external svg content via <use> and xlink:href is only compatible when using svgxuse.js polyfill.

Move the carbon-icons.svg and svgxuse.js files from node_modules to a folder where you will serve your static assets from. They will be located in node_modules/carbon-icons and node_modules/svgxuse respectively.

svgxuse is also available via CDN at https://unpkg.com/svgxuse@1.2.4/svgxuse.js

server.js (express)

const express = require('express');
const app = express();

// static assets are served from a folder named dist
app.use(express.static('dist'));

...

index.html

...
<body>
  ...
  <svg>
    <title>Add new users to your account</title>
    <use xlink:href="/carbon-icons.svg#icon--add--glyph"></use>
  </svg>
  ...
  <script src="/svgxuse.js" defer></script>
</body>

You can do a simple copy and paste, setup an automated task to move the files out of node_modules or do whatever is the best fit for your project.

CSS overrides

You can override how an SVG icon looks using CSS.

<svg class="icon">
  <use xlink:href="/carbon-icons.svg#icon--add--glyph"></use>
</svg>
.icon {
  width: 24px;
  height: 24px;
  fill: red;
}

All icons in the library are standarized so that they do not include stroke or internal spacing (padding).

Main files

filename description supported versions
carbon-icons.svg Contains current icons (consolidated subset of legacy icons intended for use on Bluemix) 3.x and newer
carbon-icons.json JSON file created from carbon-icons.svg, used on carbon-design-system website 3.x and newer
carbon-icons.js JS module created from carbon-icons.svg, used in Icon React Component in bluemix-components-react (React repo is for IBMers only for now) 3.x and newer

Accessibility

For screen reader accessibility, use <title> element.

<svg class="icon">
  <title>Add a new service</title>
  <use xlink:href="/carbon-icons.svg#icon--add--glyph"></use>
</svg>
  • The <title> element describes the SVG and what it's used for. Make this as detailed as possible for screen-readers and overall accessibility.
You can’t perform that action at this time.