Iconography

Icons add emphasis, familiarity, and scanability to adjacent text.

Types

  1. Base Set

Streamline is a large library, sometimes with dozens of icons that represent the same thing. Below is a base set for common actions that we strive to limit ourselves to across applications. https://streamlineicons.com

DeleteTable
Actions
Add
AdminApprove
AlertError
AlertHelp
AlertInfo
AlertWarning
Analytics
Anchor
AppSwitcher
AppWindow
Archive
AscendingAlphabetical
Associations
Attachment
Award
Back
Badge
Bold
Book
Bookmark
Branch
Brandsettings
BrokenLink
BulletList
BusinessCard
Calculate
Camera
CenterAlign
Chat
CheckCircle
Check
ClearTextFormat
Clipboard
Close
Cloud
Collapsed
Computer
Configuration
CowboyHat
Cursor
Dashboard
Date
DeleteColumn
DeleteRow
Delete
DenyOverride
DescendingAlphabetical
Dislike
Download
DragSort
Drag
Duplicate
Echo
EditApp
EditDoc
Edit
Email
EmojiHappy
EmojiMeh
EmojiSad
Expanded
ExportAll
ExportView
Export
FavoriteFilled
Favorite
FileImage
Filter
FingerPointing
Flag
FolderOpen
Folder
FontSize
GenericFile
Hidden
History
Home
Hourglass
HtmlSelect
InsertAbove
InsertBelow
InsertHeader
InsertLeft
InsertRight
Institution
Integrations
Italic
Key
KeyboardArrowDown
KualiK
LeftAlign
Like
Link
Location
Lock
Login
Logout
Map
Maximize
MenuVertical
Menu
Message
Minimize
Mobile
Module
Money
Moon
MoveLeft
MoveRight
Move
News
NotificationOff
NotificationRing
Notification
NumberList
PenDraw
Photos
Pin
Play
Point
Print
Profile
RatingEmpty
RatingFilled
RatingHalfFilled
Redo
RemoveHeader
Remove
Report
RichText
Search
SelectDownArrow
SelectUpArrow
SendEmail
SendbackOverride
Sendback
Settings
Share
Sort
Stars
Status
Sun
Support
SyncTime
Sync
Table
Tag
Target
Time
Tool
Undo
Unlock
UserInfo
User
Users
Visible
WorkflowBack
WorkflowCheck
WorkflowComplete
WorkflowError
WorkflowNotified
WorkflowReassigned
WorkflowRetry
WorkflowSkipped
WorkflowX
ZoomIn
ZoomOut

Usage

import * as Icons from '../../../icons'

Render an icon as a react component by appending it's name after the Icons import. Icons support the space, width and height shorthands from styled-system. You can also pass in a fill.