Skip to content

Conversation

@JoseLuisGJ
Copy link
Contributor

@JoseLuisGJ JoseLuisGJ commented Dec 18, 2025

Summary

Renaming batch of icons 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.

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

CleanShot 2025-12-18 at 12 25 47@2x

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

⚠️ CRITICAL CONFLICTS DETECTED ⚠️

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

  1. Make only these changes for conflicting names:
    Phase 1: arrowDown → chevronSingleDown
    Phase 1: arrowLeft → chevronSingleLeft
    Phase 1: arrowRight → chevronSingleRight
    Phase 1: arrowUp → chevronSingleUp

  2. Pause the renaming and find a new name proposal for currents sortDown, sortUp, sortLeft and sortRight

  3. Pause the renaming and find an alternative for the current merge and invert icons

SUMMARY

Total Phases Processed: 7
Total Rename Specifications: 135

PHASE 1: RENAME SPECIFICATIONS (17 items)

  1. warningFilled → warningFill
  2. errorFilled → errorFill
  3. plusInCircle → plusCircle
  4. minusInCircle → minusCircle
  5. crossInCircle → crossCircle
  6. iInCircle → info
  7. questionInCircle → question
  8. arrowDown → chevronSingleDown
  9. arrowLeft → chevronSingleLeft
  10. arrowRight → chevronSingleRight
  11. arrowUp → chevronSingleUp
  12. arrowStart → chevronLimitLeft
  13. arrowEnd → chevronLimitRight
  14. doubleArrowLeft → chevronDoubleLeft
  15. doubleArrowRight → chevronDoubleRight
  16. checkInCircleFilled → checkCircleFill
  17. timeRefresh → refreshTime

PHASE 2: RENAME SPECIFICATIONS (22 items)

  1. popout → external
  2. boxesVertical → ellipsis
  3. eyeClosed → eyeSlash
  4. sortRight → arrowRight
  5. sortLeft → arrowLeft
  6. sortUp → arrowUp
  7. sortDown → arrowDown
  8. sortable → arrowVertical
  9. beaker → flask
  10. search → magnify
  11. magnifyWithPlus → magnifyPlus
  12. magnifyWithMinus → magnifyMinus
  13. magnifyWithExclamation → magnifyExclamation
  14. glasses → readOnly
  15. exportAction → upload
  16. importAction → download
  17. push → send
  18. editorComment → comment
  19. controlsHorizontal → controls
  20. visTable → table
  21. tableDensityExpanded → tableDensityLow
  22. tableDensityCompact → tableDensityHigh

PHASE 3: RENAME SPECIFICATIONS (18 items)

  1. visLine → chartLine
  2. timeslider → clockControl
  3. unlink → linkSlash
  4. editorCodeBlock → code
  5. list → listBullet
  6. editorOrderedList → listNumber
  7. editorChecklist → listCheck
  8. expand → maximize
  9. merge → invert
  10. folderOpen → folder
  11. indexTemporary → tableTime
  12. grab → dragVertical
  13. grabHorizontal → dragHorizontal
  14. grabOmnidirectional → drag
  15. visText → text
  16. sortDown → arrowDown (duplicate from Phase 2)
  17. sortUp → arrowUp (duplicate from Phase 2)
  18. unlink → linkSlash (duplicate)

PHASE 4: RENAME SPECIFICATIONS (21 items)

  1. visArea → chartArea
  2. visAreaStacked → chartAreaStack
  3. apmTrace → chartWaterfall
  4. cheer → popper
  5. launch → rocket
  6. visGauge → chartGauge
  7. visMapCoordinate → waypoint
  8. crosshairs → crosshair
  9. online → wifi
  10. offline → wifiSlash
  11. visPie → chartPie
  12. console → commandLine
  13. visBarVerticalStacked → chartBarVerticalStack
  14. visBarHorizontalStacked → chartBarHorizontalStack
  15. visBarVertical → chartBarVertical
  16. visBarHorizontal → chartBarHorizontal
  17. starEmpty → star
  18. starFilled → starFill
  19. heatmap → chartHeatmap
  20. indexFlush → chartThreshold
  21. visTagCloud → chartTagCloud

PHASE 5: RENAME SPECIFICATIONS (18 items)

  1. email → mail
  2. editorUndo → undo
  3. editorRedo → redo
  4. compute → processor
  5. desktop → display
  6. logstashQueue → queue
  7. vector → vectorSquare
  8. visMapRegion → map
  9. editorAlignCenter → textAlignCenter
  10. editorAlignLeft → textAlignLeft
  11. editorAlignRight → textAlignRight
  12. exit → logOut
  13. indexMapping → mapping
  14. invert → contrast
  15. contrastHigh → contrastFill (note: currently doesn't exist, may need creation)
  16. pivot → arrowUpRight
  17. training → presentation
  18. color → paintBucket

PHASE 6: RENAME SPECIFICATIONS (25 items)

  1. editorDistributeHorizontal → distributeHorizontal
  2. editorDistributeVertical → distributeVertical
  3. editorItemAlignBottom → alignBottom
  4. editorItemAlignCenter → alignCenterHorizontal
  5. editorItemAlignLeft → alignLeft
  6. editorItemAlignMiddle → alignCenterVertical
  7. editorItemAlignRight → alignRight
  8. editorItemAlignTop → alignTop
  9. editorStrike → textStrike
  10. editorBold → textBold
  11. editorHeading → textHeading
  12. editorItalic → textItalic
  13. editorUnderline → textUnderline
  14. editorPositionBottomLeft → alignBottomLeft
  15. editorPositionBottomRight → alignBottomRight
  16. editorPositionTopLeft → alignTopLeft
  17. editorPositionTopRight → alignTopRight
  18. lineDotted → lineDot
  19. lineDashed → lineDash
  20. returnKey → return
  21. cut → scissors
  22. diff → compare
  23. eql → query
  24. logstashIf → if
  25. securitySignal → radar

PHASE 7: RENAME SPECIFICATIONS (14 items)

  1. kqlField → queryField
  2. kqlOperand → queryOperand
  3. kqlSelector → querySelector
  4. kqlValue → queryValue
  5. pipeBreaks → lineBreak
  6. pipeNoBreaks → lineBreakSlash
  7. anomalyChart → chartAnomaly
  8. changePointDetection → chartChangePoint
  9. fieldStatistics → tableInfo
  10. logPatternAnalysis → pattern
  11. currency → money
  12. temperature → thermometer
  13. streamsWired → productStreamsWired
  14. streamsClassic → productStreamsClassic

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.ts file. 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

  • Browser QA
    • Checked in both light and dark modes
    • Checked in both MacOS and Windows high contrast modes
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • Release checklist
    • A changelog entry exists and is marked appropriately
    • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
    • If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)
  • Designer checklist
    • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

History

@JoseLuisGJ JoseLuisGJ changed the title Renaming-icons-batch [Icons] Icons renaming batch Dec 18, 2025
@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

@JoseLuisGJ JoseLuisGJ marked this pull request as ready for review December 19, 2025 11:01
@JoseLuisGJ JoseLuisGJ requested a review from a team as a code owner December 19, 2025 11:02
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have:

  • chevron_limit_left.tsx
  • chevron_limitLeft.tsx
  • chevronLimitLeft.tsx

is this expected? Shouldn't it be just chevron_limit_left.tsx and chevronLimitLeft.tsx?

arrowStart: 'arrowStart',
arrowEnd: 'arrowEnd',
arrowDown: 'chevron_single_down', // NOTE: To be deprecated in favor of chevronSingleDown
chevronSingleDown: 'chevron_single_down',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Absolutely love the change from arrow to chevron ❤️

@weronikaolejniczak
Copy link
Contributor

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants