ELMO uses a combination of Material Icons Click on an icon below to copy the <IconName /> to your clipboard.
AddCircleIcon AddIcon AddUserIcon AddWidgetIcon AdministrationIcon AnalyticsIcon ArrowBottomIcon ArrowDownIcon ArrowLeftIcon ArrowRightIcon ArrowTopIcon ArrowUpIcon AttachmentIcon BarChartHorizontalIcon BarChartVerticalIcon BenefitsIcon BookmarkFilledIcon BookmarkIcon BulbIcon BulkImportIcon CalendarIcon CareersIcon CategoryIcon CautionIcon ChangePasswordIcon ChatIcon CheckCircleIcon CheckIcon ChecklistIcon ChevronDownIcon ChevronLeftIcon ChevronRightIcon ChevronUpIcon ClapIcon ClipboardIcon ClockIcon CloseCircleIcon CloseIcon CodeBlockIcon CommentIcon CompetencyIcon ConnectIcon ContractsIcon ContributeIcon CopyIcon CourseBuilderIcon CovidSecureIcon CriticalIcon CustomReportIcon DashboardIcon DataImportIcon DatabaseOffIcon DeactivatedUserIcon DeleteIcon DelimiterIcon DepartmentIcon DesignIcon DislikeIcon DocumentIcon DocumentsIcon DownloadIcon DragHandleIcon ELMOAssistIcon EditChartIcon EditIcon ElmoIcon EventIcon ExpandIcon ExpensesIcon ExperienceIcon ExportIcon ExternalLinkIcon FavoriteFilledIcon FavoriteIcon FeedbackIcon FilterIcon FirstPageIcon FlagIcon FolderIcon FontFamilyIcon GithubIcon GridViewIcon HelpIcon HideIcon HomeIcon HybridWorkIcon IndeterminateIcon InformativeIcon InsightsIcon InterviewIcon LastPageIcon LayoutIcon LearningIcon LeaveIcon LightModeIcon LikeIcon LineChartIcon LinkIcon LocationIcon LockIcon MailIcon MenuIcon MobilePhoneIcon MyTeamIcon OverflowHorizontalIcon OverflowVerticalIcon PathIcon PayrollIcon PdfIcon PerformanceIcon PhoneIcon PictureIcon PieChartIcon PinIcon PlayIcon PositionIcon PreferencesIcon ProfileIcon QuizIcon ReadinessScoreIcon RearrangeIcon RecruitmentIcon RedoIcon RemunerationIcon ReportsIcon ResetIcon RestoreIcon RosteringIcon SSOIcon SaveAsIcon SaveIcon SearchIcon SecureIcon SelectInputIcon SendIcon SetupIcon ShareIcon ShiftIcon SignoutIcon SortByIcon SortListIcon StarFilledIcon StarIcon SuccessionIcon SummaryIcon SurveyIcon SwitchAccountIcon SyncIcon TargetIcon TaskIcon TestIcon TextfieldInputIcon ThemeIcon TreeViewIcon TwoColumnIcon UndoIcon UnlinkIcon UploadIcon UserFilledIcon VerticalStackIcon ViewIcon ViewLockIcon WaveIcon WorkIcon Import the icons you need from @eds/icon and use them in your components.
import { AddIcon } from '@eds/icon' ;
The icons accept an optional size prop that can be set to xsmall , small , medium or large . It defaults to medium if no size is specified.
The icons accept any of the text colour tokens. It defaults to currentColor if no color is specified.
If you need to create your own icon to get EDS icon styles, or you wish to pass your custom SVG icon to an EDS component that accepts an icon as a prop such as the <Button /> , you can use the createIcon function.
This function takes two arguments, the SVG path and the name of the icon, and will return a new icon component with the EDS styles and optional size and color props.
NOTE: This is only recommended in cases where EDS doesn't provide the particular icon you need and there is consensus that no other apps would use it either.
