ICONYZ
日本語
Fluent Emoji の E Mail アイコン

E Mail アイコン

fluent-emoji:e-mail

E Mail アイコン(fluent-emoji:e-mail)は、Fluent Emoji セットの無料 SVG アイコンです（作者: Microsoft Corporation）。 32 × 32 のグリッドで描かれています。 Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット
Fluent Emoji
作者
Microsoft Corporation
ライセンス
MIT
サイズ
32 × 32
タグ
email
SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><rect width="27.813" height="19.938" x="2.094" y="6.031" fill="url(#iQx4p0E)" rx="1.75"/><rect width="27.813" height="19.938" x="2.094" y="6.031" fill="url(#iTPDolc)" rx="1.75"/><path fill="url(#iQbPDrd)" d="M16 6.031V25.97H3.844a1.75 1.75 0 0 1-1.75-1.75V7.78c0-.966.783-1.75 1.75-1.75z"/><path fill="url(#irPw7DS)" d="M16 6.031V25.97H3.844a1.75 1.75 0 0 1-1.75-1.75V7.78c0-.966.783-1.75 1.75-1.75z"/><path fill="url(#iBMB1md)" d="M16 6.031V25.97h12.156a1.75 1.75 0 0 0 1.75-1.75V7.78a1.75 1.75 0 0 0-1.75-1.75z"/><path fill="url(#i0TwKhe)" d="M16 6.031V25.97h12.156a1.75 1.75 0 0 0 1.75-1.75V7.78a1.75 1.75 0 0 0-1.75-1.75z"/><path fill="url(#i4aVyoc)" d="M16 6.031V25.97h12.156a1.75 1.75 0 0 0 1.75-1.75V7.78a1.75 1.75 0 0 0-1.75-1.75z"/><path fill="url(#iaVcoub)" d="M16 6.031V25.97h12.156a1.75 1.75 0 0 0 1.75-1.75V7.78a1.75 1.75 0 0 0-1.75-1.75z"/><g filter="url(#i0UrmPi)"><path fill="url(#iDSDVle)" d="M2.094 24.219a.76.76 0 0 1 .358-.646l13.328-8.33a.4.4 0 0 1 .424 0l13.373 8.381c.205.128.33.353.33.595a1.75 1.75 0 0 1-1.75 1.75H3.843a1.75 1.75 0 0 1-1.75-1.75"/></g><path fill="url(#igTst3d)" d="M2.094 24.219a.76.76 0 0 1 .358-.646l13.328-8.33a.4.4 0 0 1 .424 0l13.373 8.381c.205.128.33.353.33.595a1.75 1.75 0 0 1-1.75 1.75H3.843a1.75 1.75 0 0 1-1.75-1.75"/><path fill="url(#ii9AQKe)" d="M2.094 24.219a.76.76 0 0 1 .358-.646l13.328-8.33a.4.4 0 0 1 .424 0l13.373 8.381c.205.128.33.353.33.595a1.75 1.75 0 0 1-1.75 1.75H3.843a1.75 1.75 0 0 1-1.75-1.75"/><g filter="url(#irKU0Sc)"><path fill="url(#iJ6A1fA)" d="M2.094 7.781a.76.76 0 0 0 .358.646l13.328 8.33a.4.4 0 0 0 .424 0l13.373-8.381a.7.7 0 0 0 .33-.595a1.75 1.75 0 0 0-1.75-1.75H3.843a1.75 1.75 0 0 0-1.75 1.75"/><path fill="url(#iq4Lq3b)" d="M2.094 7.781a.76.76 0 0 0 .358.646l13.328 8.33a.4.4 0 0 0 .424 0l13.373-8.381a.7.7 0 0 0 .33-.595a1.75 1.75 0 0 0-1.75-1.75H3.843a1.75 1.75 0 0 0-1.75 1.75"/><path fill="url(#iw7KKJy)" d="M2.094 7.781a.76.76 0 0 0 .358.646l13.328 8.33a.4.4 0 0 0 .424 0l13.373-8.381a.7.7 0 0 0 .33-.595a1.75 1.75 0 0 0-1.75-1.75H3.843a1.75 1.75 0 0 0-1.75 1.75"/><path fill="url(#iYf5ivb)" d="M2.094 7.781a.76.76 0 0 0 .358.646l13.328 8.33a.4.4 0 0 0 .424 0l13.373-8.381a.7.7 0 0 0 .33-.595a1.75 1.75 0 0 0-1.75-1.75H3.843a1.75 1.75 0 0 0-1.75 1.75"/></g><g filter="url(#ibWUhcK)"><path fill="#C2A5D0" d="M15.329 23.472a7 7 0 1 0 0-14a7 7 0 0 0 0 14"/></g><g filter="url(#i2tr63d)"><path fill="url(#i1zZ1Wb)" d="M15.953 23a7 7 0 1 0 0-14a7 7 0 0 0 0 14"/></g><g filter="url(#iKnX4Vd)"><path fill="#E6E0ED" d="M15.953 11.5c-1.21-.02-2.36.44-3.22 1.3c-.87.85-1.34 1.99-1.34 3.2c0 2.48 2.02 4.5 4.5 4.5a.47.47 0 1 0 0-.94c-1.96 0-3.56-1.6-3.56-3.56c0-.96.38-1.86 1.06-2.53s1.59-1.03 2.55-1.03c1.93.03 3.51 1.65 3.51 3.62v.81a.67.67 0 0 1-1.34 0v-3.08a.47.47 0 0 0-.47-.47c-.26 0-.49.21-.49.47v.09c-.44-.35-.99-.57-1.6-.57c-1.4 0-2.54 1.14-2.54 2.54s1.14 2.54 2.54 2.54c.7 0 1.34-.29 1.8-.75c.28.5.81.84 1.42.84c.89 0 1.62-.73 1.62-1.62v-.81c0-2.47-1.99-4.52-4.44-4.55m-.39 5.96c-.88 0-1.6-.72-1.6-1.6s.72-1.6 1.6-1.6s1.6.72 1.6 1.6s-.72 1.6-1.6 1.6"/></g><defs><linearGradient id="iQx4p0E" x1="4.094" x2="29.906" y1="17.156" y2="16.969" gradientUnits="userSpaceOnUse"><stop stop-color="#DFD0E6"/><stop offset="1" stop-color="#EEE5F8"/></linearGradient><linearGradient id="iTPDolc" x1="2.094" x2="5.132" y1="17.095" y2="17.095" gradientUnits="userSpaceOnUse"><stop stop-color="#D6BABD"/><stop offset="1" stop-color="#DCC9DD" stop-opacity="0"/></linearGradient><linearGradient id="iQbPDrd" x1="10.837" x2="10.075" y1="18.973" y2="17.786" gradientUnits="userSpaceOnUse"><stop offset=".114" stop-color="#DAC3DF"/><stop offset="1" stop-color="#DAC3DF" stop-opacity="0"/></linearGradient><linearGradient id="iBMB1md" x1="21.094" x2="21.924" y1="19.281" y2="17.786" gradientUnits="userSpaceOnUse"><stop offset=".114" stop-color="#F6EFFE"/><stop offset="1" stop-color="#F3EAFD" stop-opacity="0"/></linearGradient><linearGradient id="i0TwKhe" x1="20.156" x2="21.219" y1="13.938" y2="15.375" gradientUnits="userSpaceOnUse"><stop stop-color="#E3CDF7"/><stop offset="1" stop-color="#E9D9F8" stop-opacity="0"/></linearGradient><linearGradient id="i4aVyoc" x1="30.094" x2="26.375" y1="19.563" y2="19.563" gradientUnits="userSpaceOnUse"><stop stop-color="#F7F3FB"/><stop offset="1" stop-color="#F0E9F8" stop-opacity="0"/></linearGradient><linearGradient id="iaVcoub" x1="30.094" x2="28.868" y1="19.563" y2="19.563" gradientUnits="userSpaceOnUse"><stop offset=".199" stop-color="#EBE9ED"/><stop offset="1" stop-color="#EBE9ED" stop-opacity="0"/></linearGradient><linearGradient id="iDSDVle" x1="16" x2="16" y1="27.719" y2="16.906" gradientUnits="userSpaceOnUse"><stop stop-color="#DDC5F1"/><stop offset="1" stop-color="#E6DAF1"/></linearGradient><linearGradient id="igTst3d" x1="7.486" x2="7.942" y1="20.106" y2="20.791" gradientUnits="userSpaceOnUse"><stop offset=".073" stop-color="#DDC2C8"/><stop offset="1" stop-color="#DFCDDA" stop-opacity="0"/></linearGradient><linearGradient id="ii9AQKe" x1="22.581" x2="22.294" y1="19.159" y2="19.606" gradientUnits="userSpaceOnUse"><stop offset=".14" stop-color="#F8F3FD"/><stop offset="1" stop-color="#F1EAF9" stop-opacity="0"/></linearGradient><linearGradient id="iJ6A1fA" x1="16" x2="16" y1="6.031" y2="16.819" gradientUnits="userSpaceOnUse"><stop stop-color="#E9E4E9"/><stop offset="1" stop-color="#E7DCF0"/></linearGradient><linearGradient id="iq4Lq3b" x1="9.81" x2="13.424" y1="12.878" y2="6.393" gradientUnits="userSpaceOnUse"><stop stop-color="#E1D5E7"/><stop offset="1" stop-color="#E1D5E7" stop-opacity="0"/></linearGradient><linearGradient id="iw7KKJy" x1="2.094" x2="5.026" y1="7.669" y2="7.669" gradientUnits="userSpaceOnUse"><stop stop-color="#E1C1BC"/><stop offset="1" stop-color="#E1C1BC" stop-opacity="0"/><stop offset="1" stop-color="#E9D1CD" stop-opacity="0"/></linearGradient><linearGradient id="i1zZ1Wb" x1="22.438" x2="10.688" y1="14.281" y2="18.594" gradientUnits="userSpaceOnUse"><stop stop-color="#347BD7"/><stop offset="1" stop-color="#3477CB"/></linearGradient><filter id="i0UrmPi" width="27.813" height="11.538" x="2.094" y="14.431" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-.75"/><feGaussianBlur stdDeviation=".75"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.819608 0 0 0 0 0.654902 0 0 0 0 0.933333 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_21780"/></filter><filter id="irKU0Sc" width="27.813" height="11.188" x="2.094" y="5.881" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-.15"/><feGaussianBlur stdDeviation=".225"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.827451 0 0 0 0 0.686275 0 0 0 0 0.913725 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_21780"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy=".25"/><feGaussianBlur stdDeviation=".3"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.870588 0 0 0 0 0.858824 0 0 0 0 0.854902 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_21780" result="effect2_innerShadow_18_21780"/></filter><filter id="ibWUhcK" width="17" height="17" x="6.829" y="7.972" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_21780" stdDeviation=".75"/></filter><filter id="i2tr63d" width="14.4" height="14.5" x="8.803" y="8.75" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".25"/><feGaussianBlur stdDeviation=".125"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.192157 0 0 0 0 0.376471 0 0 0 0 0.721569 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_21780"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-.25"/><feGaussianBlur stdDeviation=".125"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.32549 0 0 0 0 0.341176 0 0 0 0 0.819608 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_21780" result="effect2_innerShadow_18_21780"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.15" dy=".25"/><feGaussianBlur stdDeviation=".125"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.317647 0 0 0 0 0.596078 0 0 0 0 0.882353 0 0 0 1 0"/><feBlend in2="effect2_innerShadow_18_21780" result="effect3_innerShadow_18_21780"/></filter><filter id="iKnX4Vd" width="9.5" height="9.651" x="10.993" y="11.249" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.15" dy=".15"/><feGaussianBlur stdDeviation=".125"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0.152941 0 0 0 0 0.341176 0 0 0 0 0.768627 0 0 0 1 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_18_21780"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_18_21780" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-.25"/><feGaussianBlur stdDeviation=".2"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.803922 0 0 0 0 0.713726 0 0 0 0 0.921569 0 0 0 1 0"/><feBlend in2="shape" result="effect2_innerShadow_18_21780"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.15" dy=".15"/><feGaussianBlur stdDeviation=".15"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.917647 0 0 0 0 0.890196 0 0 0 0 0.952941 0 0 0 1 0"/><feBlend in2="effect2_innerShadow_18_21780" result="effect3_innerShadow_18_21780"/></filter><radialGradient id="irPw7DS" cx="0" cy="0" r="1" gradientTransform="rotate(123.69 2.481 9.934)scale(2.72523 19.1395)" gradientUnits="userSpaceOnUse"><stop offset=".342" stop-color="#C8A6D7"/><stop offset="1" stop-color="#D1BBDD" stop-opacity="0"/></radialGradient><radialGradient id="iYf5ivb" cx="0" cy="0" r="1" gradientTransform="rotate(-138.233 15.658 -.181)scale(6.12906 27.1579)" gradientUnits="userSpaceOnUse"><stop stop-color="#FBF9FE"/><stop offset="1" stop-color="#F0ECF1" stop-opacity="0"/></radialGradient></defs></g></svg>

E Mail アイコンの使い方

React

import { Icon } from "@iconify/react";

<Icon icon="fluent-emoji:e-mail" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="fluent-emoji:e-mail" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="fluent-emoji:e-mail" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--e-mail]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:e-mail"></div>

Web コンポーネント

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="fluent-emoji:e-mail"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/fluent-emoji/e-mail.svg" alt="E Mail アイコン" width="24" height="24">

Fluent Emoji の関連アイコン

eagle アイコン
eagle
 ear アイコン
ear
 ear-dark アイコン
ear-dark
 ear-light アイコン
ear-light
 ear-medium アイコン
ear-medium
 ear-medium-dark アイコン
ear-medium-dark
 ear-medium-light アイコン
ear-medium-light
 ear-of-corn アイコン
ear-of-corn
 ear-with-hearing-aid アイコン
ear-with-hearing-aid
 ear-with-hearing-aid-dark アイコン
ear-with-hearing-aid-dark
 ear-with-hearing-aid-light アイコン
ear-with-hearing-aid-light
 ear-with-hearing-aid-medium アイコン
ear-with-hearing-aid-medium
 ear-with-hearing-aid-medium-dark アイコン
ear-with-hearing-aid-medium-dark
 ear-with-hearing-aid-medium-light アイコン
ear-with-hearing-aid-medium-light
 egg アイコン
egg
 eggplant アイコン
eggplant
 eight-oclock アイコン
eight-oclock
 eight-pointed-star アイコン
eight-pointed-star
 eight-spoked-asterisk アイコン
eight-spoked-asterisk
 eight-thirty アイコン
eight-thirty
 eject-button アイコン
eject-button
 electric-plug アイコン
electric-plug
 elephant アイコン
elephant
 elevator アイコン
elevator

他のアイコンセットの E Mail アイコン

Emoji One (Colored) の E Mail アイコン
Emoji One (Colored)
 Emoji One (Monotone) の E Mail アイコン
Emoji One (Monotone)
 Emoji One (v1) の E Mail アイコン
Emoji One (v1)
 Fluent Emoji Flat の E Mail アイコン
Fluent Emoji Flat
 Fluent Emoji High Contrast の E Mail アイコン
Fluent Emoji High Contrast
 Lets Icons の E Mail アイコン
Lets Icons
 Noto Emoji の E Mail アイコン
Noto Emoji
 Noto Emoji (v1) の E Mail アイコン
Noto Emoji (v1)
 OpenMoji の E Mail アイコン
OpenMoji
 Siemens Industrial Experience Icons の E Mail アイコン
Siemens Industrial Experience Icons
 Twitter Emoji の E Mail アイコン
Twitter Emoji

E Mail アイコン のよくある質問

E Mail アイコンは商用利用でも無料ですか?

はい。Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。

React で E Mail アイコンを使うには?

@iconify/react をインストールして <Icon icon="fluent-emoji:e-mail" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。

E Mail アイコンをウェブページに追加するには?

画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-emoji/e-mail.svg" alt="E Mail アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。

Fluent Emoji アイコン をすべて見る →