Social Media Links
Last updated: September 11, 2015 at 22:48 pm

The proper use, positioning and sizes of social icons or links to popular social media sites.


Visual example of the element:


What problem does this element or pattern solve?
At the time of this writing, virtually every website includes at least a few external links to social media and other external sites. Because these external services have their own trademarked icons and badges, care should be taken not to violate those trademarks.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:


Detailed specifications

Specifications To Consider

  • Show clear examples of all approved visual treatments for social media links.
  • Provide links to repositories where social media icons or other brand assets are stored. Be sure to state that for consistency and the integrity of both your brands, it is unacceptable to go to the web and simply right-click any social media example and place it on your site.
  • Give examples of the various positions on a page where social media links can be placed.
  • If social media icons can be placed into context on the page, be sure to show an example of its visually stying and any necessary placement rules.
  • Be sure to include the proper spelling and trademark designations for each Social Media source name for text treatments or alt-tags.


Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository


Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
share links, sharing, tweet, pin, rss, feeds, social media widget, twitter widget, facebook widget, social media icons, comments
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)



Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com


Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)


Comments & Questions