# mjml-social > mjml-social Latest version **5.4.1** (published 2026-09-10) · MIT license · 0 weekly downloads ## Install ```sh npm install mjml-social pnpm add mjml-social yarn add mjml-social bun add mjml-social ``` ## Health **Score 60/100 (C)** — status: active. Positive: no vulnerabilities; recently updated; high maintenance score; popular repo. Warnings: low downloads; no types; no esm support. ## Facts | | | |---|---| | Version | 5.4.1 | | Published | 2026-09-10 | | First published | 2016-03-25 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 3 | | Unpacked size | 29.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 18243 | | Maintainers | mjmlio, iryusa, loeck, ngarnier, meriadec, kmcb, totocap | ## Links - npm: https://www.npmjs.com/package/mjml-social - Repository: https://github.com/mjmlio/mjml - Homepage: https://mjml.io - Issues: https://github.com/mjmlio/mjml/issues - npm.io page: https://npm.io/package/mjml-social ## Dependencies (3) - [lodash](https://npm.io/package/lodash.md) ^4.17.21 - [mjml-core](https://npm.io/package/mjml-core.md) 5.4.1 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.28.4 ## Recent versions - 5.4.1 (latest) — 2026-09-10 - 5.2.0-beta.1 (beta) — 2026-05-06 - 5.0.0-alpha.11 (experimental) — 2026-02-10 - 4.7.0-beta.2 (next) — 2020-08-28 - 5.4.0 — 2026-06-29 - 5.3.0 — 2026-05-27 - 5.2.2 — 2026-05-19 - 5.2.1 — 2026-05-12 - 5.2.0 — 2026-05-07 - 5.1.0 — 2026-04-24 - 5.1.0-beta.1 — 2026-04-24 - 5.0.1 — 2026-04-16 - 5.1.0-alpha.1 — 2026-04-16 - 5.0.0 — 2026-04-16 - 5.0.0-beta.2 — 2026-03-19 - … 140 more at https://npm.io/package/mjml-social/versions ## README ### mj-social Displays calls-to-action for various social networks with their associated logo. You can add multiple social networks using `mj-social-element` tags.
desktop
```xml Facebook Google Twitter X ``` #### Attributes | attribute | accepts | description | default value | | -------------------------- | ----------------------- | -------------------------------------------------- | -------------------------------------- | | align | `left` `right` `center` | align content | `center` | | border | string | icon border, applied to each `mj-social-element` | | | border-radius | `px` `%` | border radius | `3px` | | color | CSS color formats | text color | `#333333` | | css-class | string | class name, added to the root HTML element created | | | container-background-color | CSS color formats | inner element background color | | | font-family | string | font name | `Ubuntu, Helvetica, Arial, sans-serif` | | font-size | `px` | font size | `13px` | | font-style | string | font style | normal | | font-weight | string | font weight | normal | | icon-height | `px` `%` | icon height, overrides `icon-size` | icon-size | | icon-padding | `px` `%` | padding around the icons | | | icon-size | `px` `%` | icon size (width and height) | `20px` | | inner-padding | `px` `%` | social network surrounding padding | `null` | | line-height | `px` `%` | space between lines | `22px` | | mode | `horizontal` `vertical` | direction of social elements | `horizontal` | | padding | `px` `%` | social padding, supports up to 4 parameters | `10px 25px` | | padding-bottom | `px` `%` | bottom padding | | | padding-left | `px` `%` | left padding | | | padding-right | `px` `%` | right padding | | | padding-top | `px` `%` | top padding | | | text-padding | `px` `%` | padding around the text | | | text-decoration | string | CSS values, e.g. `underline` `overline` `none` | `none` |

Try it live

#### mj-social-element This component enables you to display a given social network inside `mj-social`. Note that default icons are transparent, which allows `background-color` to actually be the icon color. #### Attributes | attribute | accepts | description | default value | | ---------------- | ----------------------- | ------------------------------------------------------------------------------- | -------------------------------------- | | align | `left` `center` `right` | align content | `center` | | alt | string | image alt attribute | `''` | | background-color | CSS color formats | icon color | Each social `name` has its own default | | border | string | icon border (CSS shorthand), applied to the `` | `0` | | border-radius | string | border radius | `3px` | | color | CSS color formats | text color | `#000` | | css-class | string | class name, added to the root HTML element created | | | font-family | string | font name | `Ubuntu, Helvetica, Arial, sans-serif` | | font-size | `px` | font size | `13px` | | font-style | string | font style | | | font-weight | string | font weight | | | href | string | button redirection, in URL format | | | icon-height | percent/px | icon height, overrides icon-size | `icon-size` | | icon-padding | `px` `%` | padding around the icon | | | icon-position | `left` `right` | sets the side of the icon | | | icon-size | `px` `%` | icon size (width and height) | | | line-height | `px` `%` | space between lines | `1` | | name | string | social network name, see supported list below | | | padding | `px` `%` | social element padding, supports up to 4 parameters | `4px` | | padding-bottom | `px` `%` | bottom padding | | | padding-left | `px` `%` | left padding | | | padding-right | `px` `%` | right padding | | | padding-top | `px` `%` | top padding | | | rel | string | specify the rel attribute for the link | | | sizes | string | set icon width based on query | | | src | string | image source, in URL format | Each social `name` has its own default | | srcset | string | enables to set a different image source based on the viewport, using CSS syntax | | | target | string | link target | `_blank` | | text-decoration | string | CSS values, e.g. `underline` `overline` `none` | `none` | | text-padding | `px` `%` | padding around the text | `4px 4px 4px 0` | | title | string | image title attribute | | | vertical-align | `top` `middle` `bottom` | vertically align elements | `middle` | Supported networks with a share url: - `facebook` - `twitter` - `x` - `google` - `pinterest` - `linkedin` - `tumblr` - `xing` Without a share url: - `github` - `instagram` - `web` - `snapchat` - `youtube` - `vimeo` - `medium` - `soundcloud` - `dribbble` When using a network with share url, the `href` attribute will be inserted in the share url (i.e. `https://www.facebook.com/sharer/sharer.php?u=[[URL]]`). To keep your `href` unchanged, add `-noshare` to the network name. Example : `Twitter` #### Custom Social Element You can add any unsupported network like this: ```xml Optional label ``` You can also use mj-social this way with no `href` attribute to make a simple list of inlined images-texts. --- _Source: https://npm.io/package/mjml-social · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._