Icons
To learn how to implement these icons, see Icon component
General icons
All the icons are from the Material Design Icons library.
Example import:
import { mdiAccountCircleOutline } from '@mdi/js'| Icon | MDI link | MDI code | Usage |
|---|---|---|---|
| account-circle-outline | mdiAccountCircleOutline | Profile | |
| account-group-outline | mdiAccountGroupOutline | Group | |
| account-multiple-outline | mdiAccountMultipleOutline | Team, Group | |
| account-outline | mdiAccountOutline | User, Person | |
| account-plus-outline | mdiAccountPlusOutline | Add user, Invite user | |
| account-supervisor-circle-outline | mdiAccountSupervisorCircleOutline | Audience, Personalization | |
| alarm | mdiAlarm | Reminder | |
| alert-circle-outline | mdiAlertCircleOutline | Danger, Error | |
| alert-outline | mdiAlertOutline | Warning | |
| application-outline | mdiApplicationOutline | Site, Website, Web page, Section | |
| archive-outline | mdiArchiveOutline | Archive | |
| arrow-all | mdiArrowAll | Move (on canvas) | |
| arrow-bottom-left | mdiArrowBottomLeft | Bottom-left | |
| arrow-bottom-right | mdiArrowBottomRight | Bottom-right | |
| arrow-collapse | mdiArrowCollapse | Collapse, Exit full screen | |
| arrow-down | mdiArrowDown | Down | |
| arrow-expand | mdiArrowExpand | Expand, Full screen | |
| arrow-expand-all | mdiArrowExpandAll | Dimensions | |
| arrow-expand-horizontal | mdiArrowExpandHorizontal | Space (horizontal) | |
| arrow-expand-vertical | mdiArrowExpandVertical | Space (vertical) | |
| arrow-left | mdiArrowLeft | Back | |
| arrow-right | mdiArrowRight | Forward | |
| arrow-top-left | mdiArrowTopLeft | Top-left | |
| arrow-top-right | mdiArrowTopRight | Top-right | |
| arrow-up | mdiArrowUp | Up | |
| arrow-up-left | mdiArrowUpLeft | Select parent container | |
| autorenew | mdiAutorenew | Repeat, In progress, Busy | |
| badge-account-horizontal-outline | mdiBadgeAccountHorizontalOutline | Guest | |
| barcode-scan | mdiBarcodeScan | Barcode, Product | |
| bell-off-outline | mdiBellOffOutline | Notifications off | |
| bell-outline | mdiBellOutline | Notifications, Activity | |
| book-open-page-variant-outline | mdiBookOpenPageVariantOutline | Documentation | |
| briefcase-outline | mdiBriefcaseOutline | Job title | |
| bullhorn-variant-outline | mdiBullhornVariantOutline | Campaign, Feedback, Changelog, What’s new | |
| button-pointer | mdiButtonPointer | Button | |
| calendar-clock-outline | mdiCalendarClockOutline | Date and time | |
| calendar-outline | mdiCalendarOutline | Date, Event | |
| cancel | mdiCancel | Reject, Decline, Block, Forbidden | |
| card-text-outline | mdiCardTextOutline | Card | |
| cellphone-link | mdiCellphoneLink | Breakpoints, Devices, Responsive | |
| cellphone | mdiCellphone | Mobile view | |
| check | mdiCheck | Approve, Complete | |
| check-circle-outline | mdiCheckCircleOutline | Success, Done, Complete | |
| chevron-down | mdiChevronDown | Dropdown menu, Expand | |
| chevron-left | mdiChevronLeft | Previous | |
| chevron-right | mdiChevronRight | Next, breadcrumb separator | |
| chevron-up | mdiChevronUp | Collapse | |
| circle-half-full | mdiCircleHalfFull | Dark mode / Light mode | |
| clipboard-check-outline | mdiClipboardCheckOutline | Task | |
| clipboard-file-outline | mdiClipboardFileOutline | Paste | |
| clock-outline | mdiClockOutline | Schedule, Time, Job | |
| close | mdiClose | Close, Clear, Cancel | |
| cloud-key-outline | mdiCloudKeyOutline | Single sign-on (SSO) | |
| cloud-off-outline | mdiCloudOffOutline | Unpublish | |
| cloud-upload-outline | mdiCloudUploadOutline | Publish | |
| code-block-tags | mdiCodeBlockTags | Code block | |
| code-json | mdiCodeJson | JSON code | |
| code-tags | mdiCodeTags | Code, HTML | |
| cog-outline | mdiCogOutline | Settings, Configuration | |
| comment-alert-outline | mdiCommentAlertOutline | Support ticket | |
| comment-edit-outline | mdiCommentEditOutline | Blog | |
| comment-text-outline | mdiCommentTextOutline | Comment, Annotation | |
| compare-horizontal | mdiCompareHorizontal | Compare | |
| connection | mdiConnection | Connection | |
| content-copy | mdiContentCopy | Copy, Duplicate, Copy to clipboard | |
| content-cut | mdiContentCut | Cut (to clipboard) | |
| content-duplicate | mdiContentDuplicate | Template | |
| crown-outline | mdiCrownOutline | Default, Master | |
| database-outline | mdiDatabaseOutline | Database, Data source | |
| domain | mdiDomain | Company, Organization | |
| dots-grid | mdiDotsGrid | Switcher | |
| dots-horizontal | mdiDotsHorizontal | More options, Actions | |
| drag-vertical | mdiDragVertical | Drag, Reorder | |
| drawing | mdiDrawing | Graphic | |
| email-outline | mdiEmailOutline | Email, Invitation | |
| eye-outline | mdiEyeOutline | View, Preview | |
| feather | mdiFeather | Content | |
| file-document-outline | mdiFileDocumentOutline | Document | |
| file-outline | mdiFileOutline | Page, File | |
| file-tree | mdiFileTree | Site manager | |
| filter-variant | mdiFilterVariant | Filter | |
| finance | mdiFinance | Usage | |
| flask-outline | mdiFlaskOutline | Experiment, Recipe | |
| folder-move-outline | mdiFolderMoveOutline | Move | |
| folder-outline | mdiFolderOutline | Folder, Project | |
| form-textbox | mdiFormTextbox | Rename | |
| format-bold | mdiFormatBold | Bold | |
| format-color-fill | mdiFormatColorFill | Color, Fill, Background settings | |
| format-float-left | mdiFormatFloatLeft | Rich text | |
| format-font | mdiFormatFont | Font, Typeface | |
| format-italic | mdiFormatItalic | Italic | |
| format-letter-case | mdiFormatLetterCase | Typography, Text formatting | |
| format-letter-spacing | mdiFormatLetterSpacing | Letter spacing | |
| format-line-spacing | mdiFormatLineSpacing | Line height | |
| format-list-bulleted | mdiFormatListBulleted | Bulleted list | |
| format-list-bulleted-square | mdiFormatListBulletedSquare | List | |
| format-list-numbered | mdiFormatListNumbered | Numbered list | |
| format-list-checks | mdiFormatListChecks | Option list | |
| format-paragraph-spacing | mdiFormatParagraphSpacing | Paragraph spacing | |
| format-quote-close | mdiFormatQuoteClose | Quote | |
| format-size | mdiFormatSize | Text size | |
| format-strikethrough-variant | mdiFormatStrikethroughVariant | Strikethrough | |
| format-textbox | mdiFormatTextbox | Text block, Text box | |
| format-title | mdiFormatTitle | Title | |
| format-underline | mdiFormatUnderline | Underline | |
| forum-outline | mdiForumOutline | Forum, Social media | |
| gradient-vertical | mdiGradientVertical | Gradient | |
| handshake-outline | mdiHandshakeOutline | Terms & conditions | |
| heart-outline | mdiHeartOutline | Save to list | |
| heart-pulse | mdiHeartPulse | System health, System status | |
| help-circle-outline | mdiHelpCircleOutline | Help | |
| history | mdiHistory | History, Recent | |
| home-variant-outline | mdiHomeVariantOutline | Home | |
| human | mdiHuman | Accessibility | |
| image-multiple-outline | mdiImageMultipleOutline | Album cover | |
| image-outline | mdiImageOutline | Image, Media | |
| incognito | mdiIncognito | Impersonate | |
| information-outline | mdiInformationOutline | Information, More info, Icon | |
| key | mdiKey | Key, Client (XM Cloud Deploy) | |
| layers-outline | mdiLayersOutline | Layers | |
| lifebuoy | mdiLifebuoy | Support | |
| link-variant | mdiLinkVariant | Link, URL | |
| list-box-outline | mdiListBoxOutline | Form | |
| lock-open-variant-outline | mdiLockOpenVariantOutline | Unlock | |
| lock-outline | mdiLockOutline | Lock, System property | |
| login | mdiLogin | Log in | |
| logout | mdiLogout | Log out | |
| magnify | mdiMagnify | Search | |
| map-marker-outline | mdiMapMarkerOutline | Location | |
| minus | mdiMinus | Remove, Horizontal line | |
| minus-circle-outline | mdiMinusCircleOutline | Remove, Unlink | |
| monitor | mdiMonitor | Desktop view | |
| movie-outline | mdiMovieOutline | Movie | |
| music-box-outline | mdiMusicBoxOutline | Audio file | |
| newspaper-variant-outline | mdiNewspaperVariantOutline | Article, Newspaper | |
| numeric | mdiNumeric | Number, Integer | |
| open-in-new | mdiOpenInNew | Open in new tab, Open, Launch | |
| page-first | mdiPageFirst | First | |
| page-last | mdiPageLast | Last | |
| palette-outline | mdiPaletteOutline | Theme | |
| palette-swatch-outline | mdiPaletteSwatchOutline | Color profile | |
| paperclip | mdiPaperclip | Attachment | |
| pause | mdiPause | Pause | |
| pencil-outline | mdiPencilOutline | Edit | |
| pencil-ruler-outline | mdiPencilRulerOutline | Content type | |
| phone-outline | mdiPhoneOutline | Phone | |
| play-box-outline | mdiPlayBoxOutline | Video file | |
| play-outline | mdiPlayOutline | Start | |
| plus | mdiPlus | Add, New | |
| puzzle-outline | mdiPuzzleOutline | Plug-in | |
| redo | mdiRedo | Redo | |
| refresh | mdiRefresh | Refresh, Reload, Retry | |
| reply-outline | mdiReplyOutline | Reply | |
| restart | mdiRestart | Restart, Reset | |
| restore | mdiRestore | Restore, Revert | |
| rocket-launch-outline | mdiRocketLaunchOutline | Deploy, Deployment | |
| school-outline | mdiSchoolOutline | Education, Training | |
| selection | mdiSelection | Selection | |
| send | mdiSend | Send | |
| share-outline | mdiShareOutline | Share | |
| share-variant-outline | mdiShareVariantOutline | Social share | |
| shield-key-outline | mdiShieldKeyOutline | API key, Token | |
| shield-lock-outline | mdiShieldLockOutline | Security, Multi-factor authentication (MFA) | |
| shopping-outline | mdiShoppingOutline | Commerce, Shopping | |
| sitemap-outline | mdiSitemapOutline | Taxonomy | |
| square | mdiSquare | Solid color | |
| square-edit-outline | mdiSquareEditOutline | Draft | |
| square-off-outline | mdiSquareOffOutline | No colour, No border settings | |
| stamper | mdiStamper | Watermark | |
| star | mdiStar | Favorite (active), Star (active) | |
| star-four-points | mdiStarFourPoints | Artifcial Intelligence, Generative AI | |
| star-outline | mdiStarOutline | Favorite, Star | |
| swap-horizontal | mdiSwapHorizontal | Swap (horizontal) | |
| swap-vertical | mdiSwapVertical | Sorting, Swap (vertical) | |
| sync | mdiSync | Sync | |
| tab | mdiTab | Tab, Tabs | |
| table | mdiTable | Table | |
| table-column-plus-after | mdiTableColumnPlusAfter | Insert column right | |
| table-column-plus-before | mdiTableColumnPlusBefore | Insert column left | |
| table-column-remove | mdiTableColumnRemove | Delete column | |
| table-row-plus-after | mdiTableRowPlusAfter | Insert row below | |
| table-row-plus-before | mdiTableRowPlusBefore | Insert row above | |
| table-row-remove | mdiTableRowRemove | Delete row | |
| tablet | mdiTablet | Tablet view | |
| tag-outline | mdiTagOutline | Tag, Label | |
| text | mdiText | Text, String | |
| text-long | mdiTextLong | Text (long) | |
| text-short | mdiTextShort | Text (short) | |
| thumbs-up-down-outline | mdiThumbsUpDownOutline | Review | |
| timer-outline | mdiTimerOutline | Timer | |
| toggle-switch-outline | mdiToggleSwitchOutline | Boolean, Toggle, Switch | |
| toolbox-outline | mdiToolboxOutline | Toolkit, Starter kit | |
| toy-brick-outline | mdiToyBrickOutline | Component | |
| translate | mdiTranslate | Translate, Translation | |
| trash-can-outline | mdiTrashCanOutline | Delete | |
| tray-arrow-down | mdiTrayArrowDown | Download | |
| tray-arrow-up | mdiTrayArrowUp | Upload | |
| tune-variant | mdiTuneVariant | Tune, Adjust, Customize | |
| undo | mdiUndo | Undo | |
| unfold-less-horizontal | mdiUnfoldLessHorizontal | Show less | |
| unfold-less-vertical | mdiUnfoldLessVertical | Show less | |
| unfold-more-horizontal | mdiUnfoldMoreHorizontal | Show more | |
| unfold-more-vertical | mdiUnfoldMoreVertical | Show more | |
| update | mdiUpdate | Update, Rework | |
| vector-link | mdiVectorLink | Referenced content | |
| vector-curve | mdiVectorCurve | Vector | |
| view-carousel-outline | mdiViewCarouselOutline | Carousel | |
| view-column-outline | mdiViewColumnOutline | Columns | |
| view-list-outline | mdiViewListOutline | List view | |
| view-module-outline | mdiViewModuleOutline | Grid view | |
| web | mdiWeb | Language, Locale, Localization | |
| zip-box-outline | mdiZipBoxOutline | ZIP file, compressed archive | |
| webhook | mdiWebhook | Webhook |
Logo icons
Used when a logo needs to be rendered as a single path inside an Icon. For the regular full-color logo images, see Logos.
Example import:
import { iconXmCloud } from '@sitecore/blok-theme'| Icon | Product | Icon code |
|---|---|---|
| CDP | iconCdp | |
| Connect | iconConnect | |
| Content Hub | iconContentHub | |
| Content Hub ONE | iconContentHubOne | |
| Discover | iconDiscover | |
| OrderCloud | iconOrdercloud | |
| Personalize | iconPersonalize | |
| Search | iconSearch | |
| XM Cloud | iconXmCloud | |
| Sitecore | iconSitecore | |
| SitecoreAI | iconSitecoreAI |