TypeScript icon, indicating that this package has built-in type declarations

    8.14.0 • Public • Published

    category: packages


    npm  MIT License  Code of Conduct


    yarn add @instructure/ui-icons


    To use the React components:

    import { IconAddLine } from '@instructure/ui-icons'
    const MyComponent = () => {
      return <IconAdd />

    Adding and Modifying Icons

    • Use dashes in the name of the .svg files (e.g calendar-month). Use the same name for the "line" and "solid" variants, and save them in the respective folder, e.g. Solid/calendar-month and Line/calendar-month.

    • Copy the new icon files in the /svg/Solid and /svg/Line directories.

    • Run yarn export:icons from the repository root directory to generate the SVG files.

    • Run yarn && yarn bootstrap.

    • Finally, 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.

    • 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.

    • Export strokes to vector.

    • Don’t use borders on vectors, especially not inside/outside borders which aren’t supported in SVG. Do not use clipping paths.

    • 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.




    npm i @instructure/ui-icons

    DownloadsWeekly Downloads






    Unpacked Size

    9.91 MB

    Total Files


    Last publish


    • kyler-instructure
    • jonscheiding
    • instuici
    • codequistador
    • natearmstrong
    • eschiebel
    • maths22
    • hyan
    • jcrystal
    • skacsmark
    • itadmins
    • quizzesuici
    • instructure-toolsmiths-service-user
    • prenner
    • aogata-inst
    • acallejas
    • viktor.ohad
    • eszter.szabo
    • amireh-inst
    • daniel.hatas.instructure
    • brianlwatson
    • instout