[EuiIcon] Add ruler icon

[andreadelrio]

Summary

• What: Adds a new ruler icon to EuiIcon.
• Why: We need this icon for Dashboards to allow users to choose between different widths available for controls. We currently use gear but want something more specific.

• How: Designed following the Creating icons guidelines:
  • 16×16 viewbox, 1px strokes, square endpoints, 1px rounded outer corners with square inner corners.
  • Drawn at 45° (like tag and pencil) with its corners on whole-pixel grid points, (1,11), (11,1), (15,5) and (5,15), and the 1px safe zone kept clear.
  • Four alternating tick marks; the whole glyph is a single flattened path (no overlapping shapes).
  • Optical sizing checked against the keyline template and against similar diagonal icons (tag, pencil, magnify, wrench, key, pin). Its ink stays within the keylines more closely than any of them, and its optical center is within 0.1px of the viewbox center.
  • Added synonyms metadata so it shows up in docs icon search.

Glyph	Docs

API Changes

component / parent	prop / child	change	description
EuiIcon	type	Added	New ruler glyph icon

Screenshots

{Screenshot of the icon at 16/24/32px, light and dark mode}

Impact Assessment

• 🔴 Breaking changes
• 💅 Visual changes
• 🧪 Test impact
• 🔧 Hard to integrate

Impact level: 🟢 None. This is an additive new icon.

Release Readiness

• Documentation: Appears automatically on the Icons docs page
• Figma: {link to Figma}
• Migration guide:
• Adoption plan (new features): {who will use this icon and where}

QA instructions for reviewer

• Open the Icons docs page (or the EuiIcon story in Storybook) and find ruler.
• Confirm the icon renders crisply at 16px and scales cleanly at larger sizes.
• Confirm it is visible in both light and dark mode.
• Confirm searching "measure" in the docs icon search finds it.

Checklist before marking Ready for Review

• Filled out all sections above
• QA: Tested light/dark modes, high contrast, mobile, Chrome/Safari/Edge/Firefox, keyboard-only, screen reader
• QA: Tested in CodeSandbox and Kibana
• QA: Tested docs changes
• Tests: Added/updated Jest snapshot ✅ and VRT (all-icons story baseline needs updating)
• Changelog: Added changelog entry
• Breaking changes: Added breaking change label (if applicable)

🤖 Generated with Claude Code

[Copilot]

🟢 Approval recommended

The source, generated asset, registration metadata, and snapshot are consistent and complete.

0 open findings

What changed in this PR

Adds the ruler glyph to EuiIcon, including search metadata and test coverage.

Changes:

• Adds the 16×16 ruler SVG and generated React asset.
• Registers ruler with measurement-related synonyms.
• Adds the rendered icon snapshot.

File	Description
packages/​eui/​src/​components/​icon/​svgs/​ruler.svg	Defines the source glyph.
packages/​eui/​src/​components/​icon/​assets/​ruler.tsx	Provides the generated React asset.
packages/​eui/​src/​components/​icon/​icon_map.ts	Registers the icon and search metadata.
packages/​eui/​src/​components/​icon/​__snapshots__/​icon.test.tsx.snap	Covers rendered output.

🧠 Review effort: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[elastic-vault-github-plugin-prod]

📷 1 visual difference(s) found

Look at the visual diff below. If everything is expected, run Approve visual changes to update baselines, re-run the job or make appropriate fixes.

See the visual regression testing wiki for more information.

Expand to review

euiicon (1 difference)

Story	Diff %	Before	After	Diff
all icons desktop	3.09%

[elastic-vault-github-plugin-prod]

📷 1 visual difference(s) found

Look at the visual diff below. If everything is expected, run Approve visual changes to update baselines, re-run the job or make appropriate fixes.

See the visual regression testing wiki for more information.

Expand to review

euiicon (1 difference)

Story	Diff %	Before	After	Diff
all icons desktop	3.09%

[bpotselastic]

The ruler icon looks good!

[elastic-vault-github-plugin-prod]

📷 1 visual difference(s) found

Look at the visual diff below. If everything is expected, run Approve visual changes to update baselines, re-run the job or make appropriate fixes.

See the visual regression testing wiki for more information.

Expand to review

euiicon (1 difference)

Story	Diff %	Before	After	Diff
all icons desktop	3.09%

[mgadewoll]

buildkite test this

[elastic-vault-github-plugin-prod]

📷 1 visual difference(s) found

Look at the visual diff below. If everything is expected, run Approve visual changes to update baselines, re-run the job or make appropriate fixes.

See the visual regression testing wiki for more information.

Expand to review

euiicon (1 difference)

Story	Diff %	Before	After	Diff
all icons desktop	3.09%

[mgadewoll]

🟢 LGTM

[infra-vault-gh-plugin-prod]

💚 Build Succeeded

• Buildkite Build
• Commit: 92e7266
• Documentation website
• Storybook
• ✅ Visual regression tests passed

History

• 💔 Build #5833 failed 32d6a2b
• 💔 Build #5832 failed 32d6a2b
• 💔 Build #5828 failed 6986148
• 💔 Build #5827 failed ee3df2c

[infra-vault-gh-plugin-prod]

💚 Build Succeeded

• Buildkite Build
• Commit: 92e7266

History

• 💚 Build #8237 succeeded 32d6a2b
• 💚 Build #8236 succeeded 32d6a2b
• 💚 Build #8233 succeeded 6986148
• 💚 Build #8232 succeeded ee3df2c