@instructure/ui-icons

---

category: packages

ui-icons

Installation

yarn add @instructure/ui-icons

Usage

To use the React components:

import { IconAddLine } from '@instructure/ui-icons'

const MyComponent = () => {
  return <IconAdd />
}

Adding and Modifying Icons

• Start with the Sketch template. Open the template file and then save it as a template (File > Save as Template...). The next time you want to make an icon it will be available in your template list (File > New From Template) in the Sketch app.

• Use dashes in the name of the .sketch files (e.g calendar-month). Use the same name for art-boards, but prefix with the variant, e.g. Solid/calendar-month and Line/calendar-month.

• Save new icon files in the /src directory.

• Run yarn export:icons from the repository root directory to generate the SVG files. Troubleshooting: if sketchtool is not installed do so by running curl -L https://raw.githubusercontent.com/cognitom/gulp-sketch/master/install-sketchtool.sh | sudo sh

• Verify that the art-boards are exported as SVG to the /svg directory. There should be directories for each variant based on the art-board names (Line and Solid).

• Run yarn dev from the repository root directory to start the local server and check the generated output.

• Verify icons display correctly by checking under iconography in the main nav

Guidelines for Drawing Icons

• Draw your icons on the 1920 x 1920 art-boards that are set up for you in the template.

• Before you flatten shapes or vectorize strokes as described below, make a hidden copy of the original paths off to the side so that you can more easily come back and make changes later.

• Flatten your shapes (Layer > Paths > Flatten).

• Export strokes to vector (Layer > Convert to Outlines).

• Don’t use borders on vectors, especially not inside/outside borders which aren’t supported in SVG. Do not use clipping paths as that will have adverse affects when converting sketch to SVG.

• Make sure none of the paths go outside of the art-board. If so, the glyph in the icon font will be misaligned. Draw inside the lines.

• Fill the space edge-to-edge as much as possible. The build process will add margins as needed.