Icons

Icons should be rendered inline with SVG elements. Since SVG is essentially markup, similar to HTML, this allows the most flexibility in using CSS to style their size, stroke and color, or even animations or other manipulations with Javascript. SVG's with multiple elements may have different colors or strokes applied to each element, allowing for multicolor themeing or other creative applications.

While SVG's may also be used as the src attribute in an img tag, this leaves little control over the appearance. The contents of the SVG is rendered as a static image, and cannot be manipulated in any way. It's almost always preferable to render inline SVG.

alert_circlealert_trianglearrow_downarrow_leftarrow_rightarrow_upavataravatar_circlebellcalendarcameracaret_downcaret_leftcaret_rightcaret_upcheckcheck_circleclockclouddownloadfilegearhearthouseinfo_circlelightbulblockmarkermenumorepencilplusplus_circlequestion_circlesearchspinnerstackstartrashuploadxx_circle

React components

An Icon React component is supplied with Stackup UI. This component requires a collection of SVG files (src/svg) from which it will dynamically import and inline the contents. It accept these props:

name: (string: required) the filename of the SVG asset that will be imported. I.e. name="menu" would import and render src/svg/menu.svg.
fill: (boolean: default = true) whether to fill the icon with color.
stroke: (number: default = 0) stroke width to outline the icon. Will use the default or supplied color prop.
title: (string: default = name) an accessible title to describe the icon. By default, a cleaned version of the name is used.
className: additional classes you wish to apply. You can use most TailwindCSS utility classes to apply styles as you normally would.

Note: the icons in this set are NOT designed to use a stroke; their lines are all created with fills. Other icons you might use may be better design to work with varying strokes._

javascript : Icon JSX

<Icon name="menu" className="w-8 h-8 text-red-600" />

html : Icon rendered HTML/SVG

<span className="icon icon--menu w-8 h-8 text-red-600">
  <svg viewbox="0 0 32 32">
    <title>menu icon</title>
    ...
  </svg>
</span>

Adding different icons

In many cases you'll need additional icons for your project, or perhaps an entirely different set. When you replace or add to the set of SVG files, keep in mind a few things:

Clean your SVGs of extraneous markup. Svgsus is a simple tool desktop for doing this. If you prefer code, take a look at SVGO.
Make sure it has a square viewbox and NO width or height attributes. The current icons have a 32x32 viewbox (viewbox="0 0 32 32") but any square will work.