@atlaskit/icon
Version:
An icon is a symbol representing a command, device, directory, or common action.
366 lines (329 loc) • 88.3 kB
Markdown
# Translating from Tailwind
An example diff of a migration from Tailwind generated code to ADS generated code.
```diff
+import AddIcon from '@atlaskit/icon/core/add';
-<div className="w-4 h-4 text-blue-600">
- <svg>...</svg>
-</div>
+<AddIcon label="Add item" />
-<span className="inline-flex items-center">
- <svg className="w-4 h-4 mr-2">...</svg>
- Text
-</span>
+<AddIcon label="Add item" />
+Text
```
# Common Icon mapping mistakes
❌ `folder` → ✅ `folder-closed` or `folder-open` ❌ `user` → ✅ `person` ❌ `play` → ✅
`video-play` ❌ `arrow` → ✅ `arrow-right`, `arrow-left`, etc. ❌ `chevron` → ✅ `chevron-down`,
`chevron-up`, etc.
# 🚨 Important, **YOU MUST** check the orientiation of the dots in the icon
If the icon has three dots:
- three vertical dots: `<ShowMoreVerticalIcon />`
- three horizontal dots: `<ShowMoreHorizontalIcon />`
# Primary SideNavigation label and `elemBefore` icon combo
If the side navigation primary menu items have the follow label, accompany it with the correct icon
in `elemBefore`. This applies to `LinkMenuItem`, `ButtonMenuItem` and `FlyoutMenuItem`
## Key table
| Label text (in children) | Icon (`elemBefore`) |
| ------------------------ | ------------------- |
| Spaces | `<SpacesIcon>` |
| Apps | `<AppsIcon>` |
| Focus areas | `<FocusAreaIcon>` |
## App external links in SideNavigation
```tsx
<LinkMenuItem
href="/dashboard"
elemBefore={<SpacesIcon label="" />}
isSelected={currentPath === '/dashboard'} // 🚨 CRITICAL: Always check current page
>
Dashboard
</LinkMenuItem>
```
```diff
-import TeamsIcon from '@atlaskit/icon/core/teams';
+import { TeamsIcon } from '@atlaskit/logo';
<LinkMenuItem
href="/"
elemBefore={
<TeamsIcon
label=""
size="xsmall"
shouldUseNewLogoDesign
/>
}
elemAfter={<LinkExternalIcon label="" size="small" />}
>
Teams
</LinkMenuItem>
```
## LinkMenuItem
For navigation links to different pages/sections:
```tsx
import { LinkMenuItem } from '@atlaskit/side-nav-items/link-menu-item';
<LinkMenuItem
href="/dashboard"
elemBefore={<DashboardIcon label="" />}
isSelected={currentPath === '/dashboard'} // 🚨 CRITICAL: Always check current page
>
Dashboard
</LinkMenuItem>;
```
## ButtonMenuItem
For actions that trigger functionality without navigation:
```tsx
import { ButtonMenuItem } from '@atlaskit/side-nav-items/button-menu-item';
<ButtonMenuItem
onClick={handleAction}
elemBefore={<AddIcon label="" />}
isSelected={isModalOpen} // 🚨 CRITICAL: Use for active states
>
Create Project
</ButtonMenuItem>;
```
## FlyoutMenuItem
For hierarchical navigation (use only for starred/recent items):
```tsx
import {
FlyoutMenuItem,
FlyoutMenuItemContent,
FlyoutMenuItemTrigger,
} from '@atlaskit/side-nav-items/flyout-menu-item';
<FlyoutMenuItem>
<FlyoutMenuItemTrigger elemBefore={<ProjectIcon label="" />}>Projects</FlyoutMenuItemTrigger>
<FlyoutMenuItemContent>
<MenuList>
<LinkMenuItem href="/projects/web-app">Web Application</LinkMenuItem>
<LinkMenuItem href="/projects/mobile-app">Mobile Application</LinkMenuItem>
</MenuList>
</FlyoutMenuItemContent>
</FlyoutMenuItem>;
```
## Expandable Menu Pattern
Create expandable sections using state with `ButtonMenuItem`:
```tsx
const styles = cssMap({ spacer: { width: '24px' } });
function Component {
const [isExpanded, setIsExpanded] = useState(false);
return <>
<ButtonMenuItem
onClick={() => setIsExpanded(!isExpanded)}
elemBefore={<SettingsIcon label="" />}
elemAfter={isExpanded ? <ChevronDownIcon label="" /> : <ChevronRightIcon label="" />}
>
Team Settings
</ButtonMenuItem>
{
isExpanded && (
<LinkMenuItem href="/team/members" elemBefore={<div css={styles.spacer} />}>
Members
</LinkMenuItem>
);
}
</>
}
```
# Table of Icons to use
Replace `COMPONENT_NAME` and `ENTRYPOINT` in this examples with values from the table below.
```tsx
import COMPONENT_NAME from '@atlaskit/icon/core/ENTRYPOINT';
```
| Component Name | Entrypoint | Keywords |
| -------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| AccessibilityIcon | accessibility | accessibility, icon, core, a11y, accessibility, WCAG |
| AddIcon | add | add, plus, create, new, icon, core, create, plus, jira status |
| AiAgentIcon | ai-agent | ai-agent, aiagent, icon, core, Rovo, AI, chat agent, ai |
| AiChatIcon | ai-chat | ai-chat, aichat, icon, core, Rovo, AI, chat agent, ai |
| AiGenerativeTextSummaryIcon | ai-generative-text-summary | ai-generative-text-summary, aigenerativetextsummary, icon, core, summarize, summarise, summary, automation, AI |
| AlertIcon | alert | alert, icon, core, alert, event, operations |
| AlignImageCenterIcon | align-image-center | align-image-center, alignimagecenter, icon, core, content, media, image, alignment, centre |
| AlignImageLeftIcon | align-image-left | align-image-left, alignimageleft, icon, core, content, media, image, alignment, left |
| AlignImageRightIcon | align-image-right | align-image-right, alignimageright, icon, core, content, media, image, alignment, right |
| AlignTextCenterIcon | align-text-center | align-text-center, aligntextcenter, icon, core, alignment, text, content |
| AlignTextLeftIcon | align-text-left | align-text-left, aligntextleft, icon, core, alignment, text, content, summary |
| AlignTextRightIcon | align-text-right | align-text-right, aligntextright, icon, core, alignment, text, content |
| AngleBracketsIcon | angle-brackets | angle-brackets, anglebrackets, icon, core, code, <>, </>, syntax, jira status |
| ApiIcon | api | api, icon, core, application programming interface, api, operations |
| AppIcon | app | app, icon, core, add-on, add on, plugin, external app, third-party app |
| AppSwitcherIcon | app-switcher | app-switcher, appswitcher, icon, core, application switcher, change product, switch product, product switcher |
| AppSwitcherLegacyIcon | app-switcher-legacy | app-switcher-legacy, appswitcherlegacy, icon, core, application switcher, change product, switch product, product switcher |
| AppsIcon | apps | apps, icon, core, third-party, applications |
| ArchiveBoxIcon | archive-box | archive-box, archivebox, icon, core, file box |
| ArrowDownIcon | arrow-down | arrow-down, arrowdown, icon, core, down, bottom, sorting |
| ArrowDownLeftIcon | arrow-down-left | arrow-down-left, arrowdownleft, icon, core, diagonal arrow, down, left, south west |
| ArrowDownRightIcon | arrow-down-right | arrow-down-right, arrowdownright, icon, core, diagonal arrow, down, right, south east |
| ArrowLeftIcon | arrow-left | arrow-left, arrowleft, back, previous, icon, core, back, previous |
| ArrowRightIcon | arrow-right | arrow-right, arrowright, forward, next, icon, core, forward, next, link |
| ArrowUpIcon | arrow-up | arrow-up, arrowup, icon, core, improvement, jira status |
| ArrowUpLeftIcon | arrow-up-left | arrow-up-left, arrowupleft, icon, core, diagonal arrow, up, right, north east |
| ArrowUpRightIcon | arrow-up-right | arrow-up-right, arrowupright, icon, core, open, diagonal arrow |
| AssetsIcon | assets | assets, icon, core, assets, CMDB, configuration management database |
| AtlassianIntelligenceIcon | atlassian-intelligence | atlassian-intelligence, atlassianintelligence, icon, core, AI |
| AttachmentIcon | attachment | attachment, paperclip, icon, core, paperclip, attach, attachment |
| AudioIcon | audio | audio, music, note, sound, icon, core, music, musical note |
| AutomationIcon | automation | automation, icon, core, lightningbolt, automation rule |
| BacklogIcon | backlog | backlog, icon, core, rows |
| BasketballIcon | basketball | basketball, icon, core, ball, sports, basketball |
| BoardIcon | board | board, icon, core, columns, active sprint |
| BoardsIcon | boards | boards, icon, core |
| BookWithBookmarkIcon | book-with-bookmark | book-with-bookmark, bookwithbookmark, icon, core, knowledge base, article |
| BorderIcon | border | border, icon, core, border, image border, content border, editor, confluence |
| BranchIcon | branch | branch, icon, core, git branch, bitbucket branch, branches, jira status |
| BriefcaseIcon | briefcase | briefcase, icon, core, suitcase, toolbox, operations, business |
| BugIcon | bug | bug, icon, core, bug report, test |
| CalendarIcon | calendar | calendar, date, icon, core, date, month, day, year, jira status |
| CalendarPlusIcon | calendar-plus | calendar-plus, calendarplus, icon, core, calendar, add, plus, schedule |
| CameraIcon | camera | camera, photo, icon, core |
| CaptureIcon | capture | capture, icon, core, focus, focus area, capture |
| CardIcon | card | card, icon, core, card |
| CashIcon | cash | cash, icon, core, currency, money, cash, dollar, bill, work type |
| ChangesIcon | changes | changes, icon, core, jira status, horizontal arrows |
| ChartBarIcon | chart-bar | chart-bar, chartbar, icon, core, graph, bar, analytics, report |
| ChartMatrixIcon | chart-matrix | chart-matrix, chartmatrix, icon, core, dot chart, graph, matrix, |
| ChartPieIcon | chart-pie | chart-pie, chartpie, icon, core, segment, chart, graph, pie |
| ChartTrendIcon | chart-trend | chart-trend, charttrend, icon, core, reports, graph, impact effort, |
| ChatWidgetIcon | chat-widget | chat-widget, chatwidget, icon, core, chat, widget, virtual service agent, vsa |
| CheckCircleIcon | check-circle | check-circle, checkcircle, tick, icon, core, tick, yes, completed, filled |
| CheckMarkIcon | check-mark | check-mark, checkmark, icon, core, tick |
| CheckboxCheckedIcon | checkbox-checked | checkbox-checked, checkboxchecked, icon, core, filled, checked, select all |
| CheckboxIndeterminateIcon | checkbox-indeterminate | checkbox-indeterminate, checkboxindeterminate, icon, core, filled, mixed |
| CheckboxUncheckedIcon | checkbox-unchecked | checkbox-unchecked, checkboxunchecked, icon, core, unchecked |
| ChevronDoubleLeftIcon | chevron-double-left | chevron-double-left, chevrondoubleleft, icon, core, double chevron, previous year, left |
| ChevronDoubleRightIcon | chevron-double-right | chevron-double-right, chevrondoubleright, icon, core, double chevron, right, next year |
| ChevronDownIcon | chevron-down | chevron-down, chevrondown, expand, collapse, icon, core, chevron down, expand, open |
| ChevronLeftIcon | chevron-left | chevron-left, chevronleft, back, previous, icon, core, chevron left, back, previous |
| ChevronRightIcon | chevron-right | chevron-right, chevronright, forward, next, icon, core, chevron right, next, collapsed, expand, show children |
| ChevronUpIcon | chevron-up | chevron-up, chevronup, expand, collapse, icon, core, chevron up, close dropdown menu, collapse |
| ChildWorkItemsIcon | child-work-items | child-work-items, childworkitems, icon, core, children, child, related, work items |
| ClipboardIcon | clipboard | clipboard, icon, core, clipboard, paste |
| ClockIcon | clock | clock, icon, core, time, recent, history |
| CloseIcon | close | close, icon, core, cross, x, close, remove |
| CloudArrowUpIcon | cloud-arrow-up | cloud-arrow-up, cloudarrowup, icon, core, deployments, up arrow |
| CollapseHorizontalIcon | collapse-horizontal | collapse-horizontal, collapsehorizontal, icon, core, collapse, width, horizontal arrows |
| CollapseVerticalIcon | collapse-vertical | collapse-vertical, collapsevertical, icon, core, collapse, height, vertical arrows |
| CommentIcon | comment | comment, chat, speech, icon, core, speech bubble |
| CommentAddIcon | comment-add | comment-add, commentadd, icon, core, speech bubble, plus |
| CommitIcon | commit | commit, icon, core, git commit, bitbucket commit |
| CompassIcon | compass | compass, icon, core, template |
| ComponentIcon | component | component, block, lego, icon, core, lego, brick, block |
| ContentWidthNarrowIcon | content-width-narrow | content-width-narrow, contentwidthnarrow, icon, core, content, media, image, width, fixed, narrow |
| ContentWidthWideIcon | content-width-wide | content-width-wide, contentwidthwide, icon, core, content, media, image, width, fixed, wide |
| ContentWrapLeftIcon | content-wrap-left | content-wrap-left, contentwrapleft, icon, core, content, media, image, alignment, left, inline, wrap |
| ContentWrapRightIcon | content-wrap-right | content-wrap-right, contentwrapright, icon, core, content, media, image, alignment, right, inline, wrap |
| CopyIcon | copy | copy, duplicate, icon, core, copy, object |
| CreditCardIcon | credit-card | credit-card, creditcard, icon, core, payment, invoice |
| CrossIcon | cross | cross, close, x, cancel, icon, core, cross, x, close, remove |
| CrossCircleIcon | cross-circle | cross-circle, crosscircle, close, x, cancel, icon, core, x, exit, clear, no, filled |
| CurlyBracketsIcon | curly-brackets | curly-brackets, curlybrackets, icon, core, curly brackets, braces, smart value |
| CustomizeIcon | customize | customize, icon, core, customise, configure, modify, preferences, settings, sliders |
| DashboardIcon | dashboard | dashboard, window, grid, icon, core, activity, view |
| DataFlowIcon | data-flow | data-flow, dataflow, icon, core, relationship, data, flow chart |
| DataNumberIcon | data-number | data-number, datanumber, icon, core, numbers, 123, proforma, datatype |
| DataStringIcon | data-string | data-string, datastring, icon, core, string, letters, abc, proforma, datatype |
| DatabaseIcon | database | database, icon, core, spreadsheet, table, data, cells |
| DecisionIcon | decision | decision, icon, core, fork, diagonal arrow |
| DefectIcon | defect | defect, icon, core, defect, fragile, cracked, work type |
| DeleteIcon | delete | delete, icon, core, trash, bin, remove |
| DepartmentIcon | department | department, icon, core, organization, organisation, org chart, hierarchy |
| DeviceMobileIcon | device-mobile | device-mobile, devicemobile, icon, core, iphone, mobile phone, cell phone |
| DevicesIcon | devices | devices, icon, core, devices, assets, laptop, phone, hardware, work type |
| DiscoveryIcon | discovery | discovery, icon, core, discovery, note, filled, onboarding, status |
| DownloadIcon | download | download, cloud, icon, core, down arrow, file download |
| DragHandleHorizontalIcon | drag-handle-horizontal | drag-handle-horizontal, draghandlehorizontal, icon, core, drag handler, reorder, move, reorder horizontal |
| DragHandleVerticalIcon | drag-handle-vertical | drag-handle-vertical, draghandlevertical, icon, core, drag handler, reorder, move, reorder vertical |
| EditIcon | edit | edit, pencil, write, icon, core, pencil, pencil on page |
| EditBulkIcon | edit-bulk | edit-bulk, editbulk, icon, core, edit, pencil, multiple, bulk, change |
| EmailIcon | email | email, icon, core, envelope, message |
| EmojiIcon | emoji | emoji, emoticon, smiley, icon, core, smiley face, emoticon |
| EmojiAddIcon | emoji-add | emoji-add, emojiadd, icon, core, smiley face, emoticon, plus |
| EmojiCasualIcon | emoji-casual | emoji-casual, emojicasual, icon, core, emoij, casual, sunglasses, chill, relaxed |
| EmojiNeutralIcon | emoji-neutral | emoji-neutral, emojineutral, icon, core, emoji, neutral, ambivalent |
| EmojiRemoveIcon | emoji-remove | emoji-remove, emojiremove, icon, core, emoji, remove, strikethrough |
| EpicIcon | epic | epic, icon, core, lightning bolt, jira status, filled |
| ErrorIcon | error | error, warning, alert, icon, core, filled, status, danger, exclamation, !, error |
| ExclamationSquareIcon | exclamation-square | exclamation-square, exclamationsquare, icon, core, !, exclaim, square, work type |
| ExpandHorizontalIcon | expand-horizontal | expand-horizontal, expandhorizontal, icon, core, expand, width, horizontal arrows, maximum width, stretch, fit |
| ExpandVerticalIcon | expand-vertical | expand-vertical, expandvertical, icon, core, expand, height, vertical arrows, maximum height, stretch, fit |
| EyeOpenIcon | eye-open | eye-open, eyeopen, icon, core, watch, visible, visbility, permissions |
| EyeOpenFilledIcon | eye-open-filled | eye-open-filled, eyeopenfilled, icon, core, watching, visible, visbility, permissions, filled |
| EyeOpenStrikethroughIcon | eye-open-strikethrough | eye-open-strikethrough, eyeopenstrikethrough, icon, core, unwatch, invisible, visibility, permissions |
| FeedIcon | feed | feed, icon, core, feed, updates, release notes, what's new |
| FeedbackIcon | feedback | feedback, announce, speaker, megaphone, icon, core, diagonal arrow, chat bubble, survey, critique |
| FieldIcon | field | field, icon, core, field, form, input, label |
| FieldAlertIcon | field-alert | field-alert, fieldalert, icon, core, field, alert, warning, change |
| FieldCheckboxGroupIcon | field-checkbox-group | field-checkbox-group, fieldcheckboxgroup, icon, core, form, field, input type, checkbox, multi-select, options |
| FieldDropdownIcon | field-dropdown | field-dropdown, fielddropdown, icon, core, form, field, select, dropdown |
| FieldRadioGroupIcon | field-radio-group | field-radio-group, fieldradiogroup, icon, core, form, field, input type, radio, single-select, options |
| FileIcon | file | file, document, paper, page, sheet, icon, core, document, file, paper |
| FilesIcon | files | files, icon, core, documents, files, papers |
| FilterIcon | filter | filter, icon, core, funnel, refine |
| FlagIcon | flag | flag, icon, core, important, emoji category |
| FlagFilledIcon | flag-filled | flag-filled, flagfilled, icon, core, flag, important, filled |
| FlaskIcon | flask | flask, icon, core, labs, test, erlenmeyer flask, beaker |
| FocusAreaIcon | focus-area | focus-area, focusarea, icon, core, focus, focus area, capture |
| FolderClosedIcon | folder-closed | folder-closed, folderclosed, icon, core, directory |
| FolderOpenIcon | folder-open | folder-open, folderopen, icon, core, directory |
| FormIcon | form | form, icon, core, form, fields |
| FullscreenEnterIcon | fullscreen-enter | fullscreen-enter, fullscreenenter, icon, core, full screen |
| FullscreenExitIcon | fullscreen-exit | fullscreen-exit, fullscreenexit, icon, core, un-full screen, un-fullscreen |
| GlassesIcon | glasses | glasses, icon, core, glasses, knowledge, learning, spectacles, education |
| GlobeIcon | globe | globe, icon, core, world |
| GoalIcon | goal | goal, icon, core, target |
| GridIcon | grid | grid, icon, core, view all content, tile view, layout, grid, tiles |
| GrowDiagonalIcon | grow-diagonal | grow-diagonal, growdiagonal, icon, core, grow, width and height, diagonal arrows |
| GrowHorizontalIcon | grow-horizontal | grow-horizontal, growhorizontal, icon, core, grow, width, horizontal arrows |
| GrowVerticalIcon | grow-vertical | grow-vertical, growvertical, icon, core, grow, height, vertical arrows |
| HashtagIcon | hashtag | hashtag, icon, core, tag, topic, pound |
| HeadphonesIcon | headphones | headphones, icon, core, audio, music, headphones |
| HeartIcon | heart | heart, icon, core, like, love, emoji category |
| HighlightIcon | highlight | highlight, icon, core, highlight, highlighter, stabilo, pen |
| HomeIcon | home | home, icon, core, house, building |
| ImageIcon | image | image, picture, photo, icon, core, picture, asset |
| ImageFullscreenIcon | image-fullscreen | image-fullscreen, imagefullscreen, icon, core, image, fullscreen, enlarge |
| ImageInlineIcon | image-inline | image-inline, imageinline, icon, core, image, layout, inline |
| ImageScaledIcon | image-scaled | image-scaled, imagescaled, icon, core, image, layout, scaled |
| InboxIcon | inbox | inbox, icon, core, document tray, work, letter, post |
| IncidentIcon | incident | incident, icon, core, witches hat, traffic cone, jira status |
| InformationIcon | information | information, icon, core, info, filled, status, information |
| InformationCircleIcon | information-circle | information-circle, informationcircle, icon, core, information, circle, info |
| KeyResultIcon | key-result | key-result, keyresult, icon, core, target, bullseye, key result, arrow, bow, archery, OKR |
| LayoutOneColumnIcon | layout-one-column | layout-one-column, layoutonecolumn, icon, core, layout, column, 1 col |
| LayoutThreeColumnsIcon | layout-three-columns | layout-three-columns, layoutthreecolumns, icon, core, layout, columns, 3 col, 3 cols |
| LayoutThreeColumnsSidebarsIcon | layout-three-columns-sidebars | layout-three-columns-sidebars, layoutthreecolumnssidebars, icon, core, layout, columns, 3 col, 3 cols, sidebars, asides |
| LayoutTwoColumnsIcon | layout-two-columns | layout-two-columns, layouttwocolumns, icon, core, layout, columns, 2 col, 2 cols |
| LayoutTwoColumnsSidebarLeftIcon | layout-two-columns-sidebar-left | layout-two-columns-sidebar-left, layouttwocolumnssidebarleft, icon, core, layout, columns, 2 col, 2 cols, sidebar, aside |
| LayoutTwoColumnsSidebarRightIcon | layout-two-columns-sidebar-right | layout-two-columns-sidebar-right, layouttwocolumnssidebarright, icon, core, layout, columns, 2 col, 2 cols, sidebar, aside |
| LibraryIcon | library | library, icon, core, library, drawer, drawers, filing cabinet |
| LightbulbIcon | lightbulb | lightbulb, idea, hint, icon, core, idea, initiative, tip, learnings |
| LinkIcon | link | link, icon, core, url, hyperlink, website, www, http, |
| LinkBrokenIcon | link-broken | link-broken, linkbroken, icon, core, unlink, remove link, break link, url, hyperlink, website, www, https |
| LinkExternalIcon | link-external | link-external, linkexternal, icon, core, new tab, new window, open in, url, hyperlink, www, http, https, website, external, shortcut, diagonal arrow, offsite |
| ListBulletedIcon | list-bulleted | list-bulleted, listbulleted, icon, core, bullets, unordered list |
| ListChecklistIcon | list-checklist | list-checklist, listchecklist, icon, core, list, check mark, to-do, requirements, checklist, work type |
| ListNumberedIcon | list-numbered | list-numbered, listnumbered, icon, core, list, numbers |
| LobbyBellIcon | lobby-bell | lobby-bell, lobbybell, icon, core, ding, risks |
| LocationIcon | location | location, pin, gps, map, icon, core, map, pin, address |
| LockLockedIcon | lock-locked | lock-locked, locklocked, icon, core, permissions, no access, restricted, security, secure, forbidden, authentication |
| LockUnlockedIcon | lock-unlocked | lock-unlocked, lockunlocked, icon, core, open permissions, unrestricted access, security, insecure, authentication |
| LogInIcon | log-in | log-in, login, icon, core, sign in, enter, account |
| LogOutIcon | log-out | log-out, logout, icon, core, sign out, exit, account |
| MagicWandIcon | magic-wand | magic-wand, magicwand, icon, core, magic, wand, suggestion |
| MarkdownIcon | markdown | markdown, icon, core, markdown, md, markup |
| MarketplaceIcon | marketplace | marketplace, store, shop, icon, core, app store, storefront, stand, third-party developer |
| MaximizeIcon | maximize | maximize, icon, core, diagonal, resize, enlarge |
| MegaphoneIcon | megaphone | megaphone, icon, core, announcement, bullhorn, feedback, news |
| MentionIcon | mention | mention, user, person, @, icon, core, at symbol, @, tag, username |
| MenuIcon | menu | menu, hamburger, navigation, switcher, app switcher, icon, core, menu, top navigation, 3 lines, hamburger |
| MergeFailureIcon | merge-failure | merge-failure, mergefailure, icon, core, git merge, bitbucket merge, merge fail, cross, x |
| MergeSuccessIcon | merge-success | merge-success, mergesuccess, icon, core, git merge, bitbucket merge, merge success, check mark |
| MicrophoneIcon | microphone | microphone, icon, core, mic, mic on, voice, speak |
| MinimizeIcon | minimize | minimize, icon, core, minimize, dock |
| MinusIcon | minus | minus, icon, core, rule, horizontal line, divider, minus, subtract |
| MinusSquareIcon | minus-square | minus-square, minussquare, icon, core, square, minus, subtract, work type |
| NodeIcon | node | node, icon, core, page, dot, page tree, navigation |
| NoteIcon | note | note, icon, core, note, post-it, sticky |
| NotificationIcon | notification | notification, bell, alarm, icon, core, bell, alert |
| NotificationMutedIcon | notification-muted | notification-muted, notificationmuted, icon, core, bell, alert, notification, mute |
| ObjectiveIcon | objective | objective, icon, core, target, bullseye, objective |
| OfficeBuildingIcon | office-building | office-building, officebuilding, icon, core, organization, organisation, business |
| OnCallIcon | on-call