Etat Pur Design System

Social: Facebook 

<svg class=" shrink-0" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M10.0801 3.23972H11.3334V1.11972C10.7266 1.05662 10.1168 1.02546 9.50674 1.02639C7.6934 1.02639 6.4534 2.13305 6.4534 4.15972V5.90639H4.40674V8.27972H6.4534V14.3597H8.90674V8.27972H10.9467L11.2534 5.90639H8.90674V4.39305C8.90674 3.69305 9.0934 3.23972 10.0801 3.23972Z" fill="currentColor" />

</svg>
 
{% include "@template-icon" %}
 
{
  "type": "social",
  "width": 16,
  "height": 16,
  "viewBox": "0 0 16 16",
  "path": "M10.0801 3.23972H11.3334V1.11972C10.7266 1.05662 10.1168 1.02546 9.50674 1.02639C7.6934 1.02639 6.4534 2.13305 6.4534 4.15972V5.90639H4.40674V8.27972H6.4534V14.3597H8.90674V8.27972H10.9467L11.2534 5.90639H8.90674V4.39305C8.90674 3.69305 9.0934 3.23972 10.0801 3.23972Z"
}

Social icons guide

How to use

(You can click on the icons to copy the correct icon name)

Template name

icons-social

Import

{% render "@icons-social--variant" with {...} %}

Examples

{% render "@icons-library--facebook" %}

Available props

  • viewBox: string | default: 0 0 48 24
  • iconClass: string | default: null
  • aria_hidden: boolean | default: true
  • size: 12, 16, 24, 32, 40, 48, 64, 92 | default: 24
  • path: string | default: svg path d attribute