Skip to main content

Icons

Here are some basic practices to make sure the icons you use in your application are accessible.

Gravity CSS uses SVG icons for their improved accessibility and vector support. There are two ways you can add an icon to your project, with multiple sizes.

Icon Sprite#

Before you can use the icon sprite: You need to make sure its loaded in your project. For more information on installing the icon sprite, please visit our installation guide

Small Icons#

Small icons are defined at a size of 18px. To add a small icon find an icon below from our library.

  1. After you choose an icon from the icon library, add the code below replacing#iconName-18 with the name of the icon followed by the size.
  2. On the <svg> element add a class of .icon-18.
<svg focusable="false" class="icon-18" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#iconName-18"></use>
</svg>

Large Icons#

Large icons are defined at a size of 24px. To add a large icon find an icon below from our library.

  1. After you choose an icon from the icon library, add the code below replacing#iconName-24 with the name of the icon followed by the size.
  2. On the <svg> element add a class of .icon-24.
<svg focusable="false" class="icon-24" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#iconName-24"></use>
</svg>

Downloading individual icons#

If you chose not to use our preferred method of SVG delivery via SVG sprite, you can download any icon individually. To do so, visit the website, select the icon you want, and follow the download instructions.

Icon colors#

To change the color of the icon, you can use one of our color classes.

<svg focusable="false" class="icon-24 gr-condition-one" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close-24"></use>
</svg>

Icon library#

Global Icons#

  • account

  • help

  • home

  • notification

General icons#

  • archive

  • attachment

  • ascending

  • collapse

  • date

  • delete

  • descending

  • download

  • drag-handle

  • drop-down

  • drop-up

  • duplicate

  • edit

  • email

  • expand

  • export

  • file

  • filter

  • flip-card

  • grid-view

  • group-off

  • group-on

  • information

  • list-view

  • lock-off

  • lock-on

  • maximize

  • message

  • minimize

  • more

  • print

  • scale

  • search

  • settings

  • show-off

  • show-on

  • sortable

  • tag

  • time

  • unarchive

  • upload

  • warning

  • zoom-in

  • zoom-out

Media icons#

  • audio-high

  • audio-low

  • audio-off

  • forward-10

  • forward

  • fullscreen-off

  • fullscreen-on

  • mic-off

  • mic-on

  • pause

  • play

  • refresh

  • rewind-10

  • rewind

Navigation icons#

  • back

  • close

  • next

  • previous

Course content icons#

  • annotation

  • bookmark-off

  • bookmark-on

  • bulleted-list

  • correct

  • drawer-left

  • drawer-right

  • font

  • history

  • incorrect

  • left-maximize

  • left-minimize

  • listen

  • menu

  • notebook

  • right-maximize

  • right-minimize

  • star-off

  • star-on

  • study-tools

  • virtual-reality

Text editor icons#

  • bold

  • copy

  • cut

  • dictionary

  • flag

  • font-color

  • format-off

  • highlighter

  • hr

  • html

  • image

  • indent-decrease

  • indent-increase

  • italic

  • justify-center

  • justify-left

  • justify-right

  • link-off

  • link-on

  • list-order

  • list-unorder

  • media

  • page-break

  • paste

  • plagiarism

  • redo

  • strikethrough

  • subscript

  • summary

  • superscript

  • symbols

  • synonym

  • table

  • underline

  • undo

Assessment icons#

  • multi-correct

  • multi-correct-ns

  • multi-empty

  • multi-incorrect

  • multi-selected

  • single-correct

  • single-empty

  • single-incorrect

  • single-partial

  • single-selected