Airtime

77 tokens · 221 icons (747 variants) · SF Pro (system font) · Contact Sheet

← Component Gallery

Colors

Themed Colors

background-primary--color-background-primary
background-secondary--color-background-secondary
background-tertiary--color-background-tertiary
content-primary--color-content-primary
content-secondary--color-content-secondary
content-tertiary--color-content-tertiary
highlight-primary--color-highlight-primary
highlight-secondary--color-highlight-secondary
accent-teal--color-accent-teal
accent-destructive--color-accent-destructive

Modeless Colors

white--color-modeless-white
white-24--color-modeless-white-24
black--color-modeless-black
black-24--color-modeless-black-24
overlay--color-modeless-overlay
teal--color-modeless-teal
destructive--color-modeless-destructive

Typography

Heading Large
16px / 24px / 700
Heading Medium
14px / 20px / 600
Heading Small
12px / 16px / 600
Body Large — The quick brown fox jumps over the lazy dog
14px / 20px / 400
Body Medium — The quick brown fox jumps over the lazy dog
12px / 16px / 400
Body Small — The quick brown fox jumps over the lazy dog
11px / 16px / 400
Button Default
12px / 16px / 500

Spacing & Sizing

Spacing

--space-0
0
--space-05
2px
--space-10
4px
--space-15
6px
--space-20
8px
--space-30
12px
--space-40
16px
--space-60
24px
--space-80
32px
--space-100
40px

Sizing

--size-0
0
--size-05
2px
--size-10
4px
--size-15
6px
--size-20
8px
--size-30
12px
--size-40
16px
--size-50
20px
--size-60
24px
--size-70
28px
--size-80
32px
--size-100
40px
--size-120
48px
--size-140
56px
--size-160
64px
--size-180
72px
--size-200
80px

Radii

00
052px
104px
156px
208px
2510px
3012px
3514px
4016px
4518px
5020px
6024px
7028px
8032px
9036px
10040px
9999pill

Shadows

shadow-small
0 1px 3px
shadow-medium
0 4px 12px
shadow-large
0 8px 24px

Borders, Opacity, Z-index, Transitions

Borders

TokenValue
--border-width-none0
--border-width-thin1px
--border-width-medium2px
--border-style-solidsolid

Opacity

TokenValue
--opacity-00
--opacity-40.04
--opacity-80.08
--opacity-160.16
--opacity-240.24
--opacity-480.48
--opacity-500.5
--opacity-720.72
--opacity-1001

Z-index

TokenValue
--z-base0
--z-dropdown100
--z-sticky200
--z-modal-backdrop300
--z-modal400
--z-tooltip500

Transitions

TokenValue
--duration-fast150ms
--duration-normal300ms
--duration-slow500ms
--easing-defaultease-out
--easing-inease-in
--easing-in-outease-in-out

Icons

221 unique icons · 747 variants · 14 categories · Fill + Stroke styles · 16px / 24px primary sizes

Usage in Code

<script src="generated/icons.js"></script>
<script>
  // Full variant name
  const icon = AppIcons.Search_Stroke_24();
  element.appendChild(icon);

  // Convenience alias (auto-selects preferred variant)
  const icon2 = AppIcons.Search();
</script>

actions (27 icons, 84 variants)

AddLink
AppIcons.AddLink_Stroke_24()
Checkmark
stroke
AppIcons.Checkmark_Stroke_24()
CopyToClipboard
AppIcons.CopyToClipboard_Stroke_24()
Download
AppIcons.Download_Stroke_24()
DownloadAlt
fill
AppIcons.DownloadAlt_Fill_24()
DownloadClassic
stroke
AppIcons.DownloadClassic_Stroke_24()
DragDrop
AppIcons.DragDrop_Fill_24()
Import
AppIcons.Import_Stroke_24()
Link
stroke
AppIcons.Link_Stroke_24()
Merge
stroke
AppIcons.Merge_Stroke_24()
Plus
stroke
AppIcons.Plus_Stroke_24()
Redo
stroke
AppIcons.Redo_Stroke_24()
Scissors
fill
AppIcons.Scissors_Fill_24()
Share
AppIcons.Share_Stroke_24()
ShareClassic
AppIcons.ShareClassic_Stroke_24()
Split
stroke
AppIcons.Split_Stroke_24()
Sync
stroke
AppIcons.Sync_Stroke_24()
Trash
AppIcons.Trash_Stroke_24()
Trim
fill
AppIcons.Trim_Fill_24()
Undo
stroke
AppIcons.Undo_Stroke_24()
UploadAlt
fill
AppIcons.UploadAlt_Fill_24()
UploadClassic
stroke
AppIcons.UploadClassic_Stroke_24()
UploadFile
AppIcons.UploadFile_Stroke_24()
Xmark
stroke
AppIcons.Xmark_Stroke_24()
ZoomIn
fill
AppIcons.ZoomIn_Fill_24()
ZoomOut
fill
AppIcons.ZoomOut_Fill_24()
ZoomTrim
fill
AppIcons.ZoomTrim_Fill_24()

app (27 icons, 102 variants)

Airtime
fill
AppIcons.Airtime_Fill_24()
Ask
AppIcons.Ask_Stroke_24()
Bell
AppIcons.Bell_Stroke_24()
Briefcase
AppIcons.Briefcase_Stroke_24()
Channels
stroke
AppIcons.Channels_Stroke_24()
Community
stroke
AppIcons.Community_Stroke_24()
CreditCard
AppIcons.CreditCard_Stroke_24()
Crown
AppIcons.Crown_Stroke_24()
Doc
AppIcons.Doc_Stroke_24()
Folder
fill
AppIcons.Folder_Fill_24()
Game
AppIcons.Game_Stroke_24()
Learn
fill 24px
AppIcons.Learn_Fill_24()
Legos
AppIcons.Legos_Stroke_24()
Lifesaver
AppIcons.Lifesaver_Stroke_24()
MyVideos
fill
AppIcons.MyVideos_Fill_24()
NameTag
AppIcons.NameTag_Stroke_24()
NoNameTag
AppIcons.NoNameTag_Stroke_24()
NoPin
fill
AppIcons.NoPin_Fill_24()
None
stroke
AppIcons.None_Stroke_24()
Pin
AppIcons.Pin_Stroke_24()
ShareRoom
AppIcons.ShareRoom_Stroke_24()
Sharing
AppIcons.Sharing_Stroke_24()
Telephone
AppIcons.Telephone_Stroke_24()
Ticket
AppIcons.Ticket_Stroke_24()
Tip
AppIcons.Tip_Stroke_24()
Watch
AppIcons.Watch_Stroke_24()
mmhmmTV
fill
AppIcons.mmhmmTV_Fill_24()

drawing (6 icons, 22 variants)

Draw
fill
AppIcons.Draw_Fill_24()
Eraser
AppIcons.Eraser_Stroke_24()
PaintBrush
AppIcons.PaintBrush_Stroke_24()
Pen
AppIcons.Pen_Stroke_24()
Pencil
AppIcons.Pencil_Stroke_24()
Wand
AppIcons.Wand_Stroke_24()

media (14 icons, 55 variants)

Cam
AppIcons.Cam_Stroke_24()
ClosedCaptions
AppIcons.ClosedCaptions_Stroke_24()
MediaLibrary
AppIcons.MediaLibrary_Stroke_24()
Mic
AppIcons.Mic_Stroke_24()
NoMic
AppIcons.NoMic_Stroke_24()
NoSpeaker
AppIcons.NoSpeaker_Stroke_24()
NoVideo
AppIcons.NoVideo_Stroke_24()
Projection
AppIcons.Projection_Stroke_24()
SharePresentation
stroke
AppIcons.SharePresentation_Stroke_24()
ShareScreen
AppIcons.ShareScreen_Stroke_24()
SoundWave
stroke
AppIcons.SoundWave_Stroke_24()
Speaker
AppIcons.Speaker_Stroke_24()
SpeakerWave
AppIcons.SpeakerWave_Stroke_24()
Video
AppIcons.Video_Stroke_24()

navigation (19 icons, 42 variants)

ArrowUpLine
stroke
AppIcons.ArrowUpLine_Stroke_24()
ArrowUpRight
stroke
AppIcons.ArrowUpRight_Stroke_24()
ChevronBackward
stroke
AppIcons.ChevronBackward_Stroke_24()
ChevronBackwardSmall
stroke 16px
AppIcons.ChevronBackwardSmall_Stroke_16()
ChevronDown
stroke
AppIcons.ChevronDown_Stroke_24()
ChevronDownSmall
stroke 16px
AppIcons.ChevronDownSmall_Stroke_16()
ChevronForward
stroke
AppIcons.ChevronForward_Stroke_24()
ChevronForwardSmall
stroke 16px
AppIcons.ChevronForwardSmall_Stroke_16()
ChevronUp
stroke
AppIcons.ChevronUp_Stroke_24()
ChevronUpSmall
stroke 16px
AppIcons.ChevronUpSmall_Stroke_16()
Compass
AppIcons.Compass_Stroke_24()
Expand
stroke
AppIcons.Expand_Stroke_24()
Globe
AppIcons.Globe_Stroke_24()
HamburgerMenu
stroke
AppIcons.HamburgerMenu_Stroke_24()
Home
fill
AppIcons.Home_Fill_24()
More
fill
AppIcons.More_Fill_24()
OpenTab
AppIcons.OpenTab_Stroke_24()
Retract
stroke
AppIcons.Retract_Stroke_24()
Search
AppIcons.Search_Stroke_24()

people (15 icons, 61 variants)

Attendees
AppIcons.Attendees_Stroke_24()
InviteToCall
AppIcons.InviteToCall_Stroke_24()
InviteUser
AppIcons.InviteUser_Stroke_24()
NoPerson
fill
AppIcons.NoPerson_Fill_24()
NoTwoPeople
AppIcons.NoTwoPeople_Stroke_24()
Person
AppIcons.Person_Stroke_24()
Presenter
AppIcons.Presenter_Stroke_24()
Team
AppIcons.Team_Stroke_24()
Together
AppIcons.Together_Stroke_24()
TwoPeople
AppIcons.TwoPeople_Stroke_24()
User
AppIcons.User_Stroke_24()
UserCircle
AppIcons.UserCircle_Stroke_24()
UserRectangle
AppIcons.UserRectangle_Stroke_24()
UserSquare
AppIcons.UserSquare_Stroke_24()
WhosPresenting
AppIcons.WhosPresenting_Stroke_24()

playback (11 icons, 59 variants)

Next
AppIcons.Next_Stroke_24()
PlayerBackward
AppIcons.PlayerBackward_Stroke_24()
PlayerForward
AppIcons.PlayerForward_Stroke_24()
PlayerGoBackward
AppIcons.PlayerGoBackward_Stroke_24()
PlayerGoForward
AppIcons.PlayerGoForward_Stroke_24()
PlayerPause
AppIcons.PlayerPause_Stroke_24()
PlayerPlay
AppIcons.PlayerPlay_Stroke_24()
PlayerStop
AppIcons.PlayerStop_Stroke_24()
Prev
AppIcons.Prev_Stroke_24()
Record
fill
AppIcons.Record_Fill_24()
Timer
fill
AppIcons.Timer_Fill_24()

presentation (17 icons, 58 variants)

AddOverlay
fill
AppIcons.AddOverlay_Fill_24()
Blueprint
AppIcons.Blueprint_Stroke_24()
Chapters
fill
AppIcons.Chapters_Fill_24()
NewPresentation
AppIcons.NewPresentation_Stroke_24()
NoPanels
AppIcons.NoPanels_Stroke_24()
Notes
fill
AppIcons.Notes_Fill_24()
Overlay
fill
AppIcons.Overlay_Fill_24()
Panels
AppIcons.Panels_Stroke_24()
Pointer
fill
AppIcons.Pointer_Fill_24()
Presentations
AppIcons.Presentations_Stroke_24()
PresentationsAlt
AppIcons.PresentationsAlt_Stroke_24()
Questions
fill
AppIcons.Questions_Fill_24()
Remote
fill
AppIcons.Remote_Fill_24()
Spotlight
fill 24px
AppIcons.Spotlight_Fill_24()
Teleprompter
stroke
AppIcons.Teleprompter_Stroke_24()
ThumbnailsHorizontal
fill
AppIcons.ThumbnailsHorizontal_Fill_24()
ThumbnailsVertical
fill
AppIcons.ThumbnailsVertical_Fill_24()

settings (12 icons, 45 variants)

Gear
AppIcons.Gear_Stroke_24()
Key
AppIcons.Key_Stroke_24()
Language
AppIcons.Language_Stroke_24()
MoveAround
AppIcons.MoveAround_Stroke_24()
Roller
AppIcons.Roller_Stroke_24()
Scratchpad
AppIcons.Scratchpad_Stroke_24()
SettingsOnOff
fill
AppIcons.SettingsOnOff_Fill_24()
Size
stroke
AppIcons.Size_Stroke_24()
SizeDown
AppIcons.SizeDown_Stroke_24()
SizeUp
AppIcons.SizeUp_Stroke_24()
Sliders
AppIcons.Sliders_Stroke_24()
Wrench
AppIcons.Wrench_Stroke_24()

shapes (9 icons, 33 variants)

MaskCircle
AppIcons.MaskCircle_Stroke_24()
MaskHexagon
stroke 24px
AppIcons.MaskHexagon_Stroke_24()
MaskRectangle
AppIcons.MaskRectangle_Stroke_24()
MaskSquare
AppIcons.MaskSquare_Stroke_24()
ShapeCircle
AppIcons.ShapeCircle_Stroke_24()
ShapeDiamond
AppIcons.ShapeDiamond_Stroke_24()
ShapeSquare
AppIcons.ShapeSquare_Stroke_24()
ShapeStar
AppIcons.ShapeStar_Stroke_24()
ShapeTriangle
AppIcons.ShapeTriangle_Stroke_24()

status (22 icons, 81 variants)

Activity
AppIcons.Activity_Stroke_24()
CircleCheck
AppIcons.CircleCheck_Stroke_24()
CloudDisconnected
AppIcons.CloudDisconnected_Stroke_24()
CloudDownload
stroke
AppIcons.CloudDownload_Stroke_24()
CloudError
AppIcons.CloudError_Stroke_24()
CloudRetry
AppIcons.CloudRetry_Stroke_24()
CloudSaved
AppIcons.CloudSaved_Stroke_24()
CloudUpload
stroke
AppIcons.CloudUpload_Stroke_24()
CloudWaiting
stroke 24px
AppIcons.CloudWaiting_Stroke_24()
Connected
AppIcons.Connected_Stroke_24()
Disconnected
AppIcons.Disconnected_Stroke_24()
Eye
AppIcons.Eye_Stroke_24()
Help
AppIcons.Help_Stroke_24()
Info
AppIcons.Info_Stroke_24()
Live
fill
AppIcons.Live_Fill_24()
Lock
AppIcons.Lock_Stroke_24()
LockCurved
AppIcons.LockCurved_Stroke_24()
LockRound
AppIcons.LockRound_Stroke_24()
NoEye
AppIcons.NoEye_Stroke_24()
NoLive
fill
AppIcons.NoLive_Fill_24()
WarningMessage
AppIcons.WarningMessage_Stroke_24()
WarningSign
AppIcons.WarningSign_Stroke_24()

text (16 icons, 30 variants)

AddText
AppIcons.AddText_Stroke_24()
StrikeThrough
fill
AppIcons.StrikeThrough_Fill_24()
TextAlignCenter
fill
AppIcons.TextAlignCenter_Fill_24()
TextAlignDecrease
fill
AppIcons.TextAlignDecrease_Fill_24()
TextAlignLeft
fill
AppIcons.TextAlignLeft_Fill_24()
TextAlignRight
fill
AppIcons.TextAlignRight_Fill_24()
TextAspectLandscape
fill 16px
AppIcons.TextAspectLandscape_Fill_16()
TextAspectPortrait
fill 16px
AppIcons.TextAspectPortrait_Fill_16()
TextAspectSquare
fill 16px
AppIcons.TextAspectSquare_Fill_16()
TextAspectWidescreen
fill 16px
AppIcons.TextAspectWidescreen_Fill_16()
TextBold
fill
AppIcons.TextBold_Fill_24()
TextFormat
fill
AppIcons.TextFormat_Fill_24()
TextItalic
fill
AppIcons.TextItalic_Fill_24()
TextSize
fill
AppIcons.TextSize_Fill_24()
TitleCase
fill
AppIcons.TitleCase_Fill_24()
UpperCase
fill
AppIcons.UpperCase_Fill_24()

transitions (4 icons, 4 variants)

NoTransition
stroke 16px
AppIcons.NoTransition_Stroke_16()
TransitionFadeIn
fill 16px
AppIcons.TransitionFadeIn_Fill_16()
TransitionFadeInOut
fill 16px
AppIcons.TransitionFadeInOut_Fill_16()
TransitionFadeOut
fill 16px
AppIcons.TransitionFadeOut_Fill_16()

visual (22 icons, 71 variants)

AddEmoji
AppIcons.AddEmoji_Stroke_24()
AddVisuals
AppIcons.AddVisuals_Stroke_24()
Blur
fill 20px
AppIcons.Blur_Fill_20()
Giphy
AppIcons.Giphy_Stroke_24()
Grid
AppIcons.Grid_Stroke_24()
Happy
AppIcons.Happy_Stroke_24()
Heart
AppIcons.Heart_Stroke_24()
LandscapeRoom
AppIcons.LandscapeRoom_Stroke_24()
Lightbulb
AppIcons.Lightbulb_Stroke_24()
LightningBolt
AppIcons.LightningBolt_Stroke_24()
Party
AppIcons.Party_Stroke_24()
Realroom
fill 20px
AppIcons.Realroom_Fill_20()
Silhouette
fill 20px
AppIcons.Silhouette_Fill_20()
Simple
fill
AppIcons.Simple_Fill_24()
Smilie
AppIcons.Smilie_Stroke_24()
Spark
AppIcons.Spark_Stroke_24()
Special
AppIcons.Special_Stroke_24()
Stickers
fill
AppIcons.Stickers_Fill_24()
StickersSmiley
fill
AppIcons.StickersSmiley_Fill_24()
Theme
fill
AppIcons.Theme_Fill_24()
Visuals
AppIcons.Visuals_Stroke_24()
WallpaperDiagonal
AppIcons.WallpaperDiagonal_Stroke_24()