Icon

Mask-based icons in currentColor with squared caps. The full set lives in the reference.

.iconCSS only

Examples

Icons

Anatomy

i.icon[data-icon] An empty element; data-icon picks the glyph. One em square, coloured by the text colour. Ships in aequitas.icons.css, alongside aequitas.css.

API

Attribute	Values	Description
`data-icon`	`arrow-left-rightundoredoreplyforwardcheckxplusminuschevron-downchevron-upchevron-leftchevron-rightarrow-rightarrow-leftarrow-uparrow-downsearchmenumoreslidersuserbellcopytrasheditexternaldownloaduploadhomecalendarclockinfowarningmaillockeyefiltersortbookmarkgridlistrefreshlinksunmoonlayoutglobestarheartfolderfileimagecameraplaypausestopvolumemicvideophonepintagflaginboxarchivesendsharezoom-inzoom-outmaximizeminimizelog-outlog-inhelpcodeterminaldatabasecloudwifibatterypaperclipprintershieldkeycredit-cardcartactivitybar-charttrending-uphashat-signpercentcolumnsrowstabletypebolditalicunderlinelist-orderedalign-leftalign-centeralign-rightquoteunlockeye-offbell-offzapdropcompassnavigationtargetcrosshairwrenchbrushpalettelayersboxpackageanchormapawardcoffeegiftrocketsmileflamepiebluetoothcpumonitorsmartphonetabletheadphonesmusiccalculatorarrow-up-squarearrow-right-squarearrow-down-squarearrow-left-squarearrow-up-circlearrow-right-circlearrow-down-circlearrow-left-circlearrow-up-rightarrow-down-rightarrow-down-leftarrow-up-leftchevrons-upchevrons-rightchevrons-downchevrons-leftchevron-topchevron-lastchevron-bottomchevron-firstcorner-up-leftcorner-up-rightcorner-down-leftcorner-down-rightcorner-left-downcorner-right-downcorner-left-upcorner-right-upmoveexpandcollapserotate-cwrotate-ccwrepeatshuffleskip-backskip-forwardtrending-downsort-ascsort-descarrow-up-downsquarecircletrianglediamondhexagonoctagoncheck-squarex-squareplus-squareminus-squarecheck-circlex-circleplus-circleminus-circlealert-circlealert-squarebanpowerplugloaderasteriskradio-checkedtoggle-lefttoggle-rightsquare-dotcircle-dotequaldividemore-verticalgripcircle-halfsquare-halfstrikethroughindentoutdenttext-wraptext-cursorheadingalign-justifyalign-topalign-middlealign-bottomdistribute-horizontaldistribute-verticallist-checklist-pluslist-xpenpencilpen-toolcroppointerhandfile-textfile-codefile-imagefile-plusfile-minusfile-checkfile-xfile-searchfile-lockfilesfolder-openfolder-plusfolder-minusfolder-xfolder-checkfolder-lockfolder-searchfoldersclipboardclipboard-checkclipboard-copyclipboard-listnotebookbookbook-openbookmarkslibraryusersuser-plususer-minususer-checkuser-xuser-circleuser-squarecontactid-carduser-cogmessagemessage-squaremessagesmessage-pluschat-dotsphone-offphone-callrssmail-openmail-plusmail-checkmail-xbell-plusbagwalletreceiptbarcodeqr-codedollaralarmtimerhourglasshistorycalendar-pluscalendar-minuscalendar-checkcalendar-xcalendar-dayscloud-raincloud-snowcloud-lightningcloud-uploadcloud-downloadleafbugbuildingstorelaptopkeyboardmousehard-driveserversignalcastgit-branchgit-commitgit-mergegit-pull-requestgit-forkbinarybracesbracketsvariablefunctionbotcommandoptionshiftcontroldelete-keyentertab-keycode-squarewebhookapipackage-checkworkflownetworkcomponentblocksshield-checkshield-offshield-alertshield-plusshield-xfingerprintscanscan-lineheart-pulsecrossbandagepillstethoscopesyringelock-openkey-squarebulbpuzzletrophysparkleslayout-dashboardlayout-listpanel-leftpanel-rightpanel-toppanel-bottomsidebar-closesidebar-opensplit-horizontalsplit-verticalfullscreenimage-plusimagesfilmfocuscontrastblursettings-gearsliders-horizontal`	The glyph, by name. Required: without it the icon is a filled square.
`data-size`	`slxl`	Scales the icon against the surrounding text. Default 1em.

Accessibility

The <i> is empty, so it announces nothing. When an icon is the only content of a control, put the label on the control (aria-label).
An icon that carries meaning on its own needs role="img" and an aria-label; otherwise add aria-hidden="true".