Sleeping Face アイコン
twemoji:sleeping-face
Sleeping Face アイコン(twemoji:sleeping-face)は、Twitter Emoji セットの無料 SVG アイコンです（作者: Twitter）。 36 × 36 のグリッドで描かれています。 Twitter Emoji icons は CC BY 4.0 ライセンス で公開されています。作者のクレジットを表記すれば、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- Twitter Emoji
- 作者
- Twitter
- ライセンス
- CC-BY-4.0
- サイズ
- 36 × 36
- カテゴリ
- スマイリー・感情
- タグ
- sleepingface
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36"><circle cx="18" cy="18" r="18" fill="#ffcc4d"/><circle cx="18" cy="26" r="3" fill="#664500"/><path fill="#664500" d="M17.312 16.612a.5.5 0 0 0-.61-.014c-.012.009-1.26.902-3.702.902c-2.441 0-3.69-.893-3.7-.9a.5.5 0 0 0-.757.603c.06.135 1.5 3.297 4.457 3.297c2.958 0 4.397-3.162 4.457-3.297a.5.5 0 0 0-.145-.591m10 0a.5.5 0 0 0-.61-.014c-.012.009-1.261.902-3.702.902s-3.69-.893-3.7-.9a.5.5 0 0 0-.757.603c.06.135 1.5 3.297 4.457 3.297c2.958 0 4.397-3.162 4.457-3.297a.5.5 0 0 0-.145-.591"/><path fill="#ffac33" d="M34.43 12.534c.004-.044.023-.077.023-.123c0-.754-.548-1.188-1.225-1.188h-3.582l4.279-5.993c.206-.283.282-.453.282-.811c0-.735-.64-.849-.885-.849h-5.349l-.032-.688s-1.409.831-1.503.888s-.505.372-.505.987c0 .754.546 1.187 1.225 1.187h3.149l-4.261 5.993c-.094.151-.244.433-.244.735c0 .622.508.924 1.111.924h6.315c.258 0 .515-.076.681-.176l1.503-.888h-.982z"/><path fill="#2a6797" d="M31.771 5.084h-3.149c-.679 0-1.225-.433-1.225-1.187s.546-1.188 1.225-1.188h6.164c.245 0 .885.113.885.848c0 .358-.076.528-.282.811l-4.279 5.993h3.582c.677 0 1.225.433 1.225 1.187s-.548 1.187-1.225 1.187h-6.315c-.603 0-1.111-.302-1.111-.924c0-.302.15-.584.244-.735z"/><path fill="#ffac33" d="M24.886 7.48c.003-.033.018-.058.018-.092c0-.564-.41-.889-.917-.889h-2.682l3.203-4.487c.156-.212.212-.339.212-.606c0-.55-.479-.635-.663-.635h-4.004l-.024-.515s-1.055.622-1.125.665a.88.88 0 0 0-.378.739c0 .564.409.889.917.889H21.8l-3.19 4.487c-.07.113-.183.324-.183.55c0 .466.38.691.832.691h4.728c.193 0 .385-.057.51-.132l1.125-.665z"/><path fill="#2a6797" d="M22.896 1.903h-2.357c-.508 0-.917-.324-.917-.889c0-.564.409-.889.917-.889h4.615c.184 0 .663.085.663.635c0 .268-.057.395-.211.607l-3.203 4.487h2.682c.505 0 .915.324.915.889s-.41.889-.917.889h-4.728c-.452 0-.832-.226-.832-.691c0-.226.113-.437.183-.55z"/><path fill="#ffac33" d="M17.741 10.425c.003-.028.015-.049.015-.079c0-.483-.351-.761-.785-.761h-2.295l2.742-3.84c.132-.181.181-.29.181-.519c0-.471-.41-.544-.567-.544h-3.427l-.021-.441l-.963.569a.75.75 0 0 0-.324.633c0 .483.35.761.785.761h2.017l-2.73 3.84c-.06.097-.157.278-.157.471c0 .399.326.592.712.592h4.047c.165 0 .33-.049.436-.113l.963-.569z"/><path fill="#2a6797" d="M16.037 5.652H14.02c-.435 0-.785-.278-.785-.761s.35-.761.785-.761h3.95c.157 0 .567.073.567.544c0 .229-.048.338-.181.519l-2.742 3.84h2.295c.434 0 .785.278.785.761s-.351.761-.785.761h-4.047c-.386 0-.712-.193-.712-.592c0-.193.096-.374.157-.471z"/></svg>
Sleeping Face アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="twemoji:sleeping-face" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="twemoji:sleeping-face" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="twemoji:sleeping-face" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[twemoji--sleeping-face]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/twemoji -->
<div class="i-twemoji:sleeping-face"></div>
Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="twemoji:sleeping-face"></iconify-icon>
HTML 画像
<img src="https://iconyz.com/api/public/svg/twemoji/sleeping-face.svg" alt="Sleeping Face アイコン" width="24" height="24">
他のアイコンセットの Sleeping Face アイコン
Sleeping Face アイコン のよくある質問
Sleeping Face アイコンは商用利用でも無料ですか?
はい。Twitter Emoji icons は CC BY 4.0 ライセンス で公開されています。作者のクレジットを表記すれば、個人・商用プロジェクトで利用できます。
React で Sleeping Face アイコンを使うには?
@iconify/react をインストールして <Icon icon="twemoji:sleeping-face" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Sleeping Face アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/twemoji/sleeping-face.svg" alt="Sleeping Face アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。
Twitter Emoji アイコン をすべて見る →
ICONYZ
