Skip to main content Skip to navigation

Icons

Comet provides icons for essential UI design, assets, and products.

Choose the available icon you need and use the icon in your product using the steps below.

Interface Icons

  • &#;
    add-point
  • &#;
    add-to-builder
  • &#;
    arrow-down
  • &#;
    arrow-left
  • &#;
    arrow-right
  • &#;
    arrow-up
  • &#;
    assign
  • &#;
    attachment
  • &#;
    badge-correct
  • &#;
    badge-incorrect
  • &#;
    book
  • &#;
    bookmark
  • &#;
    calendar
  • &#;
    caret-down
  • &#;
    caret-left
  • &#;
    caret-right
  • &#;
    caret-up
  • &#;
    check-complete
  • &#;
    check-incomplete
  • &#;
    check
  • &#;
    classroom
  • &#;
    clock-reverse
  • &#;
    clock
  • &#;
    collapse-all
  • &#;
    comment
  • &#;
    copy
  • &#;
    create
  • &#;
    dashboard
  • &#;
    definition
  • &#;
    delete
  • &#;
    device-rotate
  • &#;
    did-you-know
  • &#;
    display
  • &#;
    document-pdf
  • &#;
    document
  • &#;
    download
  • &#;
    edit-profile
  • &#;
    edit
  • &#;
    ellipsis
  • &#;
    erase
  • &#;
    evaluation-criteria
  • &#;
    exclamation
  • &#;
    expand-all
  • &#;
    expand
  • &#;
    eye
  • &#;
    facebook
  • &#;
    flip-x
  • &#;
    flip-y
  • &#;
    fullscreen
  • &#;
    gear
  • &#;
    google-plus
  • &#;
    graphing
  • &#;
    grip
  • &#;
    heart
  • &#;
    help
  • &#;
    home
  • &#;
    honeycomb
  • &#;
    icon-placeholder
  • &#;
    link
  • &#;
    live-chat-available
  • &#;
    live-chat-unavailable
  • &#;
    lock
  • &#;
    map
  • &#;
    menu
  • &#;
    message-error
  • &#;
    message-information
  • &#;
    message-warning
  • &#;
    messaging
  • &#;
    minus-point
  • &#;
    minus
  • &#;
    misconception
  • &#;
    notification
  • &#;
    play
  • &#;
    plus
  • &#;
    print
  • &#;
    profile
  • &#;
    quicklist
  • &#;
    refresh
  • &#;
    reset
  • &#;
    rotate-left
  • &#;
    rotate-right
  • &#;
    search
  • &#;
    send
  • &#;
    share
  • &#;
    sortable-asc
  • &#;
    sortable-desc
  • &#;
    sortable
  • &#;
    star
  • &#;
    stash
  • &#;
    stop-impersonating
  • &#;
    submit
  • &#;
    teacher-note
  • &#;
    tool-box
  • &#;
    transcript
  • &#;
    triangle-down
  • &#;
    triangle-up
  • &#;
    twitter
  • &#;
    unlocked
  • &#;
    upper-right-arrow
  • &#;
    user-add
  • &#;
    whiteboard
  • &#;
    x
  • &#;
    youtube

Assets Icons

  • &#;
    asset-activity
  • &#;
    asset-animation
  • &#;
    asset-article
  • &#;
    asset-assessment-question
  • &#;
    asset-assessment
  • &#;
    asset-assignment
  • &#;
    asset-audio-cd
  • &#;
    asset-audio
  • &#;
    asset-bcr-constructed-response
  • &#;
    asset-board
  • &#;
    asset-book
  • &#;
    asset-brain-game
  • &#;
    asset-clip-art
  • &#;
    asset-constructed-response
  • &#;
    asset-content-collection
  • &#;
    asset-core-interactive-text
  • &#;
    asset-definition-glossary-term
  • &#;
    asset-definition
  • &#;
    asset-document
  • &#;
    asset-ebook
  • &#;
    asset-encyclopedia-article
  • &#;
    asset-event
  • &#;
    asset-exploration
  • &#;
    asset-five-minute-prep
  • &#;
    asset-flash
  • &#;
    asset-folder
  • &#;
    asset-full-video
  • &#;
    asset-fun-damental
  • &#;
    asset-game
  • &#;
    asset-general-graphic-organizer
  • &#;
    asset-glossary-term
  • &#;
    asset-graphic-organizer
  • &#;
    asset-higher-ed-course
  • &#;
    asset-higher-ed-discipline
  • &#;
    asset-higher-ed-grouping
  • &#;
    asset-higher-ed-objective
  • &#;
    asset-higher-ed-unit
  • &#;
    asset-image
  • &#;
    asset-integrated-science-simulation
  • &#;
    asset-interactive-lesson
  • &#;
    asset-interactive-map
  • &#;
    asset-interactive-video
  • &#;
    asset-investigation
  • &#;
    asset-learning-guide
  • &#;
    asset-lesson-plan-video-guide
  • &#;
    asset-lesson-plan
  • &#;
    asset-math-explaination
  • &#;
    asset-math-exploration
  • &#;
    asset-math-interactive
  • &#;
    asset-math-overview
  • &#;
    asset-multi-layer-map
  • &#;
    asset-non-searchable-image
  • &#;
    asset-overview-page
  • &#;
    asset-program
  • &#;
    asset-project
  • &#;
    asset-quiz-question
  • &#;
    asset-quiz
  • &#;
    asset-reading-passage
  • &#;
    asset-resource-page-content-collection
  • &#;
    asset-resource-page
  • &#;
    asset-resource
  • &#;
    asset-review-sheet
  • &#;
    asset-save-state
  • &#;
    asset-science-sleuth
  • &#;
    asset-science-tool
  • &#;
    asset-section
  • &#;
    asset-simulation-exploration
  • &#;
    asset-skill-builder
  • &#;
    asset-song
  • &#;
    asset-sound-effect
  • &#;
    asset-state-standards
  • &#;
    asset-subskill
  • &#;
    asset-techbook-concept-page
  • &#;
    asset-techbook-course
  • &#;
    asset-techbook-discipline
  • &#;
    asset-techbook-subdiscipline
  • &#;
    asset-techbook-unit
  • &#;
    asset-technology-enhanced-assessment
  • &#;
    asset-tei
  • &#;
    asset-theme
  • &#;
    asset-title-chapter-section-video-segment
  • &#;
    asset-title-chapter-video-segment
  • &#;
    asset-title-full-video
  • &#;
    asset-video-guide
  • &#;
    asset-video-segment
  • &#;
    asset-video
  • &#;
    asset-virtual-lab
  • &#;
    asset-writing-prompt

Callout Icons

  • &#;
    callout-did-you-know
  • &#;
    callout-glossary-term
  • &#;
    callout-misconception
  • &#;
    callout-state-standard
  • &#;
    callout-teacher-note

Tool Icons

  • &#;
    tool-atlas
  • &#;
    tool-construction
  • &#;
    tool-equation-solver
  • &#;
    tool-geometry
  • &#;
    tool-global-news
  • &#;
    tool-graphing-calculator
  • &#;
    tool-matrix-solver
  • &#;
    tool-scientific-calculator
  • &#;
    tool-standard-calculator
  • &#;
    tool-unit-converter
  • &#;
    tool-whiteboard
  • &#;
    global-nav-assessment
  • &#;
    global-nav-assignments
  • &#;
    global-nav-board-builder
  • &#;
    global-nav-builder-tools
  • &#;
    global-nav-classrooms
  • &#;
    global-nav-den
  • &#;
    global-nav-health
  • &#;
    global-nav-math-techbook
  • &#;
    global-nav-my-content
  • &#;
    global-nav-my-de
  • &#;
    global-nav-my-notebook
  • &#;
    global-nav-professional-learning
  • &#;
    global-nav-science-elementary
  • &#;
    global-nav-science-middle
  • &#;
    global-nav-science-techbook
  • &#;
    global-nav-search
  • &#;
    global-nav-ss-techbook
  • &#;
    global-nav-streaming
  • &#;
    global-nav-studio-beta

Comet Interface Icons

  • &#;
    clock
  • &#;
    color
  • &#;
    consistency
  • &#;
    efficiency
  • &#;
    quality
  • &#;
    space
  • &#;
    token
  • &#;
    typography

Visual Language

Size

Comet’s iconography share qualities that ensure icons speak the same visual language and clearly convey meaning in a range of sizes and applications.

Icon Size Diagram

Adding intricate details muddies the icon at smaller sizes, rendering it illegible. For example, the lines in the book icon below are too intricate at smaller sizes, becoming sloppy when reduced. The book flaps are sufficient.

  • Do Image

    rely on simple shapes to convey an icon’s meaning.

  • Do Image

    include unnecessary details that distort at small sizes.

Applying Size

System icons are displayed at the following sizes, using a modifier class on the svg tag:

Size Class Applies to Use

16px

.comet-icon--s

<svg>

Tight displays and specific system icons, such as caret.

20px

.comet-icon--m

<svg>

Common displays, including within buttons.

24px

.comet-icon--l

<svg>

Larger toolbars, such as Global Nav, Product Bar and Techbook’s Tool Tray.

40px

.comet-icon--xl

<svg>

Modal and other focused displays offering choices that include icons.

60px

.comet-icon--xxl

<svg>

Grid displays like assets where type is identified solely by icon instead of image.

<svg class="comet-icon--m" aria-hidden="true" focusable="false">
    <use xlink:href="/path/to/your/local/comet.svg#arrow-down"></use>
</svg>
                
// Use whatever CSS class you want.
.medium-icon { @extends .comet-icon--m; }

<svg class="medium-icon" aria-hidden="true" focusable="false">
    <use xlink:href="/path/to/your/local/comet.svg#arrow-down"></use>
</svg>
                

Size Tokens

Icon sizes are also available as token variables within the system.

Variable Name Value
$comet-size-icon-xs 12px
$comet-size-icon-s 16px
$comet-size-icon-m 20px
$comet-size-icon-l 24px
$comet-size-icon-xl 40px
$comet-size-icon-xxl 60px

Weight

Lines that create details inside the boundary of an icon use 1px and 2px weight. Crucial details that should be fully legible at smaller dimensions utilize 2px weight, while other less important hairline details may use 1px . Unfilled icons that rely on an outline to establish boundary require a hefty weight of 4px to maintain a sturdy appearance when reduced.

Icon Size Diagram

  • Do Image

    use a heavy 4px line weight for outlined shapes.

  • Do Image

    use 1px or 2px hairlines to form an outlined shape.

Borders

Rectangular shapes used to define an icon’s boundary utilize a rounded border radius. Comet’s icons share a border radius of 2px, avoiding a mixed language of sharp edges and softened corners.

Icon Border Radius

Stroke Terminals

Rounded stroke terminals are used to complement the border radius of rectangular shapes.

  • Do Image

    use consistent rounded stroke terminals.

  • Do Image

    use square stroke terminals or a combination of both.

How to Use

All system icons are available via an SVG sprite, automated via our build process that aggregates individual SVG files into a single file you can use.

Determine Accessbility Requirements

Below is an overview of the two accessibility usages for SVGs. Determine your needs, and copy and paste the SVG code snippet into your page. Update the the icon parameter to match the icon of interest, and update the URL if you are hosting the sprite in your project.

Icons with Sibling Descriptive Text

SVGs are often used as decoration to give further visual meaning to a link, button, or other interactive elements. To avoid repetition in assistive technologies, SVGs should have aria-hidden=true and focusable=false. This prevents screen readers from reading the path of the SVG, and users relying on keyboard navigation will not focus on the SVG.

<button class="comet-button comet-button--primary comet-button--icon" aria-label="Add User">
    <svg class="comet-button--icon__icon" aria-hidden="true" focusable="false">
        <use xlink:href="/comet/comet_assets/comet.svg#user-add"></use>
    </svg>
    <span class="comet-button--icon__text">Add User</span>
</button>
                
{{ comet.button_icon(variations=["primary"], icon_name="user-add", text="Add User", aria_label="Add User") }}
                
Macro params reference

Icons as Logos or Inforgraphics

When an SVG is used as for a logo or infographic without a text equivliant, follow it with a screenreader only element. For example: <div class="comet-screenreader-only">text equivilant</div>. The class comet-screenreader-only hides the content from sighted users, but will be available to assistive technologies.

Science Techbook
<svg class="comet-product-bar__product-title-icon" aria-hidden="true" focusable="false">
    <use xlink:href="/comet/comet_assets/comet.svg#science-techbook"></use>
</svg>
<div class="comet-screenreader-only">Science Techbook</div>
                
{{ comet.icon(name="science-techbook", title="Science Techbook"), class="comet-product-bar__product-title-icon" }}
                
Macro params reference

About SVGs

  • The JS library, svg4everybody, is used to enable external SVG references in IE 9-11.
  • IE browsers lower than Edge 13 do not have native SVG sprite support. To support these browsers add the svg4everybody library to your project.

IE Support

IE browsers lower than Edge 13 do not have native SVG sprite support. To support these browsers add the svg4everybody library to your project.

Navigation Menu