ICONYZ
日本語
OpenMoji の Heart With Ribbon アイコン

Heart With Ribbon アイコン

openmoji:heart-with-ribbon

Heart With Ribbon アイコン(openmoji:heart-with-ribbon)は、OpenMoji セットの無料 SVG アイコンです。 72 × 72 のグリッドで描かれています。 OpenMoji icons は CC BY-SA 4.0 ライセンス で公開されています。作者のクレジットを表記し、アイコンへの変更を同じライセンスで共有すれば、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット
OpenMoji
作者
OpenMoji
ライセンス
CC-BY-SA-4.0
サイズ
72 × 72
カテゴリ
スマイリー・感情
タグ
heartwith、withribbon、heartwithribbon
SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72"><path fill="#ea5a47" d="M60.5 25c0-7.444-6.056-13.5-13.5-13.5a13.5 13.5 0 0 0-11 5.672A13.5 13.5 0 0 0 25 11.5c-7.444 0-13.5 6.056-13.5 13.5c0 2.729.84 5.408 2.383 7.65l-.034.028L34.715 58.54h2.57l20.228-25.07l.668-.837l-.036-.024A13.53 13.53 0 0 0 60.5 25"/><path fill="#fcea2b" d="M60.339 24.537c-2.926 0-8.116 2.85-10.701 5.625c.493.527.8 1.256.8 2.059c-.03 3.706.066 3.849-.094 4.487c6.84 2.122 8.548 7.385 11.917 2.913c3.845-5.103 1.694-15.084-1.922-15.084"/><path fill="#f1b31c" d="M50.436 32.49c2.747-2.503 7.254-4.84 9.903-4.84c1.98 0 3.52 2.992 3.878 6.538c.486-4.708-1.333-9.652-3.878-9.652c-2.926 0-8.116 2.85-10.701 5.625c.493.528.8 1.257.8 2.06z"/><path fill="#fcea2b" d="M32.473 39.621c3.37 4.472 5.078-.791 11.917-2.913c-.16-.638-.065-.78-.093-4.487c0-.803.306-1.532.8-2.06c-2.586-2.775-7.776-5.624-10.702-5.624c-3.616 0-5.767 9.98-1.922 15.084"/><path fill="#f1b31c" d="M44.299 32.49c-2.748-2.503-7.254-4.84-9.904-4.84c-1.98 0-3.52 2.992-3.878 6.538c-.486-4.708 1.333-9.652 3.878-9.652c2.926 0 8.116 2.85 10.701 5.625a3 3 0 0 0-.8 2.06z"/><path fill="#fcea2b" d="M44.225 37.133c-.734.266-1.399.58-2.007.918c-1.304 1.735-3.613 5.214-6.085 10.752c-.197.441.105.97.504.883l2.845-.622c.413-.09.826.155 1.029.612l1.28 2.887c.225.506.831.405.94-.156c.556-2.847 1.83-8.994 3.374-13.14c-.91-.193-1.644-1.038-1.88-2.134m8.171.952a13 13 0 0 0-2.031-.952c-.237 1.096-.97 1.94-1.881 2.134c1.544 4.146 2.818 10.293 3.374 13.14c.11.56.715.662.94.156l1.28-2.887c.203-.457.616-.703 1.03-.613l2.844.622c.4.088.701-.441.504-.882C56 43.3 53.704 39.83 52.396 38.085"/><path fill="#fcea2b" d="M47.495 28.812h-.99c-1.319 0-2.391 1.405-2.391 3.133v3.92c0 1.728 1.072 3.133 2.39 3.133h.99c1.319 0 2.391-1.405 2.391-3.132v-3.921c0-1.728-1.072-3.133-2.39-3.133"/><path fill="#f1b31c" d="M47.055 35.866v-3.921c0-1.3-.608-2.418-1.47-2.891c.283-.156.593-.242.92-.242h.99c1.318 0 2.39 1.405 2.39 3.133v3.92c0 1.728-1.072 3.134-2.39 3.134h-.99c-.327 0-.637-.087-.92-.242c.862-.473 1.47-1.59 1.47-2.891"/><path fill="none" d="M15.556 32.264h16.89"/><g fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2"><path d="M49.835 36.794c6.839 2.122 8.547 7.385 11.917 2.914c3.458-4.592 2.065-13.131-.883-14.799a2.1 2.1 0 0 0-1.04-.286c-1.308 0-3.069.57-4.847 1.448c-2.199 1.086-4.424 2.643-5.854 4.177"/><path stroke-linecap="round" stroke-linejoin="round" d="M44.225 36.794c-.734.266-1.399.58-2.007.918c-1.304 1.734-3.613 5.213-6.085 10.752c-.197.44.105.97.504.882l2.845-.622c.413-.09.826.156 1.029.613l1.28 2.887c.225.506.831.405.94-.156c.556-2.847 1.83-8.994 3.374-13.14c-.91-.194-1.644-1.038-1.88-2.134m7.642.952a13 13 0 0 0-2.032-.952c-.236 1.096-.97 1.94-1.881 2.134c1.544 4.146 2.818 10.293 3.374 13.14c.11.56.715.662.94.156l1.28-2.887c.204-.457.617-.703 1.03-.613l2.844.622c.4.088.701-.441.504-.882c-2.456-5.503-4.751-8.973-6.06-10.718"/><path d="M47.495 28.812h-.99c-1.319 0-2.391 1.405-2.391 3.133v3.92c0 1.728 1.072 3.133 2.39 3.133h.99c1.319 0 2.391-1.405 2.391-3.132v-3.921c0-1.728-1.072-3.133-2.39-3.133z"/><path d="M44.372 29.89c-2.586-2.774-7.235-5.353-10.16-5.353c-3.617 0-5.767 9.981-1.923 15.084c3.37 4.472 5.078-.791 11.917-2.913"/><path stroke-linecap="round" stroke-linejoin="round" d="M58.648 20.454C56.829 15.798 52.3 12.5 47 12.5a12.5 12.5 0 0 0-11 6.56a12.5 12.5 0 0 0-11-6.56c-6.904 0-12.5 5.596-12.5 12.5c0 2.97 1.04 5.694 2.77 7.839l-.004.003L36 58.54l3.101-3.844"/></g></svg>

Heart With Ribbon アイコンの使い方

React

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

<Icon icon="openmoji:heart-with-ribbon" width="24" />

Vue

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

<template>
  <Icon icon="openmoji:heart-with-ribbon" width="24" />
</template>

Svelte

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

<Icon icon="openmoji:heart-with-ribbon" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[openmoji--heart-with-ribbon]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/openmoji -->
<div class="i-openmoji:heart-with-ribbon"></div>

Web コンポーネント

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

<iconify-icon icon="openmoji:heart-with-ribbon"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/openmoji/heart-with-ribbon.svg" alt="Heart With Ribbon アイコン" width="24" height="24">

OpenMoji の関連アイコン

他のアイコンセットの Heart With Ribbon アイコン

Heart With Ribbon アイコン のよくある質問

Heart With Ribbon アイコンは商用利用でも無料ですか?

はい。OpenMoji icons は CC BY-SA 4.0 ライセンス で公開されています。作者のクレジットを表記し、アイコンへの変更を同じライセンスで共有すれば、個人・商用プロジェクトで利用できます。

React で Heart With Ribbon アイコンを使うには?

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

Heart With Ribbon アイコンをウェブページに追加するには?

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

OpenMoji アイコン をすべて見る →