Icon

Basic CSS for an icon in elcom Platform, and how to use it?

Color

Sample Title Color Overlay Apply For
Light Gray Icon #999999 Default color for repeated action icons, action list having dark gray labels. For example: Delete or Edit action in table, dropdown menu with dark gray text.
Dark Gray Icon #626262 Default color for action icons having light or medium gray labels.
White #FFFFFF Hover icon in dropdown menu, icons in primary button or black/gray bar.
Electric Blue #4F72AC Default color icon for hovered/pressed/selected effect on light or dark gray icon.

The elcom Platform icons are located in sprites. Each sprite has 4 color versions. For example, an icon in the general sprite has 4 colors that are defined by 4 classes: uiIconLightGray, uiIconDarkGray, uiIconWhite, uiIconBlue.

Size

Sample Size Apply For
32x32 Space application bar, used for special purposes.
24x24 Drive, top navigation icons, used for special purposes.
16x16 Default icon for inpendent uses, such as icon button or icon with 13px label.
14x14 Icon with 12 or 11px font label or special hover action icons.
9x9 Special icons in use, such as arrow and close.
7x7 Special icons in use, such as mini-arrow.

All icons require the <i> tag with the unique class, prefixed with uiIcon. To use, place the following code just about anywhere:

There are also styles available for inverted (light gray, dark gray, white, electric blue) icons, made ready with one extra class.

General icons

These icons are located in the general sprite that are used commonly in elcom Platform with 4 color classes: uiIconLightGray, uiIconDarkGray, uiIconWhite, uiIconBlue.

  • uiIconTrash
  • uiIconEdit
  • uiIconLock
  • uiIconLink
  • uiIconWatch
  • uiIconMove
  • uiIconPreview
  • uiIconRestore
  • uiIconRefresh
  • uiIconCheckin
  • uiIconUpload
  • uiIconDownload
  • .uiIconTag
  • uiIconSave
  • uiIconExport
  • uiIconImport
  • uiIconComment
  • uiIconAttach
  • uiIconBookmark
  • uiIconSetting
  • uiIconSettings
  • uiIconTemplate
  • uiIconFile
  • uiIconAddPage
  • uiIconViewChange
  • uiIconExportPdf
  • uiIconUser
  • uiIconMembership
  • uiIconGroup
  • uiIconFolder
  • uiIconNotification
  • uiIconValidate
  • uiIconMinus
  • uiIconPlus
  • uiIconSimplePlusMini
  • uiIconRemove
  • uiIconInformation
  • uiIconMail
  • uiIconRss
  • uiIconReply
  • uiIconThumbUp
  • uiIconPrint
  • uiIconSortUp
  • uiIconSortDown
  • uiIconHome
  • uiIconQuestion
  • uiIconFlags
  • uiIconClock
  • uiIconTree
  • uiIconGeneralDrive
  • uiIconDiscuss
  • uiIconPoll
  • uiIconTrashMini
  • uiIconEditMini
  • uiIconUnlockMini
  • uiIconLockMini
  • uiIconTick
  • uiIconClose
  • uiIconFileMini
  • uiIconFileMini
  • uiIconArrowDown
  • uiIconArrowUp
  • uiIconArrowRight
  • uiIconArrowLeft
  • uiIconTagMini
  • uiIconUpLevel
  • uiIconExpand
  • uiIconUnlockMedium
  • uiIconLockMedium
  • uiIconAddCategory
  • uiIconArrowDownMini
  • uiIconArrowUpMini
  • uiIconArrowRightMini
  • uiIconArrowLeftMini
  • uiIconGoUp
  • uiIconManageCategory
  • uiIconDragDrop
  • uiIconSimplePlusMini
  • uiIconMinimize
  • uiIconMaximize
  • uiIconHomeInfo
  • uiIconBusinessInfo
  • uiIconEditLayout
  • uiIconEditNavigation
  • uiIconEditPortalConfig
  • uiIconEditPageNode
  • uiIconCloneNode
  • uiIconCopyNode
  • uiIconCutNode
  • uiIconMoveDown
  • uiIconAddPage
  • uiIconManageApplication
  • uiIconPortlet
  • uiIconGadgets
  • uiIconAddUser
  • uiIconAddRemoteGadget
  • uiIconCreateNewGadget
  • uiIconPortletConfig
  • uiIconContainerConfig
  • uiIconBack
  • uiIconFavoriteDocument
  • uiIconUntag

General Color Icons

In some specific cases, the color icons are used.

  • uiIconColorError
  • uiIconColorWarning
  • uiIconColorInfo
  • uiIconColorValidate
  • uiIconColorQuestion
  • uiIconColorMiniSquareBlank
  • uiIconColorMiniSquarePlus
  • uiIconColorMiniSquareMinus
  • uiIconColorBell
  • uiIconColorStarGray
  • uiIconColorStarYellow

ECMS Icons

These icons are located in the ECMS sprite that are used in Content with 4 color classes: uiIconEcmsLightGray, uiIconEcmsDarkGray, uiIconEcmsWhite, uiIconEcmsBlue.

  • uiIconEcmsGeneralDrive
  • uiIconEcmsGroupDrive
  • uiIconEcmsPersonalDrive
  • uiIconEcmsPrivateDrive
  • uiIconEcmsPublicDrive
  • uiIconEcmsTemplateList
  • uiIconEcmsTemplateDocument
  • uiIconEcmsExplorerView
  • uiIconEcmsNameSpace
  • uiIconEcmsQuery
  • uiIconEcmsScript
  • uiIconEcmsCopy
  • uiIconEcmsCut
  • uiIconEcmsRemove
  • uiIconEcmsRename
  • uiIconEcmsAddSymLink
  • uiIconEcmsPaste
  • uiIconEcmsViewDocument
  • uiIconEcmsCopyUrlToClipboard
  • uiIconEcmsCheckout
  • uiIconEcmsShowHideContent
  • uiIconEcmsPublication
  • uiIconEcmsRelation
  • uiIconEcmsVersion
  • uiIconEcmsLocalisedContent
  • uiIconEcmsOverloadThumbnail
  • uiIconEcmsApprove
  • uiIconEcmsPublish
  • uiIconEcmsShowHideRelation
  • uiIconEcmsMetadata
  • uiIconNotification
  • uiIconEcmsProperties
  • uiIconEcmsReference
  • uiIconEcmsAddFolder
  • uiIconEcmsAddDocument
  • uiIconEcmsExportNode
  • uiIconEcmsImportNode
  • uiIconEcmsViewNodeType
  • uiIconEcmsClipboard
  • uiIconEcmsViewDefault
  • uiIconEcmsViewList
  • uiIconEcmsViewIcons
  • uiIconEcmsViewTimeline
  • uiIconEcmsViewAuthor
  • uiIconEcmsViewAdmin
  • uiIconEcmsViewSimple
  • uiIconEcmsViewCoverflow
  • uiIconEcmsViewWcm
  • uiIconEcmsExpand
  • uiIconEcmsGoBack
  • uiIconEcmsGotoFolder
  • uiIconEcmsArticle
  • uiIconEcmsAudit
  • uiIconEcmsNavigation
  • uiIconEcmsCheckIn
  • uiIconEcmsCheckOut
  • uiIconEcmsLock
  • uiIconEcmsUnlock
  • uiIconEcmsEmptyTrash
  • uiIconEcmsMinusStar
  • uiIconEcmsPlayMedia
  • uiIconEcmsCustom
  • uiIconEcmsCollapse
  • uiIconEcmsReturn
  • uiIconEcmsExecute
  • uiIconEcmsDriveSiteManagement
  • uiIconEcmsDriveTrash
  • uiIconEcmsManageContent
  • uiIconEcmsClipboardMini
  • uiIconEcmsRelationListMini
  • uiIconEcmsSearchMini
  • uiIconEcmsTreeMini
  • uiIconEcmsHome
  • uiIconEcmsFileMini
  • uiIconEcmsDottedArrow
  • uiIconEcmsTickMini

ECMS 24x24 pixel icons

There are 4 color classes: uiIconEcms24x24LightGray, uiIconEcms24x24DarkGray, uiIconEcms24x24White, uiIconEcms24x24Blue.

  • uiIconEcms24x24DriveGeneral
  • uiIconEcms24x24DriveGroup
  • uiIconEcms24x24DriveGroup
  • uiIconEcms24x24DrivePrivate
  • uiIconEcms24x24DrivePublic
  • uiIconEcms24x24DriveManagedSites
  • uiIconEcms24x24DriveTrash

Calendar icons

These icons are located in the Calendar sprite that are used in Calendar with 4 color classes: uiIconCalLightGray, uiIconCalDarkGray, uiIconCalWhite, uiIconCalBlue.

  • uiIconCalExportCalendar
  • uiIconCalImportCalendar
  • uiIconCalCreateEvent
  • uiIconCalCreateTask
  • uiIconCalAddCalendar
  • uiIconCalRemoteCalendar
  • uiIconCalInviteUser
  • uiIconCalRejectUser
  • uiIconCalPlus
  • uiIconCalTaskMini
  • uiIconCalClockMini
  • uiIconCalCheckinMini
  • uiIconCalFlagHigh
  • uiIconCalFlagNormal
  • uiIconCalFlagLow
  • uiIconCalShare
  • uiIconCalICal
  • uiIconCalSettingMini

Social icons

These icons are located in the Social sprite that are used in Social with 4 color classes: uiIconSocLightGray, uiIconSocDarkGray, uiIconSocWhite, uiIconSocBlue.

  • uiIconSocAddFile
  • uiIconSocLastestReply
  • uiIconSocTotateToRight
  • uiIconSocTotateToLeft
  • uiIconSocZoomIn
  • uiIconSocZoomOut
  • uiIconSocGroup
  • uiIconSocSimplePlus
  • uiIconSocPhone
  • uiIconSocCalendarMini
  • uiIconSocAnswersMini
  • uiIconSocContentMini
  • uiIconSocFileSharing
  • uiIconSocForumMini
  • uiIconSocLinkMini
  • uiIconSocPoll
  • uiIconSocSpaceMini
  • uiIconSocTaskSharing
  • uiIconSocUserProfile
  • uiIconSocWikiMini
  • uiIconSocVote
  • uiIconSocMention

Forum icons

These icons are located in the Forum sprite that are used in Forum with 4 color classes: uiIconForumLightGray, uiIconForumDarkGray, uiIconForumWhite, uiIconForumBlue.

  • uiIconForumPending
  • uiIconForumTopic
  • uiIconForumCreateTopic
  • uiIconForumCreateForum
  • uiIconForumStick
  • uiIconForumUnStick
  • uiIconForumAddCategory
  • uiIconForumManageCategory
  • uiIconForumModerator
  • uiIconForumAdmin
  • uiIconForumMerge
  • uiIconForumSplit
  • uiIconForumBan
  • uiIconForumShow
  • uiIconForumHide
  • uiIconForumSort
  • uiIconForumCensor
  • uiIconForumBBCode
  • uiIconForumPrune
  • uiIconForumBanIp
  • uiIconForumForward
  • uiIconForumViewStatistic
  • uiIconForumApprove
  • uiIconForumStar
  • uiIconForumPlay
  • uiIconForumPruneSettings
  • uiIconForumColorCloseTiny
  • uiIconForumColorLockTiny
  • uiIconForumColorOffline
  • uiIconForumColorUnread
  • uiIconForumColorOnline
  • uiIconForumColorAway
  • uiIconForumColorBusy

Answers icons

These icons are located in the Answers sprite that are used in Answers with 4 color classes: uiIconAnsLightGray, uiIconAnsDarkGray, uiIconAnsWhite, uiIconAnsBlue.

  • uiIconAnsSubmitQuestion
  • uiIconAnsManageCategory
  • uiIconAnsSentMail
  • uiIconAnsManageQuestion
  • uiIconAnsThumbDownMini
  • uiIconAnsThumbUpMini
  • uiIconAnsAnswer
  • uiIconAnsApprove
  • uiIconAnsDisapprove
  • uiIconAnsPromote
  • uiIconAnsEnable
  • uiIconAnsDisable

Wiki icons

These icons are located in the Wiki sprite that are used in Wiki with 4 color classes: uiIconWikiLightGray, uiIconWikiDarkGray, uiIconWikiWhite, uiIconWikiBlue.

  • uiIconWikiWiki
  • uiIconWikiRickText
  • uiIconWikiHelp
  • uiIconWikiMyWiki
  • uiIconWikiRevision
  • uiIconWikiRestrictedFile

Chat icons

These icons are located in the Wiki sprite that are used in Chat with 4 color classes: uiIconChatLightGray, uiIconChatDarkGray, uiIconChatWhite, uiIconChatBlue.

  • uiIconChatTeam
  • uiIconChatSpace
  • uiIconChatAction
  • uiIconChatSmile
  • uiIconChatRaiseHand
  • uiIconChatAssign
  • uiIconChat
  • uiIconChat
  • uiIconChatVideoCalls

Chat 32x32 pixel icons

There are 4 color classes: uiIconChat32x32LightGray, uiIconChat32x32DarkGray, uiIconChat32x32White, uiIconChat32x32Blue.

  • uiIconChat32x32Team
  • uiIconChat32x32HyperLink
  • uiIconChat32x32RaiseHand
  • uiIconChat32x32Task
  • uiIconChat32x32ShareFile
  • uiIconChat32x32Question
  • uiIconChat32x32AddCall
  • uiIconChat32x32StartCall
  • uiIconChat32x32FinishCall
  • uiIconChat32x32Space
  • uiIconChat32x32Blog

Platform icons

These icons are located in the Platform sprite that are used in elcom Platform with 4 color classes: uiIconPLFLightGray, uiIconPLFDarkGray, uiIconPLFWhite, uiIconPLFBlue.

  • uiIconPLFProfile
  • uiIconPLFActivityStream
  • uiIconPLFMyConnection
  • uiIconPLFDashboard
  • uiIconPLFLogout
  • uiIconPLFEventTask
  • uiIconPLFBlog
  • uiIconPLFCalendar
  • uiIconPLFDocuments
  • uiIconPLFMan
  • uiIconPLFNotifications
  • uiIconPLFTaskNeeds-action
  • uiIconPLFTaskIn-process
  • uiIconPLFTaskDone
  • uiIconPLFTaskCanceled
  • uiIconPLFEvent

File type icons

elcom Platform provides a collection of file types with multiple sizes, including 16x16, 24x24, 32x32, 4x48, 64x64. The icon class name is similar with different size information. For example: uiIcon16x16FileDefault is default file type with the size of 16x16, uiIcon24x24FileDefault has the size of 24x24.

  • uiIcon16x16FileDefault
  • uiIcon16x16FileArchiveDefault
  • uiIcon16x16FileArchiveRar
  • uiIcon16x16FileArchiveZip
  • uiIcon16x16FileJar
  • uiIcon16x16FileEar
  • uiIcon16x16FileWar
  • uiIcon16x16FileAudioDefault
  • uiIcon16x16FileMp3
  • uiIcon16x16FileWma
  • uiIcon16x16FileVideo
  • uiIcon16x16FileFlash
  • uiIcon16x16FileWmv
  • uiIcon16x16FileGdoc
  • uiIcon16x16FileWord
  • uiIcon16x16FileOdt
  • uiIcon16x16FileMpeg
  • uiIcon16x16FileM4v
  • uiIcon16x16FileMkv
  • uiIcon16x16FileTxt
  • uiIcon16x16FileLwp
  • uiIcon16x16FilePage
  • uiIcon16x16FileMdb
  • uiIcon16x16FileOdf
  • uiIcon16x16FileExe
  • uiIcon16x16FilePdf
  • uiIcon16x16FileScript
  • uiIcon16x16FileRtf
  • uiIcon16x16FileGslides
  • uiIcon16x16FileAppleKey
  • uiIcon16x16FileOpenOffice2
  • uiIcon16x16FilePpt
  • uiIcon16x16FilePrz
  • uiIcon16x16FileGsheet
  • uiIcon16x16FileExcel
  • uiIcon16x16FileOpenOffice3
  • uiIcon16x16FileHtml
  • uiIcon16x16FileXml
  • uiIcon16x16FileJs
  • uiIcon16x16FileJson
  • uiIcon16x16FileCss
  • uiIcon16x16FileXsl
  • uiIcon16x16FileFont
  • uiIcon16x16FileGdraw
  • uiIcon16x16FileBmp
  • uiIcon16x16FileIco
  • uiIcon16x16FileGif
  • uiIcon16x16FileOdg
  • uiIcon16x16FilePng
  • uiIcon16x16FilePsd
  • uiIcon16x16FileRaw
  • uiIcon16x16FileTif
  • uiIcon16x16FileXcf
  • uiIcon16x16FileIndd
  • uiIcon16x16FileAi
  • uiIcon16x16FileSvg
  • uiIcon16x16FileJpg

Folder type icons

elcom Platform provides a collection of folder types with multiple sizes, including 16x16, 24x24, 32x32, 4x48, 64x64. The icon class name is similar with different size information. For example: uiIcon16x16FolderDefault is default folder type with the size of 16x16, uiIcon24x24FolderDefault had the size of 24x24.

  • uiIcon16x16FolderDefault
  • uiIcon16x16FolderWebcontentBlue
  • uiIcon16x16FolderPrivate
  • uiIcon16x16FolderFavorite
  • uiIcon16x16FolderDocument
  • uiIcon16x16FolderNtUnstruct
  • uiIcon16x16FolderJs
  • uiIcon16x16FolderWeb
  • uiIcon16x16FolderSound
  • uiIcon16x16FolderPublic
  • uiIcon16x16FolderGraphic
  • uiIcon16x16FolderSearch
  • uiIcon16x16FolderCss
  • uiIcon16x16FolderProduct
  • uiIcon16x16FolderTaxonomy
  • uiIcon16x16FolderelcomContent
  • uiIcon16x16FolderTheme
  • uiIcon16x16FolderVideoMedia
  • uiIcon16x16FolderLink
  • uiIcon16x16exo_driveDefault
  • uiIcon16x16exo_tagStyleDefault
  • uiIcon16x16elcom_viewDefault

Note: Simply replace the size number in the class name to have the expected icon size.

Icons are used in buttons, button groups for a toolbar, navigation, or prepended form inputs.

Action Icon

Hover-reveal actions with action icons.

Sample Content 1
Sample Content 2
Sample Content 3
Sample Content 4
Sample Content 5

Buttons

Button group in a button toolbar

Dropdown in a button group

Small button

Form field