doc: Split icon page between Foundation and Utilities

[hannahiss]

Related issues

Closes #3792

Description

Split the page in two, and make room inside the component section for the incoming page "Icons" containing icon component:

• foundation/icons :
  • Add the first paragrpah "You may use two types of icons in your projects, like in this documentation..."
  • Rename "Use icons" to "Using icons"
  • Rename "CSS mask image SVG" to "CSS background image"
  • Rename "Functional icons" to "Status colors"
  • Exchange the order of the paragraphs "CSS background image" and "SVG external image"
  • Move color "accent" after the other status colors (it makes more sense)
  • Remove width, height and fill attributes and replace with utility sizing icon classes
  • Update all links inside page and to this page
• utilities/icons-sizing:
  • Add the phrase and link : "For global guidance and suggestions for using icons library with OUDS Web, please see the icons page in foundation documentation"

Checklists

• I have read the contributing guidelines
• My change follows the developer guide
• My change follows the page structure defined in [OUDS] Create a component page template for the doc #3045
• Title and DOM structure is correct
• Links have been updated (title change impacts links for example)

Progression (for Core Team only)

• Code review
• Commit on ouds/main following conventional commit

Live previews

• https://deploy-preview-3793--boosted.netlify.app/docs/foundation/icons
• https://deploy-preview-3793--boosted.netlify.app/docs/utilities/icons-sizing

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	1bb8931
🔍 Latest deploy log	https://app.netlify.com/projects/boosted/deploys/6aa41978efac270007ac4820
😎 Deploy Preview	https://deploy-preview-3793--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

🟡 Changes recommended

Several links and the legacy redirect are broken, and the documented attribute cleanup remains incomplete.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Splits icon guidance between Foundation and Utilities documentation.

Changes:

• Adds Foundation icon usage, accessibility, and color guidance.
• Retains icon sizing guidance under Utilities.
• Updates navigation and cross-references.

File summaries

File	Description
site/src/scss/_component-examples.scss	Makes the mask icon inherit sizing.
site/src/content/docs/utilities/text.mdx	Updates the sizing link.
site/src/content/docs/utilities/icons-sizing.mdx	Focuses the page on sizing utilities.
site/src/content/docs/utilities/color.mdx	Updates icon color links.
site/src/content/docs/getting-started/migration.mdx	Updates migration links.
site/src/content/docs/getting-started/migration-from-boosted.mdx	Updates migration links.
site/src/content/docs/foundation/typography.mdx	Updates sizing links.
site/src/content/docs/foundation/icons.mdx	Adds the Foundation icon guide.
site/src/content/docs/components/links.mdx	Updates accessibility guidance link.
site/src/content/docs/components/buttons.mdx	Updates accessibility guidance links.
site/src/content/callouts/info-icons-svg-sprite.md	Updates the icon usage link.
site/data/sidebar-utilities.yml	Adds Icons sizing navigation.
site/data/sidebar-foundation.yml	Adds Icons navigation.
site/data/sidebar-components.yml	Removes the old Icon entry.

Review details

Suppressed comments (3)

site/src/content/docs/utilities/icons-sizing.mdx:390

• After moving accessibility guidance to the Foundation page, the paragraph below still links to the now-absent local #icons-accessibility fragment. Point it to the new page so this guidance remains reachable.
  site/src/content/docs/utilities/icons-sizing.mdx:63
• The promised attribute cleanup is incomplete: examples throughout this sizing page (lines 129–525) still contain 45 width, height, and fill attribute sets, although their utility classes already provide those properties through %icon-size. This contradicts the PR description and leaves redundant attributes in copied examples; remove them across the remaining examples.
  site/src/content/docs/utilities/icons-sizing.mdx:530
• Use “experience any trouble” rather than “experimenting any trouble,” and capitalize the product name as “GitHub.”

• Files reviewed: 14/14 changed files
• Comments generated: 3
• Review effort level: Balanced

---

💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[louismaximepiton]

Few things, let me know if there is any issue in here