Skip to content

SocialIcons

Experimental

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.

Examples

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

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

Value

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

Variants

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