Example

Social Icons

• Facebook
• Twitter
• Instagram
• Youtube
• Pinterest
• Blog

Testing

MobileTablet/Desktop

Copy Code

Best Practice

Using social media icons, the right way can help establish a strong social media presence with our customers. Follow these best practices before you use them:

• Don’t make any alterations. This includes rotating them and changing their colours or shape.
• Maintain uniform space and size of the icons.
• Give the social icons prominence but be careful not to overshadow your brand either. A recommended location for social icons is within Footer and Blog.
• The minimum touch target should be at least 44 x 44 dp (density independent pixels) with at least 8dp of space between them.

File Formats

• SVGs are smaller files that scale to any size without become pixelated. Use this format for icons and vector files that are located above the fold.
• PNGs are used for lazy loading images below the fold which improves site performance.

Accessibility

Accessibility in design allows users of diverse abilities to navigate, understand, and use your UI.

Do

Include image descriptions so that screen readers can describe an image for an individual who is blind.

Use the approved PSD design kit to download the icons.

If assistive text is required, the containing element should contain both the icon and a span with hidden assistive text describing the icon using the slds-assistive-text class.

Don't

Use one or two words to describe an icon.

Save the icon in the design kit under a different name.

Scale icons to fit your designs. This can cause the proportions to be off-balance and can create unintended hierarchy within the experience.