Social media icon - CSS Component ​

The SocialMediaIcon component can be used imported from:

Playground ​

Construction ​

The CSS component uses a <i> tag. Using the z-social-media-icon HTML custom attribute will render the icon CSS component.

z-social-media-icon ​

The z-social-media-icon is the main HTML custom attribute used to render the social media icon CSS component.

Also the z-social-media-icon attribute has two optional modifiers, that can be applied in order using colon (:) as the separator.

The pattern would be: <?style><?:size>

style ​

You can force a monochrome version of the icon using the mono value.

size ​

The z-social-media-icon parameter is used to define the size of the icon. Possible values are: l, m, s, xs.

brand ​

The brand parameter is used to define the social media icon. Check the social media icon list here.

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​