Skip to content



SocialIcons is used to render one or more social media icons, e.g., in a footer or on a profile page. You can use EmailIcon, GitHubIcon and TwitterIcon or create your own social media icon with Icon.


This example renders 3 social icons with default alignment (start):

You can align center:

And align end (right):

SocialIcons behaves like fonts and renders with the parent element's color:

Another example with 2 social icons:

And this is an example with one social icon:

System props

SocialIcons supports space props and color props from Styled System.

Component props

valuesArray of valueSee below.
alignstart, center or endcenterAlignment of social icons (responsive).


idStringKey for the underlying list in React.
iconNodeSocial icon (composition pattern).


SocialIcons does not support variants.

Visual regression testing

The following URLs can be used for visual regression testing:

Edit this page on GitHub
1 contributormaiertech
Last edited by maiertech on July 6, 2020