diff --git a/apps/website/pages/foundations/iconography.tsx b/apps/website/pages/foundations/iconography.tsx
new file mode 100644
index 000000000..d570dae4c
--- /dev/null
+++ b/apps/website/pages/foundations/iconography.tsx
@@ -0,0 +1,13 @@
+import Head from "next/head";
+import IconographyPage from "screens/foundations/iconography/IconographyPage";
+
+const Iconography = () => (
+ <>
+
+ Iconography — Halstack Design System
+
+
+
+);
+
+export default Iconography;
diff --git a/apps/website/screens/common/pagesList.ts b/apps/website/screens/common/pagesList.ts
index ea34e4313..bacd551e0 100644
--- a/apps/website/screens/common/pagesList.ts
+++ b/apps/website/screens/common/pagesList.ts
@@ -41,7 +41,10 @@ const principlesLinks: LinkDetails[] = [
{ label: "Typography", path: "/principles/typography" },
];
-const foundationsLinks: LinkDetails[] = [{ label: "Color", path: "/foundations/color" }];
+const foundationsLinks: LinkDetails[] = [
+ { label: "Color", path: "/foundations/color" },
+ { label: "Iconography", path: "/foundations/iconography" },
+];
const componentsLinks = componentsList as LinkDetails[];
diff --git a/apps/website/screens/foundations/iconography/IconographyPage.tsx b/apps/website/screens/foundations/iconography/IconographyPage.tsx
new file mode 100644
index 000000000..b606b3a20
--- /dev/null
+++ b/apps/website/screens/foundations/iconography/IconographyPage.tsx
@@ -0,0 +1,578 @@
+import { DxcHeading, DxcParagraph, DxcFlex, DxcBulletedList, DxcGrid, DxcLink } from "@dxc-technology/halstack-react";
+import PageHeading from "@/common/PageHeading";
+import DocFooter from "@/common/DocFooter";
+import QuickNavContainer from "@/common/QuickNavContainer";
+import QuickNavContainerLayout from "@/common/QuickNavContainerLayout";
+import Figure from "@/common/Figure";
+import Image from "@/common/Image";
+import iconsHalstack from "./images/icons_halstack.jpg";
+import materialIcons from "./images/material_icons.png";
+import customIncorrect from "./images/custom_incorrect.jpg";
+import customCorrect from "./images/custom_correct.jpg";
+import iconsSizes from "./images/icons_sizes.jpg";
+import accessibilityColor from "./images/accessibility_color.jpg";
+import iconsContext from "./images/icons_context.jpg";
+import iconsGrid from "./images/icons_grid.jpg";
+import Link from "next/link";
+import Code from "@/common/Code";
+
+const sections = [
+ {
+ title: "Introduction",
+ content: (
+
+ Icons are visual elements that can serve different purposes depending on their context. In Halstack, icons are
+ used not only to represent ideas, objects, or actions, but also to support the user's journey
+ through the interface. They help guide attention, reinforce meaning, and visually enhance
+ actions or sections within an application.
+
+ ),
+ subSections: [
+ {
+ title: "Material Icons",
+ content: (
+ <>
+
+ At Halstack, we've chosen to adopt the Material Icons library, specifically the outline{" "}
+ and filled variants, as our standard icon set. While we did not create these icons
+ ourselves, there are strong reasons behind this decision that align with the goals of our design system:
+
+
+
+ Consistency: Material Icons offer a comprehensive, visually coherent set of icons that
+ cover a wide range of common actions, objects, and concepts. Using a unified library helps us maintain
+ consistency across all Halstack-based products.
+
+
+ Scalability: with hundreds of pre-designed icons available and frequent updates,
+ Material Icons scale easily with product needs: whether we're designing simple interfaces or more
+ complex workflows.
+
+
+ Accessibility: Material Icons are built with accessibility in mind, supporting clear
+ recognition and compatibility with assistive technologies when used correctly.
+
+
+ Design and engineering efficiency: leveraging a widely adopted icon set reduces the
+ effort needed to create and maintain custom icons. This speeds up both design and development workflows,
+ allowing teams to focus on building better user experiences.
+
+
+ Cross-platform support: Material Icons are optimized for use across web, Android, and
+ iOS platforms, helping us build consistent and adaptable experiences regardless of the target platform.
+
+
+
+ By adopting Material Icons, we ensure that our iconography remains modern, flexible, and easy to work
+ with, without sacrificing quality or usability.
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Icon Library overview",
+ content: (
+ <>
+
+ Material Icons are grouped into functional categories that help organize their purpose and
+ usage. Within Halstack, we follow this categorization to help designers and developers quickly find the right
+ icon for each context.
+
+ The main categories include:
+
+
+ Navigation
+
+ Icons that help users move through the interface (e.g., menu, arrow_back,{" "}
+ close, more_vert).
+
+
+
+ Actions
+
+ Icons that represent specific user actions (e.g., edit, delete,{" "}
+ download, add, check_circle).
+
+
+
+ Feedback / Status
+
+ Icons that indicate the state of a system or user feedback (e.g., error, warning
+ , info, check_circle_outline).
+
+
+
+ Media and Files
+
+ Icons representing media types or file interactions (e.g., image, video_library,{" "}
+ attach_file).
+
+
+
+ Communication
+
+ Icons used in messaging, comments, or user contact interfaces (e.g., chat, email
+ , notifications).
+
+
+
+ Content and Layout
+
+ Icons related to formatting, content manipulation, or UI controls (e.g., filter_list,{" "}
+ sort, grid_view, view_list).
+
+
+
+ Device and System
+
+ Icons for hardware or system-level actions (e.g., battery_full, wifi,{" "}
+ settings).
+
+
+
+
+ In Halstack products, the outline style is the default and most widely used for icons. This
+ choice reflects our preference for clean, lightweight visual elements that align with our UI aesthetics.
+
+ Among all available categories, the following are the most commonly used:
+
+
+ Navigation
+ Used extensively across headers, sidebars, and in-page navigation elements.
+
+
+ Actions
+ Found in interactive components like buttons, dropdowns, and toolbars.
+
+
+ Feedback / Status
+
+ Integrated into form validation, alerts, snackbars, and system messages to communicate state clearly.
+
+
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Available styles",
+ content: (
+ <>
+
+
+
+
+ Halstack supports two visual styles of Material Icons: Outline and Filled.
+ Both styles are available through the Material Icons library and can be used across the design system
+ depending on the context and visual intent. By offering both outline and filled styles, Halstack ensures
+ visual flexibility while maintaining system consistency. Designers can use tone and emphasis intentionally,
+ matching icon style to context without compromising clarity or usability.
+
+
+ ),
+ subSections: [
+ {
+ title: "Outline (default style)",
+ content: (
+ <>
+
+ The outline icons are characterized by their lightweight, hollow appearance with thin
+ strokes and open shapes. They offer a modern, minimalist aesthetic that aligns well with Halstack's clean
+ UI philosophy.
+
+
+ This variant is our default style because it:
+
+
+
+ Integrates seamlessly into interfaces without overwhelming other UI elements
+
+ Maintains legibility and clarity even at small sizes.
+
+ Provides a subtle visual cue without drawing excessive attention.
+
+
+ Harmonizes with our typography, spacing, and component structure, particularly in low-density layouts.
+
+
+
+ They are ideal for secondary actions, interface navigation structure (such as back arrows or menus) and
+ supporting text-based content without dominating the visual hierarchy.
+
+
+ ),
+ },
+ {
+ title: "Filled",
+ content: (
+ <>
+
+ Filled icons feature solid shapes with strong visual presence. This style creates a sense
+ of emphasis and weight, making it suitable for highlighting actions or reinforcing key statuses in the UI.
+
+
+ While not the default in Halstack, filled icons are available for intentional use cases{" "}
+ where stronger visual contrast is needed.
+
+ Filled icons are effective when:
+
+
+ Used in active states, such as selected tabs or toggled buttons.
+
+
+ Reinforcing status and feedback, especially in system messages (e.g., error, success,
+ warning).
+
+
+ Enhancing visibility in dense interfaces or darker backgrounds.
+
+
+
+ However, because of their bolder visual weight, filled icons should be used carefully to avoid visual
+ clutter or drawing attention away from primary content.
+
+
+ ),
+ },
+ ],
+ },
+ {
+ title: "Custom icons",
+ content: (
+ <>
+
+ While Material Icons offer a wide range of visual representations, we acknowledge that there may be rare cases
+ where a concept, function, or domain-specific idea is not adequately covered.
+
+
+ In such cases, teams may need to create a custom icon. However, to ensure consistency and
+ maintain the integrity of the Halstack visual language, the following guidelines apply:
+
+
+
+ Responsibility
+
+ The responsibility for designing a custom icon lies with the team that requires it. This
+ includes:
+
+
+ Defining the icon's intended meaning and use.
+ Designing or sourcing the visual asset.
+
+ Testing the icon within its intended context to ensure clarity and accessibility.
+
+
+
+
+ Style consistency
+
+ It is highly encouraged that any custom icon:{" "}
+
+
+
+ Follows the same visual style as the Material Icons being used in Halstack (either{" "}
+ outline or filled, depending on context).
+
+
+ Matches the same stroke weight, corner radius, and{" "}
+ overall proportions.
+
+ Is optimized for the same grid size (typically 24×24 pixels).
+
+
+ Designing with these parameters in mind ensures visual cohesion with the rest of the interface.
+
+
+
+
+
+
+
+ In the first figure, we can see how the custom icon is{" "}
+ colorful, highly detailed and visually complex. This doesn't match the{" "}
+ monochromatic, simplified geometry of the Material Icons, as you can see on the same
+ example. Therefore, this custom icon introduces a visual “noise” that could potentially break the
+ consistency of the interface. While it may be visually appealing on its own, this custom icon feels out of
+ place when using it alongside the rest of the system, and should always be avoided.
+
+
+ In contrast, the custom icon in the Figure 2 has been designed to{" "}
+ mimic the look and feel of the Material icons, as it uses the{" "}
+ same weight, proportions and stroke style. The level of detail is consistent and
+ balanced, and it integrates naturally into the UI, appearing as if it were part of the original set. This
+ is the kind of alignment we aim for when extending the icon set.
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Accessibility considerations",
+ content: (
+ <>
+
+ Icons play an important role in user interaction and communication. To ensure that all users (including those
+ using assistive technologies) can fully understand and navigate Halstack-based interfaces, the following
+ accessibility best practices should be followed when using icons.
+
+
+
+ Provide meaning with labels
+
+
+ Informative icons (icons that convey meaning or trigger actions, like a "delete" or
+ "download" button) must be accompanied by accessible labels.
+
+
+ Use aria-label, aria-labelledby, or an associated label element
+ so screen readers can announce the icon's purpose.
+
+
+
+
+ Hide decorative icons from Assistive Tech
+
+
+ Decorative icons (e.g., a chevron indicating expandable content, or a checkmark in a
+ success message) should not be read by screen readers.
+
+
+ Use aria-hidden="true" or mark them with role="presentation".
+
+
+
+
+ Maintain color contrast
+
+
+
+
+ Icons must have sufficient contrast against their background, especially when used
+ as status indicators (error, success, info).{" "}
+
+
+ Follow WCAG AA or AAA contrast ratios (minimum 3:1 for UI components and 4.5:1 for icons conveying
+ meaning).
+
+
+
+
+
+
+
+
+
+
+
+ Don't rely on icons alone to convey meaning
+
+
+
+
+ Always pair critical icons with text or tooltips to reinforce meaning, especially
+ in form validation, alerts, and interactive components.
+
+
+ This ensures understanding for users with cognitive disabilities, color blindness, or screen
+ reader usage.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Use consistent size and hit areas
+
+
+ Icons inside clickable areas (e.g., buttons or toggles) must have a minimum{" "}
+ touch target size of 44×44px to support users with motor impairments.
+
+
+ Ensure icon-only buttons are large enough and padded properly, not just visually aligned.{" "}
+
+
+
+
+
+ ),
+ },
+ {
+ title: "Implementation notes",
+ content: (
+ <>
+
+ Using icons in our components is simple—just set the relevant prop to a Material Symbol name. To display the
+ filled version, prefix the icon name with filled_.
+
+
+ If you need to use icons outside of our components, make sure the{" "}
+ font family is set to Material Symbols Outlined. This font is automatically
+ loaded when using our components; otherwise, it must be manually imported or installed.
+
+
+ To toggle between filled and unfilled icons, use the font-variation-settings CSS property:
+
+
+
+ 'FILL' 0 for outlined
+
+
+ 'FILL' 1 for filled
+
+
+
+ ),
+ },
+ {
+ title: "Best practices",
+ content: (
+ <>
+
+
+ Handling icons in frames
+
+ Material Icons are carefully designed and optimized within a 24×24 pixel frame. This
+ frame includes built-in padding and alignment rules that ensure the icon scales correctly and aligns
+ visually with text and components.
+
+
+ Avoid resizing or cropping the icon inside its original frame. Doing so may lead to
+ misalignment, uneven spacing, or loss of visual balance.
+
+
+
+
+
+
+ Keep the default icon names
+
+ Each Material Icon comes with a predefined name (e.g., edit, check_circle,{" "}
+ menu). We recommend keeping this name unchanged when importing or using the
+ icon in Figma or code, as it makes collaboration between design and development easier and it aligns with
+ the original documentation and Material search.
+
+
+
+ Use consistent sizes
+ Halstack commonly uses icons at these sizes:
+
+
+ 16x16 px - for compact UI elements (e.g., small buttons, tags)
+
+
+ 20x20 px - for medium-sized interactions
+
+
+ 24x24 px - default size, used in most components
+
+
+
+ These sizes map directly to our height tokens. Other sizes from the height scale are
+ acceptable, but use them only when necessary, such as in hero banners or extra-large
+ action areas.
+
+
+
+
+
+
+ Respect spacing and alignment
+
+ Icons should align vertically centered with adjacent text or content, maintain consistent padding when
+ placed inside components (e.g., icon + label buttons), and never be stretched or highly cropped. Follow
+ spacing tokens for margins and paddings. When paired with text, use a spacing token between the icon and
+ label to ensure visual balance.
+
+
+
+ Choose the right style: outline vs filled
+
+ Use outline icons as the default style in Halstack. They are clean,
+ lightweight, and match the overall tone of our UI. When needing additional visual emphasis, use filled
+ icons for active or selected states, important status indicators, or in places with low visual density or
+ dark background.
+
+
+ Avoid mixing outline and filled styles in the same context unless you are using them to clearly indicate{" "}
+ states or semantic differences.
+
+
+
+ Don't use icons without clear purpose
+
+ Every icon should add value and support comprehension. Avoid using icons just for decoration: if it
+ doesn't clarify, reinforce, or simplify an interaction, it's better to leave it out. Also avoid overly
+ abstract or ambiguous icons. Clarity is more important than cleverness.
+
+
+
+
+ ),
+ },
+ {
+ title: "Resources and references",
+ content: (
+ <>
+
+ For further reference and documentation about Material icons library, please visit the following resources:
+
+
+
+
+ Material Icons Library
+
+
+ Explore the complete set of Material Icons available for download or use via web fonts. You can search by
+ name, category, or keyword, and preview each icon in outline, filled, rounded, sharp, or two-tone styles
+
+
+
+ Icons in Material Design System
+
+
+ Learn about the design principles, structure, and usage guidelines behind Material Icons. This resource
+ explains how icons are built, how to choose between styles, and how to apply them consistently across
+ interfaces.
+
+
+
+ ),
+ },
+];
+
+export default function IconographyPage() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/website/screens/foundations/iconography/images/accessibility_color.jpg b/apps/website/screens/foundations/iconography/images/accessibility_color.jpg
new file mode 100644
index 000000000..5b6ba4515
Binary files /dev/null and b/apps/website/screens/foundations/iconography/images/accessibility_color.jpg differ
diff --git a/apps/website/screens/foundations/iconography/images/custom_correct.jpg b/apps/website/screens/foundations/iconography/images/custom_correct.jpg
new file mode 100644
index 000000000..2de2b2312
Binary files /dev/null and b/apps/website/screens/foundations/iconography/images/custom_correct.jpg differ
diff --git a/apps/website/screens/foundations/iconography/images/custom_incorrect.jpg b/apps/website/screens/foundations/iconography/images/custom_incorrect.jpg
new file mode 100644
index 000000000..a893684de
Binary files /dev/null and b/apps/website/screens/foundations/iconography/images/custom_incorrect.jpg differ
diff --git a/apps/website/screens/foundations/iconography/images/icons_context.jpg b/apps/website/screens/foundations/iconography/images/icons_context.jpg
new file mode 100644
index 000000000..524796507
Binary files /dev/null and b/apps/website/screens/foundations/iconography/images/icons_context.jpg differ
diff --git a/apps/website/screens/foundations/iconography/images/icons_grid.jpg b/apps/website/screens/foundations/iconography/images/icons_grid.jpg
new file mode 100644
index 000000000..371da3e6c
Binary files /dev/null and b/apps/website/screens/foundations/iconography/images/icons_grid.jpg differ
diff --git a/apps/website/screens/foundations/iconography/images/icons_halstack.jpg b/apps/website/screens/foundations/iconography/images/icons_halstack.jpg
new file mode 100644
index 000000000..59531e9ba
Binary files /dev/null and b/apps/website/screens/foundations/iconography/images/icons_halstack.jpg differ
diff --git a/apps/website/screens/foundations/iconography/images/icons_sizes.jpg b/apps/website/screens/foundations/iconography/images/icons_sizes.jpg
new file mode 100644
index 000000000..61d406779
Binary files /dev/null and b/apps/website/screens/foundations/iconography/images/icons_sizes.jpg differ
diff --git a/apps/website/screens/foundations/iconography/images/material_icons.png b/apps/website/screens/foundations/iconography/images/material_icons.png
new file mode 100644
index 000000000..f13fd4321
Binary files /dev/null and b/apps/website/screens/foundations/iconography/images/material_icons.png differ