Library: Mail Outline

Ready

HTML
View
Context
Info
Notes


        
        <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.55821 5.37143H19.4418C20.084 5.37143 20.6046 5.8831 20.6046 6.51429V7.05186L12.5877 12.0589L12.5861 12.0599C12.4103 12.1677 12.2073 12.2249 12 12.2249C11.7927 12.2249 11.5897 12.1677 11.4139 12.0599L11.4123 12.0589L3.39542 7.05186V6.51429C3.39542 5.8831 3.91602 5.37143 4.55821 5.37143ZM21.9999 7.417V6.51429C21.9999 5.12568 20.8546 4 19.4418 4H4.55821C3.1454 4 2.00009 5.12568 2.00009 6.51429V7.417C1.99997 7.42429 1.99997 7.43157 2.00009 7.43885V17.4857C2.00009 18.8743 3.1454 20 4.55821 20H19.4418C20.8546 20 21.9999 18.8743 21.9999 17.4857V7.43885C22 7.43157 22 7.42429 21.9999 7.417ZM20.6046 8.67676V17.4857C20.6046 18.1169 20.084 18.6286 19.4418 18.6286H4.55821C3.91602 18.6286 3.39542 18.1169 3.39542 17.4857V8.67676L10.6677 13.2188L10.6715 13.2211C11.0697 13.4663 11.5301 13.5964 12 13.5964C12.4699 13.5964 12.9303 13.4663 13.3285 13.2211L20.6046 8.67676Z" fill="currentColor" />
</svg>


        {% include "@template-icon" %}


        
            
            {
  "type": "library",
  "path": "M4.55821 5.37143H19.4418C20.084 5.37143 20.6046 5.8831 20.6046 6.51429V7.05186L12.5877 12.0589L12.5861 12.0599C12.4103 12.1677 12.2073 12.2249 12 12.2249C11.7927 12.2249 11.5897 12.1677 11.4139 12.0599L11.4123 12.0589L3.39542 7.05186V6.51429C3.39542 5.8831 3.91602 5.37143 4.55821 5.37143ZM21.9999 7.417V6.51429C21.9999 5.12568 20.8546 4 19.4418 4H4.55821C3.1454 4 2.00009 5.12568 2.00009 6.51429V7.417C1.99997 7.42429 1.99997 7.43157 2.00009 7.43885V17.4857C2.00009 18.8743 3.1454 20 4.55821 20H19.4418C20.8546 20 21.9999 18.8743 21.9999 17.4857V7.43885C22 7.43157 22 7.42429 21.9999 7.417ZM20.6046 8.67676V17.4857C20.6046 18.1169 20.084 18.6286 19.4418 18.6286H4.55821C3.91602 18.6286 3.39542 18.1169 3.39542 17.4857V8.67676L10.6677 13.2188L10.6715 13.2211C11.0697 13.4663 11.5301 13.5964 12 13.5964C12.4699 13.5964 12.9303 13.4663 13.3285 13.2211L20.6046 8.67676Z"
}

Handle: @icons-library--mail-outline
Variants (132): 3D , Arrow Backward , Arrow Double , Arrow Down , Arrow Forward , Arrow Left , Arrow Right , Arrow Up , Bag , Bubble , Burger Menu , Business , Calendar , Call , Camera , Care , Chat , Check Circle Fill , Check Circle Outline , Check Fill , Check Outline , Checklist , Chevron Bottom , Chevron Left , Chevron Up , Close Circle Fill , Close Fill , Chevron Right , Close Circle Outline , Close Outline , Cloud Download , Cloud Upload , Color Outline , Collection Outline , Compare Outline , Delete Text , Credit Card , Delivery Fast , Delete , Delivery Car , Delivery , Device Desktop , Device Smartphone , Devis , Dots , Ear Off , Edit , Ear , Euro , Eyes Close Fill , Eyes Open Fill , Eyes Open Outline , Eyes Close Outline , Gift , Filter Fill , Filter Outline , Glass , Health Security , Home Outline , Grid , Home Fill , Help , Information Circle Fill , Information Circle Outline , Left Profil , Like Fill , Like Outline , List , Local Download , Local Upload , Locate Fixed , Locate , Lock Closed , Lock Openned , Mail Outline , Mandat Outline , Map Cluster Logo , Map Fill , Map Outline , Minus , Notification Off , Notification On Fill , Notification On Outline , Open Quote Fill , Open Quote Outline , Pause , Play Fill , Play Outline , Plus Outline , Print Outline , Quote , Resize , Ribon , Return , Row , Scale Downsize , Scale Maximize , Scale Minximize , Scale Upsize , Scroll Up Fill , Scroll Up Outline , Search Outline , Settings 1 , Settings 2 , Settings 3 , Sign Out , Size , Slash , Sort Az , Sort , Star Fill , Star Outline , Store , Tools , Trend , User Outline , User Team , Virement , Warning Circle Fill , Warning Circle Outline , World , Zoom In , Zoom Out , Clock , Navigation , Image , Translate , Contact Lenses , Accessibility , Parking , Vision Test , Maps
Preview:
- With layout
- Component only
Filesystem Path: src/components/atoms/icons/icons-library/icons-library.twig
References (1): @template-icon

Library icons guide

How to use

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

Template name

icons-library

Import

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

Examples

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

Available props

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