Icons
onyx includes a set of well-crafted SVG icons that are free to use.
If you want to download the icons as SVG, please head over to our GitHub repository.
A full changelog can be found here.
Installation
To get started, install the npm package with your corresponding package manager:
sh
pnpm add -D @sit-onyx/icons@betash
npm install -D @sit-onyx/icons@betash
yarn install -D @sit-onyx/icons@betaAfterwards, you can import and use icons as needed. Please see the OnyxIcon for the technical documentation.
Usage
There are two different ways of using / importing icons from this package:
Option 1: JavaScript import recommended
Requires @sit-onyx/icons version >= 1.0.0-beta.22
For the best developer experience, it is recommended to use JavaScript imports. This approach also supports IDE intellisense, so you can e.g. just start typing "icon" in your editor and all available icons will be suggested to you.
ts
import { iconPlaceholder } from "@sit-onyx/icons";
// or to import all icons (note: no tree-shaking will be supported then):
// import * as ALL_ICONS from "@sit-onyx/icons";Option 2: Import from SVG file
Alternatively, you can import the icon from the raw SVG file:
ts
// Note that "?raw" is needed to import the SVG content instead of a path to the file itself.
// ?raw will be resolved by the bundler (e.g. Vite).
// if you want to import the path to the icon instead of the content, you can omit the "?raw" part
import iconPlaceholder from "@sit-onyx/icons/placeholder.svg?raw";Available icons
You can hover over an icon to see its name. Click on it or press enter when selecting it via keyboard to copy the import statement for the selected icon.
Copy link to headline:Action & Interface
Attachment
Bell
Bell Disabled
Bell Ring
Bookmark
Bookmark Filled
Box
Box Check
Bullet List
Calendar
Calendar Clock
Calendar Days One
Calendar Days Three
Calendar Settings
Calendar Week
Cancellation Undone
Circle Contrast
Clock
Clock Circle Check
Clock Edit
Copy
Dashboard
Delete
Draggable
Draggable Horizontal
Duplicate
Edit
Edit Disabled
Error Flag
Expand Window
Expand Window Small
Eye
Eye Closed
Eye Disabled
Eye Shine
Filter
Fullscreen
Fullscreen Exit
Gallery
Grid
History
Link
Link Unlink
List
List Arrow Down
List Arrow Up
Login
Logout
Menu
More Horizontal
More Horizontal Big
More Horizontal Small
More Vertical
More Vertical Small
Notification Flag
Search
Search X
Setting Search
Settings
Share Android
Share Ios
Share Web
Sidebar Arrow Left
Sidebar Arrow Right
Sort
Spaces
Split Horizontal
Split Vertical
Toggle Switch
Trash
Trash Disabled
Volume Disabled
Volume Down
Volume Mute
Volume Up
Zoom In
Zoom Out
Copy link to headline:Arrows
Arrow Big
Arrow Down
Arrow Left
Arrow Right
Arrow Small Down
Arrow Small Down Left
Arrow Small Down Right
Arrow Small Left
Arrow Small Right
Arrow Small Up
Arrow Small Up Left
Arrow Small Up Right
Arrow Small Up Right Top
Arrow Up
Arrows Sort
Chevron Down
Chevron Down Small
Chevron Down Up
Chevron Left
Chevron Left Small
Chevron Right
Chevron Right Small
Chevron Up
Chevron Up Small
Circle Arrow Left
Circle Arrow Right
Circle Both Direction
Forward
Move
Repeat
Replace
Rotate
Switch Horizontal
Switch Vertical
Sync
Undo
Copy link to headline:Business & Statistics
Archive
Archive Undo
Bar Graph
Chart
Chart Down
Chart Pie 1
Chart Pie 2
Chart Pie Search
Chart Up
Company
Company Location
Company Lock
Company Plus
Company Settings
Container Large
Container Small
Containers
Crane
Forklift
Graph Search
Newspaper
Newspaper Voucher
Organigram Chart 1
Organigram Chart 2
Package
Pallet Box
Pallet Boxes
Presention Board
Presention Board Graph
Recycling
Suitcase
Tag
Tag Disabled
Trolley
Truck
Truck Attention
Truck Empty
Copy link to headline:Car Parts
Battery
Car Door
Car Seat
Car Window
Engine
Plate
Speedometer
Tire
Copy link to headline:Commerce & Shopping
Bag
Barcode
Cart
Cart Check
Cash Register
Store
Store Display
Store Test
Voucher
Wallet
Warehouse
Copy link to headline:Communication
Feedback
Inbox
Inbox In
Inbox Out
Key Mail
Mail
Mail Read
Mail Unread
Message
Message Conversation
Message Dots
Message Mobile
Mic
Mic Active
Mic Disabled
Phone
Phone Disabled
Phone Incoming
Phone Outgoing
Phone Ring
Phone Vibration
RSS Web Feed
Send
Translate
Vibration
Copy link to headline:Connectivity
Bluetooth
Mobile Signal
Wlan
Copy link to headline:Cursor & Hands
Thumbs Down
Thumbs Up
Touch Hold
Touch Password
Touch Press
Touch Toggle Switch
Copy link to headline:Devices & Electronics
Alarm
Alarm Disabled
Android Phone
Android Tablet
Android Tablet Landscape
Apple Phone
Apple Tablet
Apple Tablet Landscape
Calculator
Camera
Camera Disabled
Camera Plus
Camera X
Computer
Computer Audio
Computer Bell
Computer Block
Computer Calendar
Computer Camera
Computer Circle Check
Computer Circle Minus
Computer Clock
Computer Cloud
Computer Cube
Computer Drop
Computer Edit
Computer Globe
Computer Information
Computer Key
Computer Location
Computer Lock
Computer Message
Computer Plus
Computer Search
Computer Security Warning
Computer Settings
Computer Shield
Computer User
Computer Volume
Computer X
Keyboard
Laptop
Mouse
Powerbank
Print
Print Block
Print Checkmark
Print Clock
Print Cloud
Print Disabled
Print Dots
Print Drop
Print Information
Print List
Print Plus
Print Search
Print Settings
Print Shield
Print X
Smart Watch Circle
Smart Watch Square
Tab 1
Tab 2
Timer
Videocam
Videocam Disabled
Copy link to headline:Emojis
Emoji Happy 1
Emoji Happy 2
Emoji Laughing
Emoji Neutral 1
Emoji Neutral 2
Emoji Sad
Emoji Unhappy
Copy link to headline:Essentials
Check
Check Read
Check Small
Circle Attention
Circle Block
Circle Check
Circle Help
Circle Information
Circle Minus
Circle Minus Disabled
Circle Plus
Circle X
Loading Circle
Loading Dots
Minus
Minus Small
Plus
Plus Minus
Plus Small
Triangle Warning
X
X Small
Copy link to headline:File & Type
Audio
Clipboard
Clipboard Circle Check
Clipboard Edit
Clipboard Lock
Clipboard Plus
Clipboard Search
Clipboard Shield
File
File Archive
File Audio
File Blank
File Blocked
File Chart
File Checklist
File Circle Check
File Clock
File Copy
File Csv
File Disabled
File Doc
File Edit
File Globe
File Key
File Lock
File Pdf
File Plus
File Ppt
File Rtf
File Search
File Settings
File Shield
File Shred
File Sketch
File Text
File User
File X
File Xls
File Xlsx
Folder
Folder File
Folder Plus
Folder Settings
Notebook Code
Notebook Edit
Notebook Plus
Notebooks
Picture
Picture Settings
Copy link to headline:Finance
Bank
Bank Note
Bill
Cash
Circle Crypto Bitcoin
Credit Card
Crypto Bitcoin
Hand Coin
Paypal
Saving Piggy
Saving Piggy Coin
Copy link to headline:Gamification
Controller
Cup
Copy link to headline:Hardware
Compact Disc
Cpu
Disc
Memory
Copy link to headline:Health, Medicine & Hygiene
Hand Drop
Heart
Heart Filled
Mask 1
Mask 2
Sick
Soap Dispenser
Virus
Virus Shield
Copy link to headline:Help & Support
24h
Headset
Support
Copy link to headline:Kitchen & Food
Birthday Cake
Bread
Can
Cheese
Chocolate
Coffee Cup
Cookie
Icecream
Loaf Bread
Oven
Prawn
Copy link to headline:Media
Media Next
Media Pause
Media Play
Media Previous
Media Stop
Copy link to headline:Navigation
Circle Car
Circle Car Disabled
Compass
Detour 1
Detour 2
Earth
Earth Location Pin
Flag 1
Flag 2
Home
Home Location Pin
Home Search
Kilometer
Location Pin
Location Pin Disabled
Location Pin Minus
Location Pin Plus
Location Target
Map
Map Information
Map Search
Meetingpoint Arrow
Meetingpoint Pin
Navigation Arrow
Navigation Direction
Navigation Route
Radar
Stopover
Copy link to headline:Network & Infrastructure
Book Globe
Browser Domain
Browser Globe
Browser Programming
Browser Terminal
Cloud Arrow Up
Cloud Connect
Cloud Key
Cloud Lock
Cloud Setting
Database
Download
Folder Connect
Git
Globe
Globe Connect
Globe Lock
Globe Network
Globe Shield
Load Balancer
Mesh
Message Globe
Network
Network Card
Network Router
Password Generate
Password Lock
Password Lock 2
Power
Qr Code
Router
Server
Server Camera
Server Connect
Server Edit
Server Lock
Server Search
Server Settings
Server Shield
Server Upgrade
Settings Arrows
Storage
Storage Camera
Storage Cloud
Storage Connect
Storage Settings
Storage Shield
Subnet
Terraform
Upgrade
Upload
Upload 2
Copy link to headline:Objects
Anchor
Broom
Brush
Colors
Hourglass
Light Bulb
Light Bulb Shine
Magnet
Megaphone New
Megaphone Old
Puzzle 1
Puzzle 2
Radar Station
Robot
Robot Manufacture
Rocket
Rocket Plus
Rocket Settings
Sawblade
Scissor
Smoking
Smoking Disabled
Soccer
Stroller
Test Tube
Traffic Light
Weight Kg
Wrench
Copy link to headline:People & Users
Applause
Ear
Figure
Handshake
Location User Minus
Location User Plus
Phone Contact
Profile
Profile Hook
Shield User
Shield User Key
User
User Arrow Down
User Arrow Up
User Block
User Check
User Circle Minus
User Clock
User Company Id
User Edit
User Group
User Id
User Key
User Location Pin
User Lock
User Message Minus
User Message Plus
User Minus
User Nametag
User Plus
User Settings
User Shield
User Suit Nametag
User X
Copy link to headline:School & Education
Book
Book Binocular
Glasses
Graduation Hat
Paragraph
Pin
Pin Disabled
Copy link to headline:Security & Protection
Face Id
Fingerprint
Fire Extinguisher
Hacker
Key
Key Arrow Up
Key Circle Check
Key Clock
Key Shield
Lock
Lock Key
Shield
Siren
Unlocked 1
Unlocked 2
Copy link to headline:Software & Services
Apple Store
Bucket
Cloud Edge
Cloud Files
Cloud Foundry
Computer Eye
Couchbase
Docker
Dolphin
Elasticsearch
Ethernet
Health Probe
Heptagon Cloud
Heptagon Cloud Foundry
Heptagon Cloud Lock
Heptagon Lock
Hibernate
Key Settings
Kubernetes
Kubernetes Lock
Kubernetes Shield
Logme
Mariadb
Mongo Db
Node Pool
Opsgenie
Os
Penguin
Playstore
Postgresql
Rabbitmq
Reconciliation
Redis
Webhook
Windows
Workflows
Copy link to headline:Tools & Shapes
Layer Down
Layer Up
Opactiy
Rotate Picture
Text Selector
Tool Anchor Point Minus
Tool Anchor Point Plus
Tool Circle
Tool Color Fill
Tool Crop
Tool Crop 2
Tool Curvature
Tool Elipse
Tool Expand Horizontally
Tool Expand Vertically
Tool Line
Tool Path 1
Tool Path 2
Tool Path 3
Tool Path 4
Tool Path 5
Tool Pencil
Tool Polygon
Tool Rectangle
Tool Ruler
Tool Scale
Tool Table
Tool Text
Tool Transform
Tool Underlined
Copy link to headline:Transport & Travel
Bus
Car Check
Car Electric
Car Front 1
Car Front 2
Car Search
Car Setting
Driver
Luggage
Parking
Parking Disabled
Parking Electric
Parking Search
Passenger
Petrol Station
Petrol Station Electric
Petrol Station Fuel
Plane
Ship
Ship Container
Tour
Tour Plus
Tour X
Tram
Walking
Copy link to headline:Various
Bomb
Dinosaur
Dynamite
Explosion
New
Placeholder
Quality
Star
Star Filled
Tie
Copy link to headline:Weather & Climate
Cloud
Cloud 2
Cloud Co2
Flash
Flash Disabled
Moon
Snowflake
Sunny
Tree
Tree 2
Windmill