Comet Icons

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

Interface Icons

&#;
add-point
&#;
add-to-builder
&#;
add
&#;
align-center
&#;
align-left
&#;
align-right
&#;
answer
&#;
archive
&#;
arrow-down
&#;
arrow-left
&#;
arrow-right
&#;
arrow-up
&#;
assign
&#;
attachment
&#;
badge-correct
&#;
badge-incorrect
&#;
bar-chart
&#;
bell
&#;
book
&#;
bookmark
&#;
books
&#;
calendar
&#;
caret-down
&#;
caret-left
&#;
caret-right
&#;
caret-up
&#;
channel
&#;
check-circle
&#;
check-complete
&#;
check-incomplete
&#;
check
&#;
circle-o
&#;
classroom
&#;
clock-reverse
&#;
clock
&#;
cloud-upload
&#;
collapse-all
&#;
comment
&#;
contain-image
&#;
conversation-active
&#;
conversation
&#;
copy-alt
&#;
copy
&#;
create
&#;
crop-image
&#;
dashboard
&#;
definition
&#;
delete-alt
&#;
delete
&#;
device-rotate
&#;
did-you-know
&#;
display-grid
&#;
display-list
&#;
display
&#;
document-pdf
&#;
document
&#;
dots-nine
&#;
dots-six
&#;
download
&#;
edit-profile
&#;
edit
&#;
ellipsis-vertical
&#;
ellipsis
&#;
erase
&#;
evaluation-criteria
&#;
exclamation
&#;
expand-all
&#;
expand
&#;
eye-hidden
&#;
eye
&#;
facebook
&#;
feedback-bug
&#;
feedback-comment
&#;
feedback-suggestion
&#;
flame
&#;
flip-x
&#;
flip-y
&#;
fullscreen
&#;
gear
&#;
google-plus
&#;
grabby
&#;
graphing
&#;
grip
&#;
hand
&#;
headline
&#;
headphones
&#;
heart
&#;
help
&#;
history
&#;
home
&#;
honeycomb
&#;
icon-placeholder
&#;
image-alt
&#;
immersive-reader
&#;
information
&#;
language-switcher
&#;
layout-horizontal
&#;
layout-thumbnail
&#;
layout-vertical
&#;
levels
&#;
life-ring
&#;
link
&#;
live-chat-available
&#;
live-chat-unavailable
&#;
live-chat
&#;
lock
&#;
map
&#;
menu
&#;
message-error
&#;
message-information
&#;
message-warning
&#;
messaging
&#;
microphone
&#;
minus-point
&#;
minus
&#;
misconception
&#;
move-vertical
&#;
notification
&#;
page
&#;
palette
&#;
paragraph
&#;
pause
&#;
play
&#;
plus
&#;
print
&#;
profile
&#;
qr-code
&#;
quicklist-remove
&#;
quicklist
&#;
refresh
&#;
reset
&#;
rotate-left
&#;
rotate-right
&#;
search
&#;
send
&#;
share-alt
&#;
share
&#;
sortable-asc
&#;
sortable-desc
&#;
sortable
&#;
square-grid
&#;
star
&#;
stash
&#;
stop-impersonating
&#;
submit
&#;
subscript
&#;
superscript
&#;
teacher-note
&#;
text
&#;
to-bottom
&#;
to-top
&#;
tool-box
&#;
transcript
&#;
triangle-down
&#;
triangle-up-down
&#;
triangle-up
&#;
twitter
&#;
undo
&#;
unlocked
&#;
up-down-arrows
&#;
upload
&#;
upper-right-arrow
&#;
user-add
&#;
users
&#;
video-camera
&#;
video
&#;
waffle
&#;
whiteboard
&#;
wizard-active
&#;
wizard-passive
&#;
x
&#;
youtube

Assets Icons

&#;
asset-5-minute-prep
&#;
asset-activity
&#;
asset-animation
&#;
asset-article
&#;
asset-assessment-question
&#;
asset-assessment
&#;
asset-assignment
&#;
asset-audio-cd
&#;
asset-audio
&#;
asset-audiobook
&#;
asset-bcr-constructed-response
&#;
asset-board-builder
&#;
asset-board
&#;
asset-book
&#;
asset-brain-game
&#;
asset-channel
&#;
asset-clip-art
&#;
asset-constructed-response
&#;
asset-content-collection
&#;
asset-content-connections
&#;
asset-core-interactive-text
&#;
asset-definition-glossary-term
&#;
asset-definition
&#;
asset-document
&#;
asset-ebook
&#;
asset-encyclopedia-article
&#;
asset-event
&#;
asset-excel
&#;
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-explanation
&#;
asset-math-exploration
&#;
asset-math-interactive
&#;
asset-math-overview
&#;
asset-multi-layer-map
&#;
asset-non-searchable-image
&#;
asset-overview-page
&#;
asset-podcast
&#;
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-slideshow
&#;
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

Product Icons

&#;
coding
&#;
community
&#;
curriculum-connect
&#;
espresso
&#;
experience
&#;
featured-programs
&#;
health-and-relationships
&#;
health
&#;
math-techbook
&#;
math
&#;
mystery-science
&#;
pathway
&#;
professional-development
&#;
professional-learning
&#;
science-elementary
&#;
science-middle
&#;
science-techbook-ngss
&#;
science-techbook
&#;
science
&#;
secondary
&#;
social-studies-techbook
&#;
social-studies
&#;
stem-connect
&#;
streaming-experience
&#;
streaming-plus

&#;
facebook
&#;
instagram
&#;
linkedin
&#;
pinterest
&#;
twitter
&#;
youtube

Global Nav Icons

&#;
global-nav-assessment
&#;
global-nav-assignments
&#;
global-nav-board-builder
&#;
global-nav-builder-tools
&#;
global-nav-classrooms
&#;
global-nav-coding
&#;
global-nav-den
&#;
global-nav-english
&#;
global-nav-espresso
&#;
global-nav-health
&#;
global-nav-math-techbook
&#;
global-nav-my-admin
&#;
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-science
&#;
global-nav-search
&#;
global-nav-secondary
&#;
global-nav-ss-techbook
&#;
global-nav-stem-connect
&#;
global-nav-streaming
&#;
global-nav-studio-beta
&#;
global-nav-trending-topics

Techbook Icons

&#;
anchor
&#;
behind-the-science
&#;
cer
&#;
discourse
&#;
earth-and-space-science
&#;
gears
&#;
hoa
&#;
life-science
&#;
materials
&#;
microscope
&#;
modeling
&#;
physical-science
&#;
preparations
&#;
storyline
&#;
student-background
&#;
vocabulary
&#;
what-did-i-figure-out

Studio Interface Icons

Comet Interface Icons

&#;
clock
&#;
color
&#;
consistency
&#;
efficiency
&#;
quality
&#;
space-alt
&#;
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.

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.

rely on simple shapes to convey an icon’s meaning.
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.

HTML @extends

HTML

Copy to Clipboard Press Ctrl + C to copy

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

@extends

Copy to Clipboard Press Ctrl + C to copy

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

use a heavy 4px line weight for outlined shapes.
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.

use consistent rounded stroke terminals.
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.

HTML Macro

HTML

Copy to Clipboard Press Ctrl + C to copy

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

Macro

Copy to Clipboard Press Ctrl + C to copy

{{ 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

HTML Macro

HTML

Copy to Clipboard Press Ctrl + C to copy

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

Macro

Copy to Clipboard Press Ctrl + C to copy

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

Interface Icons

Assets Icons

Callout Icons

Tool Icons

Product Icons

Social Icons

Global Nav Icons

Techbook Icons

Techbook Category Icons

Studio Interface Icons

Comet Interface Icons

Visual Language

Size

Applying Size

HTML

@extends

Size Tokens

Weight

Borders

Stroke Terminals

How to Use

Determine Accessbility Requirements

Icons with Sibling Descriptive Text

HTML

Macro

Icons as Logos or Inforgraphics

HTML

Macro

About SVGs

Comet