fix: update icon role names to current EUI canonical names (#6704)

florent-leborgne · cursoragent · web-flow · commit c7e5452a73bf · 2026-06-08T11:17:58.000Z
## Summary Updates all `{icon}` role usages in docs-content to use current EUI canonical (snake_case) names, following the icon renaming in [elastic/eui#9279](elastic/eui#9279). The old camelCase names continue to work as aliases in docs-builder (via `EuiSvgIcons.cs`), but this cleans them up at the source so the docs stay in sync with EUI naming going forward. **Replacements made across 19 files:** | Old name | New name | |---|---| | `bellSlash` | `bell_slash` | | `checkCircle` | `check_circle` | | `clockCounter` | `clock_counter` | | `errorFilled` | `error_fill` | | `export` | `external` | | `filterInCircle` | `filter_in_circle` | | `minus_in_circle` | `minus_circle` | | `pipeBreaks` | `line_break` | | `playFilled` | `play_filled` | | `plus_in_circle` | `plus_circle` | | `plus_in_square` | `plus_square` | | `timelineWithArrow` | `timeline_with_arrow` | | `transitionLeftIn` | `transition_left_in` | | `transitionLeftOut` | `transition_left_out` | | `transitionTopIn` | `transition_top_in` | | `transitionTopOut` | `transition_top_out` | Related: elastic/docs-builder#3378 Made with [Cursor](https://cursor.com) Co-authored-by: Cursor <cursoragent@cursor.com>
diff --git a/contribute-docs/syntax-quick-reference.md b/contribute-docs/syntax-quick-reference.md
@@ -529,15 +529,15 @@ Include icons inline using the `` {icon}`icon-name` `` syntax.
 :open:
 ```markdown
 Click the {icon}`gear` **Settings** icon.
-Status: {icon}`checkCircle` Success | {icon}`warning` Warning | {icon}`error` Error
+Status: {icon}`check_circle` Success | {icon}`warning` Warning | {icon}`error` Error
 ```
 :::
 
 :::{dropdown} Output
 :open:
 Click the {icon}`gear` **Settings** icon.
 
-Status: {icon}`checkCircle` Success | {icon}`warning` Warning | {icon}`error` Error
+Status: {icon}`check_circle` Success | {icon}`warning` Warning | {icon}`error` Error
 :::
 
 **DOs**<br>
diff --git a/deploy-manage/deploy/elastic-cloud/project-settings.md b/deploy-manage/deploy/elastic-cloud/project-settings.md
@@ -154,11 +154,11 @@ You can add custom tags for any piece of metadata that might help you to categor
 #### Create custom tags
 
 1. In {{ecloud}}, select your project from the **Serverless projects** panel and click **Manage**.
-2. From the **Overview** page for your project, in the **Tags** section, click **{icon}`plus_in_circle` Add tags**.
+2. From the **Overview** page for your project, in the **Tags** section, click **{icon}`plus_circle` Add tags**.
 3. Add a key and value for your custom tag, and then click **Add**.
 4. When you're finished creating tags, click **Save**.
 
-To remove a custom tag from a project, reopen the tag management drawer by clicking **{icon}`plus_in_circle`  Add tags**.
+To remove a custom tag from a project, reopen the tag management drawer by clicking **{icon}`plus_circle`  Add tags**.
 
 #### Custom tags using the {{serverless-full}} API
 
diff --git a/explore-analyze/alerting/alerts/view-alerts.md b/explore-analyze/alerting/alerts/view-alerts.md
@@ -89,7 +89,7 @@ If an alert is active or flapping, you can mute it to temporarily suppress futur
 You can mute individual alerts or multiple ones:
 
 - Mute individual alerts: Find the **Alerts** management page using the navigation menu or the [global search field](/explore-analyze/find-and-organize/find-apps-and-objects.md), open the action menu ({icon}`boxes_vertical`) for the appropriate alert, then select **Mute**.
-- Bulk-mute alerts: Select one or more alerts from the **Alerts** management page, click **Selected _x_ alerts** at the upper-left above the table, then select **Mute selected**. Select the **Unmute selected** option to unmute alerts. Muted alerts display the icon {icon}`bellSlash` in the Alerts table. 
+- Bulk-mute alerts: Select one or more alerts from the **Alerts** management page, click **Selected _x_ alerts** at the upper-left above the table, then select **Mute selected**. Select the **Unmute selected** option to unmute alerts. Muted alerts display the icon {icon}`bell_slash` in the Alerts table. 
 :::
 
 :::{applies-item} stack: ga 9.0-9.2
diff --git a/explore-analyze/dashboards/create-dashboard-of-panels-with-ecommerce-data.md b/explore-analyze/dashboards/create-dashboard-of-panels-with-ecommerce-data.md
@@ -71,7 +71,7 @@ To analyze the data with a custom time interval, create a bar chart that shows y
 
 To identify the 75th percentile of orders, add a reference line:
 
-1. In the layer pane, click {icon}`plus_in_square` **Add layer > Reference lines**.
+1. In the layer pane, click {icon}`plus_square` **Add layer > Reference lines**.
 2. Click **Static value**.
 
     1. Click **Quick function**, then click **Percentile**.
@@ -156,7 +156,7 @@ To analyze multiple visualization types, create an area chart that displays the
 
 Add a layer to display the customer traffic:
 
-1. In the layer pane, click {icon}`plus_in_square` **Add layer > Visualization > Line**.
+1. In the layer pane, click {icon}`plus_square` **Add layer > Visualization > Line**.
 2. From the **Available fields** list, drag **customer_id** to the **Vertical Axis** field in the second layer.
 3. In the layer pane, click **Unique count of customer_id**.
 
diff --git a/explore-analyze/discover/document-explorer.md b/explore-analyze/discover/document-explorer.md
@@ -27,9 +27,9 @@ Discover provides default [context-aware experiences](/explore-analyze/discover/
 
 * To show or hide sections of the Discover view:
   * {applies_to}`serverless:` {applies_to}`stack: ga 9.4` Use the **Panels visibility** button group to show or hide areas of **Discover** independently. The button group stays in a fixed position regardless of which sections are shown or hidden.
-      * {icon}`transitionTopOut` / {icon}`transitionTopIn` to show or hide the chart
+      * {icon}`transition_top_out` / {icon}`transition_top_in` to show or hide the chart
       * {icon}`transition_bottom_out` / {icon}`transition_bottom_in` to show or hide the results table
-      * {icon}`transitionLeftOut` / {icon}`transitionLeftIn` to show or hide the fields list
+      * {icon}`transition_left_out` / {icon}`transition_left_in` to show or hide the fields list
   * {applies_to}`stack: ga 9.0-9.3` Use the available collapse and expand button in the corresponding area to show or hide the chart and the fields list.
 * Adjust the width and height of each area by dragging their border to the size you want. The size of each area is saved in your browser for the next time you open **Discover**.
 
diff --git a/explore-analyze/discover/try-esql.md b/explore-analyze/discover/try-esql.md
@@ -442,8 +442,8 @@ The grouping field is preselected from your `STATS BY` clause. Open the **Group
 
 Certain interactions with the results table of your {{esql}} query in Discover apply additional filters to your query. When hovering over a value cell, contextual options appear: 
 
-- Selecting {icon}`plus_in_circle` **Filter for this...** adds or completes the `WHERE` command of the query to specifically look for the selected value. For example, `WHERE host.keyword == "www.elastic.co"`.
-- Selecting {icon}`minus_in_circle` **Filter out this...** adds or completes the `WHERE` command of the query to specifically exclude the selected value. For example, `WHERE host.keyword != "www.elastic.co"`.
+- Selecting {icon}`plus_circle` **Filter for this...** adds or completes the `WHERE` command of the query to specifically look for the selected value. For example, `WHERE host.keyword == "www.elastic.co"`.
+- Selecting {icon}`minus_circle` **Filter out this...** adds or completes the `WHERE` command of the query to specifically exclude the selected value. For example, `WHERE host.keyword != "www.elastic.co"`.
 
 :::{note}
 :applies_to: { serverless:, stack: ga 9.3+ }
diff --git a/explore-analyze/kibana-data-exploration-learning-tutorial.md b/explore-analyze/kibana-data-exploration-learning-tutorial.md
@@ -74,7 +74,7 @@ Discover supports two exploration modes. This tutorial uses **{{esql}}** (Elasti
 
 :::::{step} Run your first query
 
-Enter the following query, then select {icon}`playFilled` **Run** or **Search**. If you choose to type your own query, the editor helps you with relevant autocomplete suggestions for commands, fields, and values.
+Enter the following query, then select {icon}`play_filled` **Run** or **Search**. If you choose to type your own query, the editor helps you with relevant autocomplete suggestions for commands, fields, and values.
 
 ```esql
 FROM kibana_sample_data_logs <1>
@@ -227,7 +227,7 @@ A dashboard often starts with a row of metrics for key numbers at a glance. Usin
 4. From the **Available fields** list, drag **host.keyword** to the **Breakdown** area. Lens draws one line per host, each in a different color, so you can compare traffic patterns across servers.
 
 5. Add a reference line to give the chart visual context:
-   1. Select the **Add layer** icon {icon}`plus_in_square`, then select **Reference lines**.
+   1. Select the **Add layer** icon {icon}`plus_square`, then select **Reference lines**.
    2. Select the reference line value and enter `80`. This marks a "high traffic" threshold on the chart.
    3. Set the color to red, then under **Text decoration**, enter a label such as `High traffic` and select **Fill below** to shade the area under the line.
 
diff --git a/explore-analyze/query-filter/languages/esql-kibana.md b/explore-analyze/query-filter/languages/esql-kibana.md
@@ -69,7 +69,7 @@ The {{esql}} editor includes several built-in tools to help you write queries ef
 
 #### Query formatting [_make_your_query_readable]
 
-For readability, you can put each processing command on a new line and add indentation. Use the {icon}`pipeBreaks` **Prettify query** button from the query editor's footer to format your query automatically. You can also adjust the editor's height by dragging its bottom border.
+For readability, you can put each processing command on a new line and add indentation. Use the {icon}`line_break` **Prettify query** button from the query editor's footer to format your query automatically. You can also adjust the editor's height by dragging its bottom border.
 
 ![Automatic line breaks and indentation for ES|QL queries](https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltb7c28c7b10f58b68/69ebb4e4a7cffb580c9a34c5/prettify-esql.gif "=75%")
 
diff --git a/explore-analyze/visualize/charts/area-charts.md b/explore-analyze/visualize/charts/area-charts.md
@@ -48,7 +48,7 @@ Using the **Visualization type** dropdown, select **Area**.
 
 Optionally:
    - Add more numeric fields to create additional series, or drag a categorical field to the **Breakdown** settings to segment your data by a categorical field, and create multiple areas within the same chart.
-   - You can click the **Add layer** icon {icon}`plus_in_square` to integrate additional visualizations, [annotations](../lens.md#add-annotations), or a [reference line](../lens.md#add-reference-lines).
+   - You can click the **Add layer** icon {icon}`plus_square` to integrate additional visualizations, [annotations](../lens.md#add-annotations), or a [reference line](../lens.md#add-reference-lines).
 
 The chart preview updates to show filled areas plotted over time. Each area represents a series, with the filled region emphasizing the volume of data.
 :::::
diff --git a/explore-analyze/visualize/charts/line-charts.md b/explore-analyze/visualize/charts/line-charts.md
@@ -48,7 +48,7 @@ Make sure that the visualization type is set to **Line**.
 
 Optionally:
    - Add more numeric fields to create additional series, or drag a categorical field to **Break down by** to split the series.
-   - You can click the **Add layer** icon {icon}`plus_in_square` to integrate additional visualizations, [annotations](../lens.md#add-annotations), or a [reference line](../lens.md#add-reference-lines).
+   - You can click the **Add layer** icon {icon}`plus_square` to integrate additional visualizations, [annotations](../lens.md#add-annotations), or a [reference line](../lens.md#add-reference-lines).
 
 The chart preview updates to show one or more lines plotted over time. Each line represents a series, and data points are connected to show trends.
 :::::
diff --git a/explore-analyze/visualize/lens.md b/explore-analyze/visualize/lens.md
@@ -87,7 +87,7 @@ In the Lens editor, you can customize the appearance of your visualization by cl
 
 ::::{step} (Optional) Add layers
 
-You can add multiple layers to a visualization, such as **Visualization**, [**Annotations**](#add-annotations), or [**Reference lines**](#add-reference-lines). Click the **Add layer** icon {icon}`plus_in_square` , then choose the layer type and select the {{data-source}}. 
+You can add multiple layers to a visualization, such as **Visualization**, [**Annotations**](#add-annotations), or [**Reference lines**](#add-reference-lines). Click the **Add layer** icon {icon}`plus_square` , then choose the layer type and select the {{data-source}}. 
 To duplicate or delete a layer, click ![Actions menu to duplicate Lens visualization layers](/explore-analyze/images/kibana-vertical-actions-menu.png "") on the layer tab.
 
 ::::
@@ -293,7 +293,7 @@ stack: preview
 ```
 
 Annotations allow you to call out specific points in your visualizations that are important, such as significant changes in the data. You can add annotations for any {{data-source}}, add text and icons, specify the line format and color, and more.
-Click the **Add layer** icon {icon}`plus_in_square` , select **Annotations** and select the annotation method you want to use:
+Click the **Add layer** icon {icon}`plus_square` , select **Annotations** and select the annotation method you want to use:
 
 :::{dropdown} New annotation
 1. Select the {{data-source}} for the annotation.
diff --git a/solutions/elasticsearch-solution-project/playground.md b/solutions/elasticsearch-solution-project/playground.md
@@ -243,7 +243,7 @@ Click **⟳ Clear chat** to clear chat history and start a new conversation.
 
 ### View and download Python code [playground-getting-started-view-code]
 
-Select {icon}`export` to view the Python code that powers the chat interface. You can integrate it into your own application, modifying as needed. We currently support two implementation options:
+Select {icon}`external` to view the Python code that powers the chat interface. You can integrate it into your own application, modifying as needed. We currently support two implementation options:
 
 * {{es}} Python Client + LLM provider
 * LangChain + LLM provider
diff --git a/solutions/observability/incident-management/view-alerts.md b/solutions/observability/incident-management/view-alerts.md
@@ -117,7 +117,7 @@ If an alert is active or flapping, you can mute it to temporarily suppress futur
 You can mute individual alerts or multiple ones:
 
 - Mute individual alerts: Find the **Alerts** management page using the navigation menu or the [global search field](/explore-analyze/find-and-organize/find-apps-and-objects.md), open the action menu ({icon}`boxes_vertical`) for the appropriate alert, then select **Mute**.
-- Bulk-mute alerts: Select one or more alerts from the **Alerts** management page, click **Selected _x_ alerts** at the upper-left above the table, then select **Mute selected**. Select the **Unmute selected** option to unmute alerts. Muted alerts display the icon {icon}`bellSlash` in the Alerts table.
+- Bulk-mute alerts: Select one or more alerts from the **Alerts** management page, click **Selected _x_ alerts** at the upper-left above the table, then select **Mute selected**. Select the **Unmute selected** option to unmute alerts. Muted alerts display the icon {icon}`bell_slash` in the Alerts table.
 :::
 
 :::{applies-item} stack: ga 9.0-9.2
diff --git a/solutions/observability/streams/management/extract.md b/solutions/observability/streams/management/extract.md
@@ -124,7 +124,7 @@ Streams processors support the following comparators:
 - not exists
 :::
 
-After creating a condition, add a processor or another condition to it by selecting the {icon}`plus_in_circle`.
+After creating a condition, add a processor or another condition to it by selecting the {icon}`plus_circle`.
 
 ### Editing modes [streams-editing-modes]
 
diff --git a/solutions/observability/streams/management/partitioning.md b/solutions/observability/streams/management/partitioning.md
@@ -61,8 +61,8 @@ To manually configure when to send data to child streams:
 
 1. Select **Create partition manually**.
 1. From the **Data preview**, filter data based on fields or attributes by hovering over the field and selecting:
-  - {icon}`plus_in_circle` to add routing conditions that equal the field.
-  - {icon}`minus_in_circle`to add routing conditions that do not equal the field.
+  - {icon}`plus_circle` to add routing conditions that equal the field.
+  - {icon}`minus_circle`to add routing conditions that do not equal the field.
 1. Under **Stream name**, give your stream a name based on the condition.
 1. Select **Save** to create the child stream.
 
diff --git a/solutions/security/detect-and-alert/create-manage-value-lists.md b/solutions/security/detect-and-alert/create-manage-value-lists.md
@@ -119,7 +119,7 @@ You can also edit value lists while creating and managing exceptions that use va
 2. Click **Manage value lists**. The **Manage value lists** window opens.
 3. From the **Value lists** table, you can:
 
-    - Click the **Export value list** icon {icon}`export` to export the value list.
+    - Click the **Export value list** icon {icon}`external` to export the value list.
     - Click the **Remove value list** icon {icon}`trash` to delete the value list.
 
 ## Configure upload limits [adv-list-settings]
diff --git a/solutions/security/detect-and-alert/monitor-rule-executions.md b/solutions/security/detect-and-alert/monitor-rule-executions.md
@@ -125,7 +125,7 @@ Use these controls to filter what's included in the table:
 * The date and time picker sets the time range of rule executions included in the table. This is separate from the global date and time picker at the top of the rule details page.
 * The **Source event time range** button toggles the display of data pertaining to the time range of manual runs.
 * The **Show metrics columns** toggle includes more or less data in the table, pertaining to the timing of each rule execution.
-* The **Actions** column allows you to show alerts generated from a given rule execution. Select the filter icon {icon}`filterInCircle` to create a global search filter based on the rule execution's ID value. This replaces any previously applied filters, changes the global date and time range to 24 hours before and after the rule execution, and displays a confirmation notification. You can revert this action by selecting **Restore previous filters** in the notification.
+* The **Actions** column allows you to show alerts generated from a given rule execution. Select the filter icon {icon}`filter_in_circle` to create a global search filter based on the rule execution's ID value. This replaces any previously applied filters, changes the global date and time range to 24 hours before and after the rule execution, and displays a confirmation notification. You can revert this action by selecting **Restore previous filters** in the notification.
 
 :::
 
diff --git a/solutions/security/detect-and-alert/view-detection-alert-details.md b/solutions/security/detect-and-alert/view-detection-alert-details.md
@@ -37,7 +37,7 @@ If you've enabled grouping on the Alerts page, expand a group and select an indi
 | Icon | Name | Action |
 |------|------|--------|
 | {icon}`arrow_down` | Expand details | Open the [left panel](#left-panel) for deeper investigation of each section. |
-| {icon}`clockCounter` | History | View up to 10 recently visited flyouts (alerts, users, etc.) and click to navigate back. |
+| {icon}`clock_counter` | History | View up to 10 recently visited flyouts (alerts, users, etc.) and click to navigate back. |
 | {icon}`new_chat` | Chat | Open [AI Assistant](/solutions/security/ai/ai-assistant.md). |
 | {icon}`share` | Share alert | Get a shareable URL. Don't copy from the browser address bar. It might include filters or relative time ranges that produce inconsistent results. |
 | {icon}`gear` | Flyout settings | Choose **Overlay** (flyout over table) or **Push** (flyout beside table). You can resize panels and click **Reset size** to restore defaults. |
@@ -54,8 +54,8 @@ The header displays key alert information:
 * **Rule**: The rule that generated the alert
 * **Status**: Current alert status and creation time
 * **Severity and risk score**: Inherited from the rule
-* **Assignees**: Users assigned to the alert (click the **Add** icon {icon}`plus_in_circle` to add more)
-* **Notes**: Attached notes (click the **Add** icon {icon}`plus_in_circle` to add a note)
+* **Assignees**: Users assigned to the alert (click the **Add** icon {icon}`plus_circle` to add more)
+* **Notes**: Attached notes (click the **Add** icon {icon}`plus_circle` to add a note)
 
 #### View formats
 
diff --git a/solutions/security/detect-and-alert/write-investigation-guides.md b/solutions/security/detect-and-alert/write-investigation-guides.md
@@ -102,7 +102,7 @@ Click a query button to load the query in Timeline automatically.
     :screenshot:
     :::
 
-2. Place the cursor where you want the button to appear, then select the investigate icon {icon}`timelineWithArrow` in the toolbar. The **Add investigation query** builder form appears.
+2. Place the cursor where you want the button to appear, then select the investigate icon {icon}`timeline_with_arrow` in the toolbar. The **Add investigation query** builder form appears.
 
     :::{image} /solutions/images/security-ig-investigation-query-builder.png
     :alt: Add investigation guide UI
@@ -145,7 +145,7 @@ The following syntax defines a query button in an investigation guide.
 | `relativeFrom`, `relativeTo` | (Optional) The start and end of a relative time range for the query. Times are relative to the alert's creation time, represented as `now` in [date math](elasticsearch://reference/elasticsearch/rest-apis/common-options.md#date-math) format. For example, `"relativeFrom": "now-15m", "relativeTo": "now"`. |
 
 ::::{note}
-Some characters must be escaped with a backslash, such as `\"` for a quotation mark and `\\` for a literal backslash. Divide Windows paths with double backslashes (for example, `C:\\Windows\\explorer.exe`), and paths that already include double backslashes might require four backslashes for each divider. A clickable error icon {icon}`errorFilled` displays below the Markdown editor if there are any syntax errors.
+Some characters must be escaped with a backslash, such as `\"` for a quotation mark and `\\` for a literal backslash. Divide Windows paths with double backslashes (for example, `C:\\Windows\\explorer.exe`), and paths that already include double backslashes might require four backslashes for each divider. A clickable error icon {icon}`error_fill` displays below the Markdown editor if there are any syntax errors.
 ::::
 
 ### Example [ig-timeline-example]
