Coral.Icon

Current Version: 1.7.0
Note:Any Coral CSS classes and attributes not explicitly mentioned in the public documentation are private and subject to change. Their direct use is not recommended and at high risk of breaking after subsequent updates of CoralUI library. For technical details of how to use Coral safely, please refer to the CoralUI Architecture.
Github: @coralui/coralui-component-icon

CoralUI ships with a set of monochrome icons that are delivered via convenience classes. See the Available Icons section below for valid icon names.

Coral.Icon API

Constructor

JavaScript:

new Coral.Icon() or document.createElement('coral-icon')

HTML Tag:

<coral-icon>

Extends

Static Properties

Coral.Icon.size {String}

Icons can be rendered in different sizes. It follows the shirt sizing naming convention to help you remember them easily.

Properties:

Name Type Value Description
EXTRA_EXTRA_SMALL String XXS Extra extra small size icon, typically 9px size.
EXTRA_SMALL String XS Extra small size icon, typically 12px size.
SMALL String S Small size icon, typically 18px size. This is the default size.
MEDIUM String M Medium size icon, typically 24px size.
LARGE String L Large icon, typically 36px size.
EXTRA_LARGE String XL Extra large icon, typically 48px size.
EXTRA_EXTRA_LARGE String XXL Extra extra large icon, typically 72px size.

Instance Properties

instance.alt {String}

Reflected
Alternative text to identify the icon for accessibility.

When no alt attribute is provided, the icon will fallback to using either the title attribute or icon name as alternative text for accessibility. However, by explicitly setting the alt attribute to an empty string in markup or by using the setAttribute method, one can override the default behavior to avoid redundancy or to indicate that the icon is purely decorative in elements like labelled icon buttons.

HTML Attribute:
  • alt

instance.hidden {Boolean}

Reflected
Whether this component is hidden or not.
Inherited From:
Default Value:
  • false
HTML Attribute:
  • hidden

instance.icon {String}

Reflected
Icon name accordion to the CloudUI Icon sheet.
Default Value:
  • ""
HTML Attribute:
  • icon

instance.size {Coral.Icon.size}

Reflected
Size of the icon. It accepts both lower and upper case sizes.
Default Value:
  • Coral.Icon.size.SMALL
HTML Attribute:
  • size

Methods

instance.get

Get the value of a property.
Parameters:
Name Type Description
property String The name of the property to fetch the value of.
Returns:
Property value. {*}
Inherited From:

instance.hide

Hide this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.off

Remove an event listener.
Parameters:
Name Type Optional Description
eventName String No
 The event name to stop listening for.
selector String Yes
 The selector that was used for event delegation.
func function No
 The function that was passed to on().
useCapture Boolean Yes
 Only remove listeners with useCapture set to the value passed in.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.on

Add an event listener.
Parameters:
Name Type Optional Default Description
eventName String No
 The event name to listen for.
selector String Yes
 The selector to use for event delegation.
func function No
 The function that will be called when the event is triggered.
useCapture Boolean Yes
 Whether or not to listen during the capturing or bubbling phase.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.remove

Non-destructively remove this element. It can be re-added by simply appending it to the document again. It will be garbage collected if there are no more references to it.
Inherited From:

instance.set

Set a single property.
Parameters:
Name Type Description
property String The name of the property to set.
value * The value to set the property to.
silent Boolean If true, events should not be triggered as a result of this set.
Returns:
this, chainable. {Coral.Component}
Inherited From:

instance.show

Show this component.
Returns:
this, chainable {Coral.Component}
Inherited From:

instance.trigger

Trigger an event.
Parameters:
Name Type Optional Default Description
eventName String No
 The event name to trigger.
props Object Yes
 Additional properties to make available to handlers as event.detail.
bubbles Boolean Yes
 Set to false to prevent the event from bubbling.
cancelable Boolean Yes
 Set to false to prevent the event from being cancelable.
Returns:
CustomEvent object {CustomEvent}
Inherited From:

Events

coral-component:attached

Triggered when the component is attached to the DOM.
Callback Parameters:
Name Type Description
event Object Event object.
Inherited From:
Deprecated:
  • since 1.14.0, use MutationObserver instead.

    coral-component:detached

    Triggered when the component is detached to the DOM.
    Callback Parameters:
    Name Type Description
    event Object Event object.
    Inherited From:
    Deprecated:
    • since 1.14.0, use MutationObserver instead.

      coral-component:ready

      Triggerred when the component has been upgraded and is ready for use.
      Callback Parameters:
      Name Type Description
      event Object Event object.
      Inherited From:
      Deprecated:
      • since 1.9.0, use Coral.commons.ready() instead.

        Available Icons

        CoralUI ships with a large set of monochrome icons. The name column corresponds to the value that the icon attribute accepts.

        Icon Name HTML attribute Aliases
        123 icon="123"
        ABC icon="abc" (deprecated: aBC)
        Actions icon="actions"
        Add icon="add"
        AddCircle icon="addCircle"
        AdDisplay icon="adDisplay"
        AddToSelection icon="addToSelection"
        Adjust icon="adjust"
        Adobe icon="adobe"
        AdobeAdvertisingCloud icon="adobeAdvertisingCloud"
        AdobeAnalytics icon="adobeAnalytics"
        AdobeAnalyticsCloud icon="adobeAnalyticsCloud"
        AdobeAudienceManager icon="adobeAudienceManager"
        AdobeCampaign icon="adobeCampaign"
        AdobeConnect icon="adobeConnect"
        AdobeDocumentCloud icon="adobeDocumentCloud"
        AdobeExperienceCloud icon="adobeExperienceCloud"
        AdobeExperienceManager icon="adobeExperienceManager"
        AdobeMarketingCloud icon="adobeMarketingCloud"
        AdobeMediaOptimizer icon="adobeMediaOptimizer"
        AdobePrimetime icon="adobePrimetime"
        AdobeSendNow icon="adobeSendNow"
        AdobeSign icon="adobeSign"
        AdobeSocial icon="adobeSocial"
        AdobeTarget icon="adobeTarget" target
        AdPrint icon="adPrint"
        Alert icon="alert"
        AlertAdd icon="alertAdd"
        AlertCheck icon="alertCheck"
        AlertCircle icon="alertCircle"
        Alias icon="alias"
        AmazonWebServices icon="amazonWebServices"
        Anchor icon="anchor"
        Android icon="android"
        Annotate icon="annotate" draw,write,annotate
        Answer icon="answer"
        AnswerFavorite icon="answerFavorite"
        App icon="app"
        Apple icon="apple"
        AppRefresh icon="appRefresh"
        ApproveReject icon="approveReject"
        Apps icon="apps"
        Archive icon="archive"
        ArchiveRemove icon="archiveRemove"
        ArrowDown icon="arrowDown"
        ArrowLeft icon="arrowLeft"
        ArrowRight icon="arrowRight"
        ArrowUp icon="arrowUp"
        Article icon="article"
        Asset icon="asset"
        AssetCheck icon="assetCheck"
        AssetsAdded icon="assetsAdded"
        AssetsDownloaded icon="assetsDownloaded"
        AssetsExpired icon="assetsExpired"
        AssetsLinkedPublished icon="assetsLinkedPublished"
        AssetsModified icon="assetsModified"
        AssetsPublished icon="assetsPublished"
        Asterisk icon="asterisk"
        At icon="at"
        Attach icon="attach"
        AttachmentExclude icon="attachmentExclude"
        Back icon="back"
        Back30Seconds icon="back30Seconds"
        Beaker icon="beaker"
        BeakerCheck icon="beakerCheck"
        BeakerShare icon="beakerShare"
        Behance icon="behance"
        Bell icon="bell"
        BidRule icon="bidRule"
        BidRuleAdd icon="bidRuleAdd"
        Bitly icon="bitly"
        Blackberry icon="blackberry"
        Blog icon="blog"
        Blur icon="blur"
        Book icon="book"
        BookIndex icon="bookIndex"
        Bookmark icon="bookmark"
        Boolean icon="boolean"
        Border icon="border"
        Box icon="box"
        BoxAdd icon="boxAdd"
        BoxExport icon="boxExport"
        BoxImport icon="boxImport"
        Brackets icon="brackets"
        BracketsSquare icon="bracketsSquare"
        Branch1 icon="branch1"
        Branch2 icon="branch2"
        Branch3 icon="branch3"
        BranchCircle icon="branchCircle"
        Breakdown icon="breakdown"
        BreakdownAdd icon="breakdownAdd"
        Briefcase icon="briefcase"
        Browse icon="browse"
        Brush icon="brush"
        Bug icon="bug"
        Building icon="building"
        BulkEditUsers icon="bulkEditUsers"
        Button icon="button"
        Calculator icon="calculator"
        Calendar icon="calendar"
        CalendarAdd icon="calendarAdd"
        CalendarLocked icon="calendarLocked"
        CalendarUnlocked icon="calendarUnlocked"
        CallCenter icon="callCenter"
        Camera icon="camera"
        CameraRefresh icon="cameraRefresh"
        Campaign icon="campaign"
        CampaignAdd icon="campaignAdd"
        CampaignClose icon="campaignClose" campaignRemove
        CampaignDelete icon="campaignDelete"
        CampaignEdit icon="campaignEdit"
        Captcha icon="captcha"
        Card icon="card"
        Channel icon="channel"
        Chat icon="chat"
        Check icon="check"
        CheckCircle icon="checkCircle"
        CheckmarkCircle icon="checkmarkCircle"
        CheckPause icon="checkPause"
        ChevronDoubleLeft icon="chevronDoubleLeft" accordionLeft
        ChevronDoubleRight icon="chevronDoubleRight" accordionRight
        ChevronDown icon="chevronDown" accordionDown
        ChevronLeft icon="chevronLeft" accordionLeft
        ChevronRight icon="chevronRight" accordionRight
        ChevronUp icon="chevronUp" accordionUp
        ChevronUpDown icon="chevronUpDown"
        Chrome icon="chrome"
        Circle icon="circle"
        Clock icon="clock"
        ClockCheck icon="clockCheck"
        Close icon="close"
        CloseCircle icon="closeCircle"
        ClosedCaptions icon="closedCaptions"
        Cloud icon="cloud"
        Code icon="code"
        Collection icon="collection"
        CollectionAdd icon="collectionAdd"
        CollectionAddTo icon="collectionAddTo"
        CollectionCheck icon="collectionCheck"
        CollectionEdit icon="collectionEdit"
        CollectionExclude icon="collectionExclude"
        CollectionLink icon="collectionLink"
        ColorPalette icon="colorPalette"
        ColumnSettings icon="columnSettings"
        ColumnTwoA icon="columnTwoA"
        ColumnTwoB icon="columnTwoB"
        ColumnTwoC icon="columnTwoC"
        Comment icon="comment"
        CommentAdd icon="commentAdd"
        Compare icon="compare"
        Compass icon="compass"
        ConfidenceFour icon="confidenceFour"
        ConfidenceOne icon="confidenceOne"
        ConfidenceThree icon="confidenceThree"
        ConfidenceTwo icon="confidenceTwo"
        ConversionFunnel icon="conversionFunnel"
        Copy icon="copy"
        CoverImage icon="coverImage"
        CreativeCloud icon="creativeCloud"
        CreditCard icon="creditCard"
        Crop icon="crop"
        CropLightning icon="cropLightning"
        Crosshairs icon="crosshairs"
        Curate icon="curate"
        CursorArrow icon="cursorArrow"
        Cut icon="cut"
        Dashboard icon="dashboard"
        Data icon="data"
        DataAdd icon="dataAdd"
        DataAdobe icon="dataAdobe"
        DataBook icon="dataBook"
        DataCheck icon="dataCheck"
        DataCorrelated icon="dataCorrelated"
        DataDownload icon="dataDownload"
        DataEdit icon="dataEdit"
        DataRefresh icon="dataRefresh"
        DataRemove icon="dataRemove"
        DataUnavailable icon="dataUnavailable"
        DataUpload icon="dataUpload"
        DataUser icon="dataUser"
        Date icon="date"
        DateInput icon="dateInput"
        Deduplication icon="deduplication"
        Delegate icon="delegate"
        Delete icon="delete"
        DeleteOutline icon="deleteOutline"
        DeliveryFusion icon="deliveryFusion"
        Demographic icon="demographic"
        DesktopAndMobile icon="desktopAndMobile"
        DeviceDesktop icon="deviceDesktop"
        DeviceLaptop icon="deviceLaptop"
        DevicePhone icon="devicePhone" deviceMobile
        DevicePhoneRefresh icon="devicePhoneRefresh"
        DevicePreview icon="devicePreview"
        DeviceRotateLandscape icon="deviceRotateLandscape"
        DeviceRotatePortrait icon="deviceRotatePortrait"
        Devices icon="devices"
        DeviceTablet icon="deviceTablet"
        DeviceTV icon="deviceTV" (deprecated: deviceTv)
        Dimension icon="dimension"
        Disqus icon="disqus"
        Divide icon="divide"
        DocumentFragment icon="documentFragment"
        DocumentFragmentGroup icon="documentFragmentGroup"
        Dolly icon="dolly"
        Download icon="download" downloadFromCloud
        Downloaded icon="downloaded"
        DownloadFromCloud icon="downloadFromCloud"
        DPS icon="dps" (deprecated: dPS)
        Draft icon="draft"
        DragHandle icon="dragHandle"
        Dropdown icon="dropdown"
        Duplicate icon="duplicate"
        Edit icon="edit"
        EditCircle icon="editCircle"
        EditExclude icon="editExclude"
        Education icon="education"
        Effects icon="effects"
        Efficient icon="efficient"
        Email icon="email"
        EmailAlert icon="emailAlert"
        EmailCancel icon="emailCancel"
        EmailCheck icon="emailCheck"
        EmailExclude icon="emailExclude"
        EmailGear icon="emailGear"
        EmailKey icon="emailKey"
        EmailLightning icon="emailLightning"
        EmailNotification icon="emailNotification"
        EmailRefresh icon="emailRefresh"
        EmailSchedule icon="emailSchedule"
        Engagement icon="engagement"
        Event icon="event"
        EventExclude icon="eventExclude"
        EventShare icon="eventShare"
        Exclude icon="exclude"
        Experience icon="experience"
        ExperienceAdd icon="experienceAdd"
        ExperienceAddTo icon="experienceAddTo"
        ExperienceExport icon="experienceExport"
        ExperienceImport icon="experienceImport"
        Export icon="export"
        Extension icon="extension"
        Eyedropper icon="eyedropper"
        Facebook icon="facebook"
        FacebookCoverImage icon="facebookCoverImage" coverImage
        Fast icon="fast"
        FastForward icon="fastForward"
        FastForwardCircle icon="fastForwardCircle"
        Feed icon="feed"
        FeedAdd icon="feedAdd"
        FeedManagement icon="feedManagement"
        File icon="file"
        FileAdd icon="fileAdd"
        FileCampaign icon="fileCampaign"
        FileChart icon="fileChart"
        FileCode icon="fileCode"
        FileCSV icon="fileCSV"
        FileData icon="fileData"
        FileEmail icon="fileEmail"
        FileExcel icon="fileExcel"
        FileFolder icon="fileFolder"
        FileGear icon="fileGear"
        FileGlobe icon="fileGlobe"
        FileGlobe2 icon="fileGlobe2"
        FileHTML icon="fileHTML"
        FileIdea icon="fileIdea"
        FileImportant icon="fileImportant"
        FileIndex icon="fileIndex"
        FileKey icon="fileKey"
        FileMobile icon="fileMobile"
        FilePDF icon="filePDF"
        FileShare icon="fileShare"
        FileSingleWebPage icon="fileSingleWebPage"
        FileSpace icon="fileSpace"
        FileTask icon="fileTask"
        FileTemplate icon="fileTemplate"
        FileTxt icon="fileTxt"
        FileUser icon="fileUser"
        FileWord icon="fileWord"
        FileWorkflow icon="fileWorkflow"
        FileXML icon="fileXML"
        FileZip icon="fileZip"
        FilingCabinet icon="filingCabinet"
        Film icon="film"
        Filter icon="filter"
        FilterAdd icon="filterAdd"
        FilterCheck icon="filterCheck"
        FilterDelete icon="filterDelete"
        FilterEdit icon="filterEdit"
        FilterHeart icon="filterHeart"
        FilterRemove icon="filterRemove"
        FilterStar icon="filterStar"
        FindAndReplace icon="findAndReplace"
        Firefox icon="firefox"
        Flag icon="flag"
        FlagExclude icon="flagExclude" unflag
        Flash icon="flash"
        Flashlight icon="flashlight"
        FlashlightOff icon="flashlightOff"
        FlashlightOn icon="flashlightOn"
        Flickr icon="flickr"
        Folder icon="folder"
        FolderAdd icon="folderAdd"
        FolderAddTo icon="folderAddTo"
        FolderAdobe icon="folderAdobe" folderDefault
        FolderArchive icon="folderArchive"
        FolderDelete icon="folderDelete"
        FolderGear icon="folderGear"
        FolderLocked icon="folderLocked"
        FolderLockedAdobe icon="folderLockedAdobe" folderLockedDefault
        FolderOutline icon="folderOutline"
        FolderRemove icon="folderRemove"
        FolderSearch icon="folderSearch"
        FolderUser icon="folderUser"
        Follow icon="follow"
        FollowOff icon="followOff"
        Forecast icon="forecast"
        Form icon="form"
        ForPlacementOnly icon="forPlacementOnly"
        Forward icon="forward"
        FullScreen icon="fullScreen"
        FullScreenExit icon="fullScreenExit"
        Game icon="game"
        Gauge1 icon="gauge1"
        Gauge2 icon="gauge2"
        Gauge3 icon="gauge3"
        Gauge4 icon="gauge4"
        Gauge5 icon="gauge5"
        Gear icon="gear"
        Gears icon="gears" automate
        GearsAdd icon="gearsAdd"
        GearsDelete icon="gearsDelete"
        GearsEdit icon="gearsEdit"
        GenderFemale icon="genderFemale"
        GenderMale icon="genderMale"
        Gift icon="gift"
        Globe icon="globe"
        GlobeCheck icon="globeCheck"
        GlobeClock icon="globeClock"
        GlobeEnter icon="globeEnter"
        GlobeExit icon="globeExit"
        GlobeGrid icon="globeGrid"
        GlobeRemove icon="globeRemove" unpublish
        GlobeSearch icon="globeSearch"
        GlobeStrike icon="globeStrike"
        GlobeStrikeClock icon="globeStrikeClock"
        Google icon="google"
        GoogleAnalytics icon="googleAnalytics"
        GooglePlayStore icon="googlePlayStore"
        GooglePlus icon="googlePlus"
        GooglePlus1 icon="googlePlus1"
        GraphArea icon="graphArea"
        GraphAreaStacked icon="graphAreaStacked"
        GraphBarHorizontal icon="graphBarHorizontal"
        GraphBarHorizontalAdd icon="graphBarHorizontalAdd"
        GraphBarHorizontalStacked icon="graphBarHorizontalStacked" graphBarStackedHorizontal
        GraphBarVertical icon="graphBarVertical"
        GraphBarVerticalAdd icon="graphBarVerticalAdd"
        GraphBarVerticalStacked icon="graphBarVerticalStacked" graphBarStackedVertical
        GraphBubble icon="graphBubble"
        GraphBullet icon="graphBullet"
        GraphConfidenceBands icon="graphConfidenceBands"
        GraphDonut icon="graphDonut"
        GraphDonutAdd icon="graphDonutAdd"
        GraphGantt icon="graphGantt"
        GraphHistogram icon="graphHistogram"
        GraphPathing icon="graphPathing"
        GraphPie icon="graphPie"
        GraphProfitCurve icon="graphProfitCurve"
        GraphScatter icon="graphScatter"
        GraphStream icon="graphStream"
        GraphStreamRanked icon="graphStreamRanked"
        GraphStreamRankedAdd icon="graphStreamRankedAdd"
        GraphSunburst icon="graphSunburst"
        GraphTree icon="graphTree"
        GraphTrend icon="graphTrend" graphTrendRounded
        GraphTrendAdd icon="graphTrendAdd"
        GraphTrendAlert icon="graphTrendAlert"
        Group icon="group"
        Hammer icon="hammer"
        Hand icon="hand"
        Hand0 icon="hand0"
        Hand1 icon="hand1"
        Hand2 icon="hand2"
        Hand3 icon="hand3"
        Hand4 icon="hand4"
        Heart icon="heart"
        Help icon="help"
        HelpCircle icon="helpCircle"
        History icon="history"
        Home icon="home"
        Homepage icon="homepage"
        HTML5 icon="html5" (deprecated: hTML5)
        Image icon="image"
        ImageAdd icon="imageAdd"
        ImageAlbum icon="imageAlbum"
        ImageCarousel icon="imageCarousel"
        ImageCheck icon="imageCheck"
        ImageMapCircle icon="imageMapCircle"
        ImageMapPolygon icon="imageMapPolygon"
        ImageMapRectangle icon="imageMapRectangle" imageMap
        ImageNext icon="imageNext"
        ImageProfile icon="imageProfile"
        Images icon="images"
        ImageText icon="imageText"
        Import icon="import"
        Inbox icon="inbox"
        Individual icon="individual"
        Info icon="info"
        InfoCircle icon="infoCircle"
        Instagram icon="instagram"
        InternetExplorer icon="internetExplorer"
        JumpToTop icon="jumpToTop"
        Key icon="key"
        Keyboard icon="keyboard"
        KeyClock icon="keyClock"
        KeyExclude icon="keyExclude"
        Launch icon="launch"
        Layers icon="layers"
        LayersBackward icon="layersBackward"
        LayersBringToFront icon="layersBringToFront"
        LayersForward icon="layersForward"
        LayersSendToBack icon="layersSendToBack"
        Lightbulb icon="lightbulb"
        Link icon="link"
        LinkCheck icon="linkCheck"
        LinkedIn icon="linkedIn"
        LinkFacebook icon="linkFacebook"
        LinkGlobe icon="linkGlobe"
        LinkNav icon="linkNav"
        LinkOff icon="linkOff"
        LinkOut icon="linkOut"
        LinkOutLight icon="linkOutLight"
        LinkPage icon="linkPage"
        LinkUser icon="linkUser"
        Linux icon="linux"
        Location icon="location"
        LocationBasedDate icon="locationBasedDate"
        LocationBasedEvent icon="locationBasedEvent"
        LocationContribution icon="locationContribution"
        LockOff icon="lockOff"
        LockOn icon="lockOn"
        Login icon="login"
        LogOut icon="logOut"
        Mailbox icon="mailbox"
        MarketingActivities icon="marketingActivities"
        MBox icon="mBox"
        Menu icon="menu" breadcrumb
        Merge icon="merge"
        Minus icon="minus"
        MinusCircle icon="minusCircle"
        MobileServices icon="mobileServices"
        Money icon="money"
        Moon icon="moon"
        More icon="more"
        MoreVertical icon="moreVertical"
        Move icon="move"
        MoveLeftRight icon="moveLeftRight"
        MoveUpDown icon="moveUpDown"
        Multiple icon="multiple"
        MultipleAdd icon="multipleAdd"
        MultipleCheck icon="multipleCheck"
        MultipleExclude icon="multipleExclude"
        News icon="news"
        NewsAdd icon="newsAdd"
        Newsgator icon="newsgator"
        Nielsen icon="nielsen"
        Note icon="note"
        NoteAdd icon="noteAdd"
        Offer icon="offer"
        OfferDelete icon="offerDelete"
        OnAir icon="onAir"
        OneDrive icon="oneDrive"
        Open icon="open"
        OpenRecent icon="openRecent"
        Opera icon="opera"
        Orbit icon="orbit"
        Organisations icon="organisations"
        Organize icon="organize"
        OS icon="os" (deprecated: oS)
        Page icon="page"
        PageBreak icon="pageBreak"
        PageExclude icon="pageExclude"
        PageGear icon="pageGear"
        PageRule icon="pageRule"
        Pages icon="pages"
        PagesExclude icon="pagesExclude"
        PageShare icon="pageShare"
        PageTag icon="pageTag"
        PaintBucket icon="paintBucket"
        Panel icon="panel"
        Paste icon="paste"
        PasteHTML icon="pasteHTML"
        PasteList icon="pasteList"
        PasteText icon="pasteText"
        Pause icon="pause"
        PauseCircle icon="pauseCircle"
        PausePlay icon="pausePlay"
        PausePlayCircle icon="pausePlayCircle"
        Pawn icon="pawn"
        Pending icon="pending"
        PeopleGroup icon="peopleGroup"
        PersonalizationField icon="personalizationField"
        PhoneGap icon="phoneGap"
        PhoneGapBuilder icon="phoneGapBuilder"
        PinOff icon="pinOff"
        PinOn icon="pinOn"
        Pinterest icon="pinterest"
        Pivot icon="pivot"
        Play icon="play"
        PlayCircle icon="playCircle"
        Plug icon="plug"
        PopIn icon="popIn"
        PopOut icon="popOut"
        Preview icon="preview"
        Print icon="print"
        PrintPreview icon="printPreview"
        Project icon="project"
        ProjectAdd icon="projectAdd"
        Promote icon="promote"
        Properties icon="properties"
        Public icon="public"
        Publish icon="publish"
        PublishCheck icon="publishCheck"
        PublishPending icon="publishPending"
        PublishReject icon="publishReject"
        PublishRemove icon="publishRemove"
        PublishSchedule icon="publishSchedule"
        PushNotification icon="pushNotification"
        Question icon="question"
        Rail icon="rail" navigation
        RailBottom icon="railBottom"
        RailLeft icon="railLeft"
        RailRight icon="railRight"
        RailRightClose icon="railRightClose"
        RailRightOpen icon="railRightOpen"
        RailTop icon="railTop"
        Redo icon="redo"
        ReflectHorizontal icon="reflectHorizontal"
        ReflectVertical icon="reflectVertical"
        Refresh icon="refresh"
        Reorder icon="reorder"
        Replies icon="replies"
        Reply icon="reply"
        Report icon="report"
        ReportAdd icon="reportAdd"
        Resize icon="resize"
        Retweet icon="retweet"
        Reuse icon="reuse"
        Revenue icon="revenue"
        Revert icon="revert"
        Rewind icon="rewind"
        RewindCircle icon="rewindCircle"
        Ribbon icon="ribbon"
        RotateLeft icon="rotateLeft"
        RotateRight icon="rotateRight"
        RSS icon="rss" (deprecated: rSS)
        Safari icon="safari"
        Save icon="save"
        SaveAs icon="saveAs"
        SaveTo icon="saveTo"
        Scribble icon="scribble"
        Search icon="search"
        Seat icon="seat"
        SeatAdd icon="seatAdd"
        Select icon="select"
        SelectAll icon="selectAll"
        SelectContainer icon="selectContainer"
        SelectGear icon="selectGear"
        SelectionChecked icon="selectionChecked"
        SelectionDownload icon="selectionDownload"
        SendForSignature icon="sendForSignature"
        SentimentNegative icon="sentimentNegative"
        SentimentNeutral icon="sentimentNeutral"
        SentimentPositive icon="sentimentPositive"
        Separator icon="separator"
        Servers icon="servers"
        Share icon="share"
        ShareCheck icon="shareCheck"
        Sharpen icon="sharpen"
        Shield icon="shield"
        ShoppingCart icon="shoppingCart"
        ShowMenu icon="showMenu"
        Shuffle icon="shuffle"
        SinaWeibo icon="sinaWeibo"
        Slow icon="slow"
        SMS icon="sms" (deprecated: sMS)
        SMSKey icon="sMSKey"
        SMSLightning icon="smsLightning" (deprecated: sMSLightning)
        SMSRefresh icon="smsRefresh" (deprecated: sMSRefresh)
        SocialNetwork icon="socialNetwork"
        Spam icon="spam"
        Spellcheck icon="spellcheck"
        Spin icon="spin"
        Stage icon="stage"
        Stamp icon="stamp"
        Starburst icon="starburst"
        StarFill icon="starFill" star
        StarStroke icon="starStroke"
        Stop icon="stop"
        StopCircle icon="stopCircle" stop
        Stopwatch icon="stopwatch"
        StrokeWidth icon="strokeWidth"
        Subscribe icon="subscribe"
        SubstractFromSelection icon="substractFromSelection"
        SuccessMetric icon="successMetric"
        Summarize icon="summarize"
        Switch icon="switch"
        Sync icon="sync"
        SyncRemove icon="syncRemove"
        Table icon="table"
        TableAdd icon="tableAdd"
        TableAndChart icon="tableAndChart"
        Tableau icon="tableau"
        TableColumnAddLeft icon="tableColumnAddLeft"
        TableColumnAddRight icon="tableColumnAddRight"
        TableColumnMerge icon="tableColumnMerge"
        TableColumnRemoveCenter icon="tableColumnRemoveCenter"
        TableColumnSplit icon="tableColumnSplit"
        TableEdit icon="tableEdit"
        TableHistogram icon="tableHistogram"
        TableMergeCells icon="tableMergeCells"
        TableRowAddBottom icon="tableRowAddBottom"
        TableRowAddTop icon="tableRowAddTop"
        TableRowMerge icon="tableRowMerge"
        TableRowRemoveCenter icon="tableRowRemoveCenter"
        TableRowSplit icon="tableRowSplit"
        TableSelectColumn icon="tableSelectColumn"
        TableSelectRow icon="tableSelectRow"
        Tag icon="tag"
        TagExclude icon="tagExclude"
        Tags icon="tags"
        Target icon="target"
        Targeted icon="targeted"
        TaskList icon="taskList"
        Teapot icon="teapot"
        TestAB icon="testAB"
        TestABEdit icon="testABEdit"
        TestABGear icon="testABGear"
        TestABRemove icon="testABRemove"
        TestProfile icon="testProfile"
        Text icon="text"
        TextAdd icon="textAdd"
        TextBold icon="textBold"
        TextBulleted icon="textBulleted"
        TextBulletedAttach icon="textBulletedAttach"
        TextBulletedHierarchy icon="textBulletedHierarchy"
        TextBulletedHierarchyExclude icon="textBulletedHierarchyExclude"
        TextCenter icon="textCenter"
        TextColor icon="textColor"
        TextDecrease icon="textDecrease"
        TextEdit icon="textEdit"
        TextExclude icon="textExclude"
        TextIncrease icon="textIncrease"
        TextIndentDecrease icon="textIndentDecrease"
        TextIndentIncrease icon="textIndentIncrease"
        TextItalic icon="textItalic"
        TextJustified icon="textJustified"
        TextKerning icon="textKerning"
        TextLeft icon="textLeft"
        TextLetteredLowercase icon="textLetteredLowercase"
        TextLetteredUppercase icon="textLetteredUppercase"
        TextNumbered icon="textNumbered"
        TextParagraph icon="textParagraph"
        TextRight icon="textRight"
        TextRomanLowercase icon="textRomanLowercase"
        TextRomanUppercase icon="textRomanUppercase"
        TextSize icon="textSize"
        TextSizeAdd icon="textSizeAdd"
        TextSpaceAfter icon="textSpaceAfter"
        TextSpaceBefore icon="textSpaceBefore"
        TextStrikethrough icon="textStrikethrough"
        TextStyle icon="textStyle"
        TextSubscript icon="textSubscript"
        TextSuperscript icon="textSuperscript"
        TextUnderline icon="textUnderline"
        ThumbDown icon="thumbDown"
        ThumbUp icon="thumbUp"
        Transparency icon="transparency"
        Trap icon="trap"
        TreeCollapse icon="treeCollapse"
        TreeCollapseAll icon="treeCollapseAll"
        TreeExpand icon="treeExpand"
        TreeExpandAll icon="treeExpandAll"
        TrendInspect icon="trendInspect"
        TriangleDown icon="triangleDown"
        TriangleRight icon="triangleRight"
        Trophy icon="trophy"
        Tumblr icon="tumblr"
        Twitter icon="twitter"
        Type icon="type"
        Undo icon="undo"
        Ungroup icon="ungroup"
        Unmerge icon="unmerge"
        Upload icon="upload"
        USA icon="usa" (deprecated: uSA)
        User icon="user"
        UserActivity icon="userActivity"
        UserAdd icon="userAdd"
        UserAdmin icon="userAdmin"
        UserArrow icon="userArrow"
        UserEdit icon="userEdit"
        UserExclude icon="userExclude"
        UserLock icon="userLock"
        Users icon="users"
        UsersAdd icon="usersAdd"
        UsersExclude icon="usersExclude"
        UserShare icon="userShare"
        UsersLock icon="usersLock"
        UsersShare icon="usersShare"
        ViewAllTags icon="viewAllTags"
        ViewBiWeek icon="viewBiWeek"
        ViewCard icon="viewCard"
        ViewColumn icon="viewColumn"
        ViewDay icon="viewDay"
        ViewDetail icon="viewDetail"
        ViewedMarkAs icon="viewedMarkAs"
        ViewGrid icon="viewGrid"
        ViewList icon="viewList"
        ViewOff icon="viewOff"
        ViewOn icon="viewOn"
        ViewRow icon="viewRow"
        ViewSingle icon="viewSingle"
        ViewStack icon="viewStack"
        ViewWeek icon="viewWeek"
        Visit icon="visit"
        VisitShare icon="visitShare"
        VK icon="vk" (deprecated: vK)
        VolumeMute icon="volumeMute"
        VolumeOne icon="volumeOne"
        VolumeThree icon="volumeThree"
        VolumeTwo icon="volumeTwo"
        Wand icon="wand"
        Watch icon="watch"
        Windows7 icon="windows7"
        Windows8 icon="windows8"
        Wordpress icon="wordpress"
        Workflow icon="workflow"
        WorkflowAdd icon="workflowAdd"
        Wrench icon="wrench"
        YouTube icon="youTube"
        ZoomIn icon="zoomIn"
        ZoomOut icon="zoomOut"

        Color Icon Variants

        |

        These are all available color icons with dark and light theme support.

        Icon Name HTML attribute
        AdobeAnalyticsColor icon="adobeAnalyticsColor"
        AdobeAudienceManagerColor icon="adobeAudienceManagerColor"
        AdobeCampaignColor icon="adobeCampaignColor"
        AdobeExperienceManagerColor icon="adobeExperienceManagerColor"
        AdobeMediaOptimizerColor icon="adobeMediaOptimizerColor"
        AdobePrimetimeColor icon="adobePrimetimeColor"
        AdobeSocialColor icon="adobeSocialColor"
        AdobeTargetColor icon="adobeTargetColor"
        CalendarCheckColor icon="calendarCheckColor"
        EmotionAdmirationColor icon="emotionAdmirationColor"
        EmotionAngerColor icon="emotionAngerColor"
        EmotionAnticipationColor icon="emotionAnticipationColor"
        EmotionDisgustColor icon="emotionDisgustColor"
        EmotionFearColor icon="emotionFearColor"
        EmotionJoyColor icon="emotionJoyColor"
        EmotionSadnessColor icon="emotionSadnessColor"
        EmotionSurpriseColor icon="emotionSurpriseColor"
        FacebookCircleColor icon="facebookCircleColor"
        FacebookColor icon="facebookColor"
        FlickrColor icon="flickrColor"
        GoogleAnalyticsColor icon="googleAnalyticsColor"
        GooglePlusCircleColor icon="googlePlusCircleColor"
        GooglePlusColor icon="googlePlusColor"
        ImageCheckColor icon="imageCheckColor"
        InstagramCircleColor icon="instagramCircleColor"
        InstagramColor icon="instagramColor"
        LinkCheckColor icon="linkCheckColor"
        LinkedInCircleColor icon="linkedInCircleColor"
        LinkedInColor icon="linkedInColor"
        NewsgatorColor icon="newsgatorColor"
        ProjectCameraColor icon="projectCameraColor"
        ProjectColor icon="projectColor"
        ProjectPlayColor icon="projectPlayColor"
        ProjectRefreshColor icon="projectRefreshColor"
        SinaWeiboCircleColor icon="sinaWeiboCircleColor"
        SinaWeiboColor icon="sinaWeiboColor"
        TableCellMergeColor icon="tableCellMergeColor"
        TableColumnAddLeftColor icon="tableColumnAddLeftColor"
        TableColumnAddRightColor icon="tableColumnAddRightColor"
        TableColumnMergeColor icon="tableColumnMergeColor"
        TableColumnRemoveCenterColor icon="tableColumnRemoveCenterColor"
        TableColumnSplitColor icon="tableColumnSplitColor"
        TableRowAddBottomColor icon="tableRowAddBottomColor"
        TableRowAddTopColor icon="tableRowAddTopColor"
        TableRowMergeColor icon="tableRowMergeColor"
        TableRowRemoveCenterColor icon="tableRowRemoveCenterColor"
        TableRowSplitColor icon="tableRowSplitColor"
        TableSelectColumnColor icon="tableSelectColumnColor"
        TableSelectRowColor icon="tableSelectRowColor"
        TargetCheckColor icon="targetCheckColor"
        TwitterCircleColor icon="twitterCircleColor"
        TwitterColor icon="twitterColor"
        UserCircleColor icon="userCircleColor"
        UserGroupCircleColor icon="userGroupCircleColor"
        WindowsColor icon="windowsColor"
        WordpressColor icon="wordpressColor"
        YouTubeCircleColor icon="youTubeCircleColor"
        YouTubeColor icon="youTubeColor"