[Icons] Icons renaming batch#9279
Conversation
| arrowStart: 'arrowStart', | ||
| arrowEnd: 'arrowEnd', | ||
| arrowDown: 'chevron_single_down', // NOTE: To be deprecated in favor of chevronSingleDown | ||
| chevronSingleDown: 'chevron_single_down', |
There was a problem hiding this comment.
Absolutely love the change from arrow to chevron ❤️
|
It could be worth looking at #9275 (that's where the snapshot conflicts are coming from). Is this the naming we'd like for it? |
There was a problem hiding this comment.
✅ Tested on the documentation website
✅ Tested in Storybook
✅ Tested visual regression (Storybook + Docker + yarn test-visual-regression)
Several tests failed. The difference looks expected. There are some visual changes in e.g. Flyout, Split button that are also on main. 1e637c4
✅ Tested the icons build script (yarn compile-icons)
❌ Verified all svg/ and assets/ files are snake_case
packages/eui/src/components/icon/svgs/expandMini.svg (seems it's not used in Icon_map)
✅ Verified the icon_map is correct
LGTM! Thank you for this huge clean-up, Jose! 🟢
MichaelMarcialis
left a comment
There was a problem hiding this comment.
Thanks so much for making these renaming changes, @JoseLuisGJ! This is a huge help. Looks great so far. The only items that caught my eye on the first review are the following:
-
Should we pause on making the following renames until we decide on a new name for the
sortprefixed icons? Asking because they are somewhat related to those icons and might benefit from using whatever new name we settle on for those.sortable→arrowVerticalpivot→arrowUpRight
-
Regarding the
push→sendrename, there are some existing misuses of thepushicon in Kibana that might have a negative impact with this change (once the new SVG is merged in). As such, we may want to flag the following changes to be made in Kibana for the teams that own them: -
I noticed that the rename from
node→vectorTrianglewas marked as completed in our Figma tracking document, but this rename is not listed in this PR. Was this a mistake?
|
Thanks @MichaelMarcialis for the review. Makes sense to revert the rename changes on:
I missed the |
Icon Renaming Validation Results ✅I've validated that all 244 icons from the old icon_types.ts are properly covered in this renaming batch. The migration maintains full backward compatibility through the new mapping. Validation Results
How Backward Compatibility WorksEvery old icon is covered through one of two mechanisms:
Complete List of Renamed Icons with AliasesTotal renamed icons with aliases: 100 Unchanged Icons (Kept Original Names)
Total unchanged icons: 144 ConclusionAll existing code using old icon names will continue to work through the aliasing system in the new icon_map.ts . No consumer code changes are required. 🎉 |
💚 Build SucceededHistory
|
💚 Build Succeeded
History
|
MichaelMarcialis
left a comment
There was a problem hiding this comment.
Thanks, @JoseLuisGJ. I know this PR is merged already, but this looks good from my perspective. The only thing I wanted to call out was the renaming of node → vectorTriangle:
-
Similar to the renaming of
push→send(mentioned in this comment), there are some existing uses of thenodeicon in Kibana that might have a negative impact with this change (once the new SVG is merged in). Solution teams will likely need to be given a heads up to change the following:- For the O11y usage, replace
nodewithstorageorpackage. - For the Security usage, replace
nodewithlistBullet.
- For the O11y usage, replace
-
Designers might see it as odd that it is renamed to a "triangle" when the shape isn't a triangle yet (until the new SVG is merged in).
## Dependency updates - `@elastic/eui`: `v111.1.0` ⏩ `v112.0.0` - `@elastic/eslint-plugin-eui`: `v2.6.0` ⏩ `v2.7.0` --- ## Package updates ### `@elastic/eui` [v112.0.0](https://github.com/elastic/eui/releases/tag/v112.0.0) - Added `productDiscover` icon ([#9311](elastic/eui#9311)) - Updated `chartGauge` icon glyph ([#9311](elastic/eui#9311)) - Updated icon glyphs `endpoint` `eraser` `errorFill` `error` `eyeSlash` `faceHappy` `faceNeutral` `faceSad` `folder` `fullScreenExit` `fullScreen` `gradient` `grid` `heart` `home` `if` `image` `infinity` `inputOutput` `key` `keyboard` `lineBreakSlash` `lineBreak` `lineDash` `lineDot` `lineSolid` `logOut` `magnifyMinus` `magnifyPlus` `magnify` `mail` `map` `mapping` `menuLeft` `menuRight` `menu` `merge` `minusCircle` `minusSquare` `minus` `money` `moon` `move` `nested` `number` `package` `paintBucket` `palette` `paperClip` `partial` `pattern` `pause` `pencil` `percent` `pinFill` `pin` `pivot` `plusCircle` `plusSquare` `plus` `popper` `presentation` `processor` `productStreamsWired` `queryField` `queryOperand` `querySelector` `queryValue` `query` `question` `quote` `radar` `readOnly` `redo` `reporter` `return` `rocket` `scissors` `send` `shard` `share` `snowflake` `sortAscending` `sortDescending` `starFill` `star` `stop` `sun` `tableInfo` `tableTime` `textAlignCenter` `textAlignLeft` `textAlignRight` `textBold` `textHeading` `textItalic` `textStrike` `textUnderline` `thermometer` `thumbDown` `thumbUp` `timeline` `transitionLeftIn` `transitionLeftOut` `transitionTopIn` `transitionTopOut` `undo` `vectorSquare` `vectorTriangle` `videoPlayer` `warningFill` `waypoint` `wifiSlash` `wifi` ([#9303](elastic/eui#9303)) ([#9303](elastic/eui#9303)) - Added icons - `archive` `unarchive` `axisX` `axisYLeft` `axisYRight` `bulb` `cloud` `hourglass` `megaphone` `workflow` ([#9303](elastic/eui#9303)) - Added `headerVisibility` prop on `EuiDataGrid` to support rendering the datagrid header element optionally ([#9281](elastic/eui#9281)) - Updated 244 icon definitions to a more consistent naming convention. All 100 renamed icons include a backward-compatible alias in the icon map to support legacy references. ([#9279](elastic/eui#9279)) - Added icons `briefcase`, `productCloudInfra`, `productDashboard`, `productML` ([#9301](elastic/eui#9301)) - Updated glyphs `bullseye`, `bolt` ([#9301](elastic/eui#9301)) - Added `dismissButtonProps` prop to `EuiCallOut` ([#9285](elastic/eui#9285)) **Bug fixes** - Fixed `EuiFlyout` to properly forward refs when `session` prop is used. ([#9318](elastic/eui#9318)) - Fixed `EuiDataGrid` cells scrolling into view while trying to select text ([#9276](elastic/eui#9276)) **Breaking changes** - Removed `euiPaletteForLightBackground` and `euiPaletteForDarkBackground` deprecated palette functions. Use `euiTheme.colors.vis.euiColorVisText{NUMBER}` tokens instead. ([#9296](elastic/eui#9296)) **Accessibility** - Improved the accessibility of `EuiDataGrid`s column selector drag handle buttons by ensuring distinctive labels ([#9282](elastic/eui#9282)) ### `@elastic/eslint-plugin-eui` v2.7.0 - Added `no-static-z-index` rule ([#9236](elastic/eui#9236))
## Dependency updates - `@elastic/eui`: `v111.1.0` ⏩ `v112.0.0` - `@elastic/eslint-plugin-eui`: `v2.6.0` ⏩ `v2.7.0` --- ## Package updates ### `@elastic/eui` [v112.0.0](https://github.com/elastic/eui/releases/tag/v112.0.0) - Added `productDiscover` icon ([elastic#9311](elastic/eui#9311)) - Updated `chartGauge` icon glyph ([elastic#9311](elastic/eui#9311)) - Updated icon glyphs `endpoint` `eraser` `errorFill` `error` `eyeSlash` `faceHappy` `faceNeutral` `faceSad` `folder` `fullScreenExit` `fullScreen` `gradient` `grid` `heart` `home` `if` `image` `infinity` `inputOutput` `key` `keyboard` `lineBreakSlash` `lineBreak` `lineDash` `lineDot` `lineSolid` `logOut` `magnifyMinus` `magnifyPlus` `magnify` `mail` `map` `mapping` `menuLeft` `menuRight` `menu` `merge` `minusCircle` `minusSquare` `minus` `money` `moon` `move` `nested` `number` `package` `paintBucket` `palette` `paperClip` `partial` `pattern` `pause` `pencil` `percent` `pinFill` `pin` `pivot` `plusCircle` `plusSquare` `plus` `popper` `presentation` `processor` `productStreamsWired` `queryField` `queryOperand` `querySelector` `queryValue` `query` `question` `quote` `radar` `readOnly` `redo` `reporter` `return` `rocket` `scissors` `send` `shard` `share` `snowflake` `sortAscending` `sortDescending` `starFill` `star` `stop` `sun` `tableInfo` `tableTime` `textAlignCenter` `textAlignLeft` `textAlignRight` `textBold` `textHeading` `textItalic` `textStrike` `textUnderline` `thermometer` `thumbDown` `thumbUp` `timeline` `transitionLeftIn` `transitionLeftOut` `transitionTopIn` `transitionTopOut` `undo` `vectorSquare` `vectorTriangle` `videoPlayer` `warningFill` `waypoint` `wifiSlash` `wifi` ([elastic#9303](elastic/eui#9303)) ([elastic#9303](elastic/eui#9303)) - Added icons - `archive` `unarchive` `axisX` `axisYLeft` `axisYRight` `bulb` `cloud` `hourglass` `megaphone` `workflow` ([elastic#9303](elastic/eui#9303)) - Added `headerVisibility` prop on `EuiDataGrid` to support rendering the datagrid header element optionally ([elastic#9281](elastic/eui#9281)) - Updated 244 icon definitions to a more consistent naming convention. All 100 renamed icons include a backward-compatible alias in the icon map to support legacy references. ([elastic#9279](elastic/eui#9279)) - Added icons `briefcase`, `productCloudInfra`, `productDashboard`, `productML` ([elastic#9301](elastic/eui#9301)) - Updated glyphs `bullseye`, `bolt` ([elastic#9301](elastic/eui#9301)) - Added `dismissButtonProps` prop to `EuiCallOut` ([elastic#9285](elastic/eui#9285)) **Bug fixes** - Fixed `EuiFlyout` to properly forward refs when `session` prop is used. ([elastic#9318](elastic/eui#9318)) - Fixed `EuiDataGrid` cells scrolling into view while trying to select text ([elastic#9276](elastic/eui#9276)) **Breaking changes** - Removed `euiPaletteForLightBackground` and `euiPaletteForDarkBackground` deprecated palette functions. Use `euiTheme.colors.vis.euiColorVisText{NUMBER}` tokens instead. ([elastic#9296](elastic/eui#9296)) **Accessibility** - Improved the accessibility of `EuiDataGrid`s column selector drag handle buttons by ensuring distinctive labels ([elastic#9282](elastic/eui#9282)) ### `@elastic/eslint-plugin-eui` v2.7.0 - Added `no-static-z-index` rule ([elastic#9236](elastic/eui#9236))
Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co>


Summary
Renaming batch EUI icons, creating aliases with the previous names for each one in order to support the consumption using the old name references. Also fixing the wrong naming convention for some svgs using camel case instead of snake case.
Also renaming the editor icons to become regular glyphs. Removing the editor prefix and the Docs section for all these icons, moving all of them to be listed and used as regular glyphs.
Why are we making this change?
As a part of the new Borealis visual refresh @MichaelMarcialis reviewed also the naming conventions and with the goal of make easier the process for searching icons and simplify the meaning of all of them there were many naming changes proposed into this list
Related ticket: https://github.com/elastic/platform-ux-team/issues/953
Detail of the changes done
We spotted a few conflicting renaming issues that are not tackled in this PR and will be done in a separated PR. More details below:
Details
ELASTIC UI ICON RENAME SPECIFICATIONS
Extracted from Figma Icon Inventory (Phases 1-7)
Date: December 17, 2025
5 NAMING CONFLICTS REQUIRE RESOLUTION BEFORE IMPLEMENTATION
Conflict 1: arrowDown
Phase 1: arrowDown → chevronSingleDown
Phase 2: sortDown → arrowDown
❌ Result: current sortDown and arrowDown will swap the glyphs
Conflict 2: arrowLeft
Phase 1: arrowLeft → chevronSingleLeft
Phase 2: sortLeft → arrowLeft
❌ Result: current sortLeft and arrowLeft will swap the glyphs
Conflict 3: arrowRight
Phase 1: arrowRight → chevronSingleRight
Phase 2: sortRight → arrowRight
❌ Result: current sortRight and arrowRight will swap the glyphs
Conflict 4: arrowUp
Phase 1: arrowUp → chevronSingleUp
Phase 2: sortUp → arrowUp
❌ Result: current sortUp and arrowUp will swap the glyphs
Conflict 5: invert
Phase 3: merge → invert
Phase 5: invert → contrast
❌ Result: current merge and invert will swap the glyphs
RESOLUTION STRATEGIES
Make only these changes for conflicting names:
Phase 1: arrowDown → chevronSingleDown
Phase 1: arrowLeft → chevronSingleLeft
Phase 1: arrowRight → chevronSingleRight
Phase 1: arrowUp → chevronSingleUp
Pause the renaming and find a new name proposal for currents
sortDown,sortUp,sortLeftandsortRightPause the renaming and find an alternative for the current
mergeandinverticonsSUMMARY
Total Phases Processed: 7
Total Rename Specifications: 135
PHASE 1: RENAME SPECIFICATIONS (17 items)
PHASE 2: RENAME SPECIFICATIONS (22 items)
sortRight → arrowRightsortLeft → arrowLeftsortUp → arrowUpsortDown → arrowDownsortable → arrowVerticalPHASE 3: RENAME SPECIFICATIONS (18 items)
merge → invertPHASE 4: RENAME SPECIFICATIONS (21 items)
PHASE 5: RENAME SPECIFICATIONS (18 items)
invert → contrastpivot → arrowUpRightPHASE 6: RENAME SPECIFICATIONS (25 items)
PHASE 7: RENAME SPECIFICATIONS (14 items)
Impact to users
All the renamed icons have a new alias pointing out to the new references, so that it shouldn't have an impact on final users. The new aliases to be deprecated are signposted with a comment into the
icon_map.tsfile. These deprecations might me tackled in another PR and will have an impact in Kibana users.QA
Remove or strikethrough items that do not apply to your PR.
General checklist
@defaultif default values are missing) and playground toggles