Social
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.
Colour
- 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' | Colour 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. |