Etat Pur Design System

Social: Instagram 

<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">

    <g clip-path="url(#clip0_10589_31690)">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.36 0H4.64C2.0774 0 0 2.0774 0 4.64V11.36C0 13.92 2.08 16 4.64 16H11.36C13.9226 16 16 13.9226 16 11.36V4.64C16 2.08 13.92 0 11.36 0ZM13.2 3.8C13.2 3.24772 12.7523 2.8 12.2 2.8C11.6477 2.8 11.2 3.24772 11.2 3.8C11.2 4.35228 11.6477 4.8 12.2 4.8C12.7523 4.8 13.2 4.35228 13.2 3.8ZM8 4C10.2091 4 12 5.79086 12 8C12 10.2091 10.2091 12 8 12C5.79086 12 4 10.2091 4 8C4 5.79086 5.79086 4 8 4ZM5.6 8C5.6 6.67452 6.67452 5.6 8 5.6C9.32548 5.6 10.4 6.67452 10.4 8C10.4 9.32548 9.32548 10.4 8 10.4C6.67452 10.4 5.6 9.32548 5.6 8Z" fill="currentColor" />
    </g>
    <defs>
        <clipPath id="clip0_10589_31690">
            <rect width="16" height="16" fill="currentColor" />
        </clipPath>
    </defs>
</svg>
 
{% include "@template-icon" %}
 
{
  "type": "social",
  "width": 16,
  "height": 16,
  "viewBox": "0 0 16 16",
  "customContent": "instagram"
}

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