Skip to content 
Social media icon - Web Component
The SocialMediaIcon component can be used imported from:
Playground
Parameters
INFO
The web component version of the icon doesn't require to import th icons from @zurich/design-tokens.
The Web component uses the <z-social-media-icon> tag:
By default, all the parameters are optional or can be set in different, except for the ones marked as required
The parametrization of the component can be done with the following custom HTML params:
| Name | Type | Description | Slot | A11y |
|---|---|---|---|---|
brand | string | Brand of the social media icon | ||
config | string | Configuration of the social media icon |
Parameters use
brand
It's the brand of the social media that is going to be shown:
config
The config attribute is an optional parameter that can be used to set the size and color of the icon.
The pattern would be: <?style><?:size>.
size
The first modifier is size and this attribute can receive the values xs, s, m or l. The default size is m. Check the size section. This attribute uses the --z-social-media-icon--size CSS custom property to set the size of the icon.
style
Browser support
Detected engine:
Chromium
Webkit
Gecko