Icons
We use Google Material Symbols icons with our Optimizely Design System via the @optiaxiom/icons package.
#
Installation
#
#
Install package
#
npm install @optiaxiom/icons#
Basic usage
#
Simply import the icon components and use them in your application.
import { IconDelete } from "@optiaxiom/icons";
<IconDelete />;Icons accept a size prop to control their dimensions:
import { IconDelete } from "@optiaxiom/icons";
<IconDelete size="sm" />;Each icon also has a filled variant via the filled prop:
import { IconDelete } from "@optiaxiom/icons";
<IconDelete filled />;#
Available Icons
#
360
Account Circle
Account Tree
Add 2
Add Box
Add Circle
Add Comment
Add Shopping Cart
Ads Click
Alarm
Align Vertical Bottom
Align Vertical Center
Align Vertical Top
Android Cell 4 Bar
Arrow Circle Down
Arrow Circle Up
Arrow Drop Down
Arrow Drop Up
Arrow Left Alt
Arrow Range
Arrow Right Alt
Arrow Split
Article
Assignment
Asterisk
Atr
Attach File
Attach Money
Bar Chart 4 Bars
Barcode
Block
Book
Bookmark
Border Clear
Border Color
Box
Bug Report
Business Center
Cached
Calendar Clock
Calendar Month
Calendar Today
Call
Campaign
Cancel
Capture
Category
Chat
Chat Bubble
Check
Check Box
Check Circle
Checkbook
Checklist
Chevron Left
Chevron Right
Circle
Clear Day
Close
Code Xml
Compare
Compare Arrows
Content Copy
Content Cut
Content Paste
Contrast
Create New Folder
Crop Free
Crop Square
Dashboard Customize
Database
Database Off
Dehaze
Delete
Deployed Code
Desktop Mac
Desktop Windows
Devices
Do Not Disturb On
Docs
Done All
Download
Draft
Drafts
Drag Indicator
Drag Pan
Drive Folder Upload
Dropdown
Edit
Edit Document
Edit Off
Edit Square
Electric Bolt
Error
Event List
Expand Circle Down
Experiment
Extension
Eyeglasses 2
Featured Seasonal And Gifts
Fiber Manual Record
File Export
File Png
Filter Alt
Filter Alt Off
Fit Page Width
Flag 2
Folder
Folder Check
Folder Copy
Folder Open
Folder Shared
Folder Special
Format Align Center
Format Align Justify
Format Align Left
Format Align Right
Format Bold
Format Color Text
Format H 1
Format Ink Highlighter
Format Italic
Format Line Spacing
Format List Bulleted
Format List Numbered
Format Quote
Format Strikethrough
Format Underlined
Forum
Fullscreen Exit
Gallery Thumbnail
Grid On
Grid View
Group
Groups
Help
Hide Image
History
Home
Home Repair Service
Horizontal Align Left
Horizontal Align Right
Horizontal Rule
Image Inset
Imagesearch Roller
Imagesmode
Inbox Text
Info
Ink Eraser
Input
Inventory
Inventory 2
Join Inner
Keep
Key
Keyboard Arrow Down
Keyboard Double Arrow Down
Keyboard Double Arrow Left
Keyboard Double Arrow Right
Keyboard Double Arrow Up
Keyboard Return
Lab Panel
Language
Lightbulb 2
Link
Link Off
List Alt
Local Atm
Local Cafe
Local Shipping
Location On
Lock
Lock Open Right
Lock Person
Login
Logout
Mediation
Memory
Menu Book
Mobile
Mobile Rotate
Monitor Heart
Monitoring
More Horiz
More Vert
Music Note 2
North
Note Add
Notifications
Notifications Off
Open In New
Orders
Package
Paid
Pan Tool Alt
Pause
Pause Circle
Percent Discount
Person
Person Add
Person Book
Person Cancel
Person Check
Person Edit
Person Off
Play Arrow
Play Circle
Progress Activity
Refresh
Remove Shopping Cart
Reorder
Repeat
Reply
Responsive Layout
Robot 2
Rocket Launch
Rss Feed
Schedule
Schema
Search
Search Insights
Select
Select Window
Sell
Send
Settings
Share
Shopping Bag Speed
Shopping Cart
Show Chart
Smart Toy
Sort
Sort By Alpha
South
Splitscreen
Stacks
Stairs 2
Star
Stat 0
Storefront
Subscript
Superscript
Swap Driving Apps Wheel
Switches
Tab
Tablet
Tag
Team Dashboard
Terminal 2
Thumb Up
Timeline
Title
Toggle Off
Tooltip 2
Translate
Trending Down
Trending Up
Tune
Unfold More
Upload
Verified User
Video File
Videocam
View Column
View Column 2
Visibility
Visibility Off
Vital Signs
Vrpano
Wand Shine
Warning
Web Traffic
Widgets
Zoom In
Zoom Out