NSW Email Design System

1.78.5

Previous: Logo
Next: Spacer

Social icons link to official social media channels. They give users a quick way to follow, share or engage with your content through familiar platforms.

When to use

Use social icons to:

provide direct access to trusted, official social media channels
encourage people to follow or engage beyond the email
support brand recognition with consistent, recognisable icons

Design guidance

Place icons in predictable locations, such as the header or footer, to make them easy to find.
Avoid overusing social icons. They should support – not distract from – the primary call to action.
Only include the most relevant platforms to avoid visual clutter.

Accessibility

Provide descriptive alt text for accessibility. Example: alt="Follow NSW Health on LinkedIn"
Ensure good colour contrast between the icon and background.
Use icons that are at least 24px to ensure they're easy to tap on mobile devices.

Variations

Use the following options to ensure icons meet branding, layout and accessibility needs.

Color

Choose icons that use colours from the NSW Government digital colour palette.
Place lighter-coloured icons on a dark background to maintain readability.
Ensure all colours meet contrast requirements for accessibility.

Gap

Use wider spacing to improve clarity in dense layouts.
Use tighter spacing to reduce visual weight where space is limited.

Position

Centre icons below a content block.
Align icons left or right to follow layout or text alignment.

Size

Use larger icons in mobile-first or visually led designs.
Use smaller icons for compact email templates or space-limited layouts.

Icon type

Use circular, square or outlined icons based on brand or campaign style.
Ensure each icon is recognisable and maintains contrast.

Prop	Type	Default	Description
`align`	`string`	`'center'`	Alignment of the social icons within the container. Options: left, center, right.
`size`	`number`	`24`	Pixel size of each icon (applies to both width and height).
`color`	`string`	`'nsw-grey-600'`	Color applied to the icons. Must use NSW Government digital palette values for consistency and accessibility.
`gap`	`number`	`8`	Gap in pixels between each icon. Adjusts spacing in the row.
`type`	`string`	`'circle'`	The shape or style of the social icons. Options: circle, circle-outlined, square, square-outlined, std.
`mobileClass`	`string`	`''`	Additional utility class applied for mobile-specific styling.
`socials`	`object`	`props.page.social.urls`	Key/value object mapping platform name to its URL (e.g., { Facebook: "...", LinkedIn: "..." }).
`class`	`string`	`'rounded hover:bg-primary-800/10'`	Additional class string for styling the anchor tag wrapping each icon.
`reverse`	`boolean`	`false`	If true, reverses the order of the icons in the row.

Social icons link to official social media channels. They give users a quick way to follow, share or engage with your content through familiar platforms.

When to use

Use social icons to:

provide direct access to trusted, official social media channels
encourage people to follow or engage beyond the email
support brand recognition with consistent, recognisable icons

Design guidance

Place icons in predictable locations, such as the header or footer, to make them easy to find.
Avoid overusing social icons. They should support – not distract from – the primary call to action.
Only include the most relevant platforms to avoid visual clutter.

Accessibility

Provide descriptive alt text for accessibility. Example: alt="Follow NSW Health on LinkedIn"
Ensure good colour contrast between the icon and background.
Use icons that are at least 24px to ensure they're easy to tap on mobile devices.

Variations

Use the following options to ensure icons meet branding, layout and accessibility needs.

Color

Choose icons that use colours from the NSW Government digital colour palette.
Place lighter-coloured icons on a dark background to maintain readability.
Ensure all colours meet contrast requirements for accessibility.

Gap

Use wider spacing to improve clarity in dense layouts.
Use tighter spacing to reduce visual weight where space is limited.

Position

Centre icons below a content block.
Align icons left or right to follow layout or text alignment.

Size

Use larger icons in mobile-first or visually led designs.
Use smaller icons for compact email templates or space-limited layouts.

Icon type

Use circular, square or outlined icons based on brand or campaign style.
Ensure each icon is recognisable and maintains contrast.

Prop	Type	Default	Description
`align`	`string`	`'center'`	Alignment of the social icons within the container. Options: left, center, right.
`size`	`number`	`24`	Pixel size of each icon (applies to both width and height).
`color`	`string`	`'nsw-grey-600'`	Color applied to the icons. Must use NSW Government digital palette values for consistency and accessibility.
`gap`	`number`	`8`	Gap in pixels between each icon. Adjusts spacing in the row.
`type`	`string`	`'circle'`	The shape or style of the social icons. Options: circle, circle-outlined, square, square-outlined, std.
`mobileClass`	`string`	`''`	Additional utility class applied for mobile-specific styling.
`socials`	`object`	`props.page.social.urls`	Key/value object mapping platform name to its URL (e.g., { Facebook: "...", LinkedIn: "..." }).
`class`	`string`	`'rounded hover:bg-primary-800/10'`	Additional class string for styling the anchor tag wrapping each icon.
`reverse`	`boolean`	`false`	If true, reverses the order of the icons in the row.

Command Palette

Command Palette

Social

When to use

Design guidance

Accessibility

Variations

Color

Gap

Position

Size

Icon type

Social

When to use

Design guidance

Accessibility

Variations

Color

Gap

Position

Size

Icon type