Spreadsheet icons

Overview

Spreadsheet icons are designed to accompany data grids, spreadsheets and other dynamic data views. They are clean, consistent and lightweight. You can use them to create toolbars, menu bars and context menus. They look great at any scale and screen resolution.

  • 160+ SVG icons
  • Recommended size is 24px or scaled accordingly - 18, 24 or 36px
  • Recommended color on light background is black at 75% opacity - rgba(0, 0, 0, 0.75)
    For disabled icon style reduce the opacity to 35%
  • Recommended color on dark background is white at 80% opacity - rgba(255, 255, 255, 0.8)
    For disabled icon style reduce the opacity to 30%

Download

Download the full set directly from our git repository or from npm.

npm install @handsontable/spreadsheet-icons

All icons

  • active-filter
  • add-comment
  • align-bottom
  • align-center
  • align-justify
  • align-left
  • align-middle
  • align-right
  • align-top
  • attachment
  • attachment-add
  • attachment-remove-minus
  • attachment-remove-x
  • bin
  • bold
  • border-all
  • border-bottom
  • border-color
  • border-inside
  • border-left
  • border-middle-horizontal
  • border-middle-vertical
  • border-none
  • border-outline
  • border-right
  • border-top
  • bullet-list
  • calendar
  • cancel-circle
  • caret-down
  • caret-left
  • caret-right
  • caret-up
  • carret-up-down
  • chart
  • checkbox-checked
  • checkbox-unchecked
  • chevron-down
  • chevron-left
  • chevron-up
  • chevrot-right
  • circle-empty
  • circle-full
  • clear-formatting
  • clock
  • close
  • cloud
  • cloud-download
  • cloud-upload
  • code
  • coins
  • collaborate
  • color-palette
  • color-picker
  • comment
  • copy
  • currency-euro
  • currency-pound
  • currency-usd
  • currency-yen
  • cut
  • dash
  • database
  • database-add
  • database-remove
  • decimal-decrease
  • decimal-increase
  • document-add
  • document-csv
  • document-pdf
  • document-preview
  • document-remove
  • document-xls
  • download
  • drawing
  • dropbox
  • edit
  • email
  • email-read
  • equation
  • erase
  • exclamation-mark
  • fast-forward
  • fast-rewind
  • fill-color
  • filter
  • find
  • flag-empty
  • flag-full
  • folder
  • form
  • formula
  • google-drive
  • google-sheets
  • hamburger-menu
  • help
  • hidden
  • highlight
  • idea
  • image
  • indent-decrease
  • indent-increase
  • info
  • insert-link
  • italic
  • key
  • keyboard
  • line
  • line-height
  • line-style
  • locked
  • long-arrow-down
  • long-arrow-left
  • long-arrow-right
  • long-arrow-up
  • menu
  • merge-cells
  • minus
  • minus-square
  • navigate
  • numbered-list
  • paint-format
  • paint-format-remove
  • paste
  • percent
  • pin
  • pin-map
  • plus
  • plus-square
  • print
  • question-mark
  • redo
  • refresh
  • remove-link
  • save
  • settings
  • share
  • sort-ascending
  • sort-descending
  • special-character
  • squares-4
  • squares-9
  • star-active
  • star-inactive
  • strike-through
  • sync
  • text-clip
  • text-color
  • text-columns
  • text-overflow
  • text-rotation
  • text-rotation-90
  • text-rotation-reversed-90
  • text-wrap
  • tick
  • tick-square
  • underline
  • undo
  • unlocked
  • unpin
  • upload
  • user
  • user-add
  • user-preview
  • user-remove
  • user-remove-x
  • visible
  • zoom-in
  • zoom-out
Tutorial: Spreadsheet icons