Use an icon in HTML, React, CSS, Markdown or Power BI

The same icon is needed in different shapes in different places: inline in HTML, as a component in React, as a background in CSS, as an image URL in Power BI. The Export tab writes each one from the icon and style you have, so you never convert by hand.

#The code tabs

Open the Export tab. Under the download buttons is a row of tabs: SVG, React, CSS, Data URI and Power BI. Each shows the code for the current icon, a short hint on where it goes, and a Copy button.

#SVG: for HTML and design tools

Paste the SVG straight into your HTML where the icon should appear. Inline SVG can be styled with CSS and is read by screen readers when you want it to be. It also pastes into Figma (Ctrl+V or Cmd+V) and most design tools as an editable vector.

If the icon sits next to a text label, it is decoration: add aria-hidden="true" to the <svg>. If it is the only thing in a button, give the button a name with aria-label.

#React: a component

The React tab writes a component named after the icon, such as ChartBar, that passes its props to the <svg>:

export function ChartBar(props) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">…</svg>
  );
}

Save it in your components folder and use it like any other: <ChartBar className="icon" onClick={open} />. Attributes are already in React's spelling (strokeWidth, not stroke-width), and motion from lesson 4 comes along.

#CSS: a background image

The CSS tab writes a class with the icon as a background, no file needed:

.icon-chart-bar {
  width: 48px;
  height: 48px;
  background: url("data:image/svg+xml;utf8,…") center / contain no-repeat;
}

Use it for decorative icons, list bullets or a pseudo-element. Since the colour is baked in, set the colour in the Style tab before you copy.

#Data URI: for img tags and Markdown

A data URI is the whole icon written as an address. Put it anywhere an image URL goes: an <img src>, a Markdown image ![](…), an email template, or a setting that asks for an image link.

#Power BI: an icon in every row

The Power BI tab writes a DAX measure:

Icon chart bar =
"data:image/svg+xml;utf8,…"

1. In Power BI Desktop, create a New measure and paste it.
2. With the measure selected, set Data category to Image URL (on the Measure tools or Modeling ribbon).
3. Add the measure to a table, a matrix or a card (new) image.
4. In a table or matrix, set the size under Format visual, Image size.

To show a different icon per row, such as a green tick when a target is met and a red cross when it is not, export both icons and wrap them in IF or SWITCH. SVG icons in Power BI tables walks through it.

#Which one when

Next: doing all of this for a whole set of icons at once.