Cart アイコン
reicon:cart
Cart アイコン(reicon:cart)は、Reicon セットの無料 SVG アイコンです。 24 × 24 のグリッドで描かれています。 Reicon icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M8.418 3.25c.28-.59.883-1 1.582-1h4c.698 0 1.301.41 1.582 1c.683.006 1.216.037 1.692.223a3.25 3.25 0 0 1 1.426 1.09c.367.493.539 1.127.776 1.998l.037.136l.59 2.167a3 3 0 0 1 1.01.828c.622.797.732 1.746.622 2.834c-.108 1.056-.44 2.386-.856 4.051l-.027.105c-.263 1.053-.477 1.908-.73 2.575c-.266.696-.602 1.266-1.157 1.699c-.554.433-1.189.62-1.928.71c-.709.084-1.59.084-2.675.084H9.638c-1.085 0-1.967 0-2.675-.085c-.74-.088-1.374-.276-1.929-.71c-.554-.432-.89-1.002-1.156-1.698c-.254-.667-.467-1.522-.73-2.575l-.027-.105c-.416-1.665-.749-2.995-.856-4.05c-.11-1.09 0-2.038.621-2.835c.283-.362.622-.63 1.01-.828l.59-2.167l.038-.136c.237-.871.409-1.505.776-1.999a3.25 3.25 0 0 1 1.426-1.089c.476-.186 1.008-.217 1.692-.222m.001 1.502c-.662.007-.927.032-1.147.118a1.75 1.75 0 0 0-.768.587c-.176.237-.28.568-.57 1.635L5.58 8.389c1.038-.139 2.378-.139 4.042-.139h4.755c1.665 0 3.005 0 4.042.139l-.353-1.297c-.291-1.067-.394-1.398-.57-1.635a1.75 1.75 0 0 0-.768-.587c-.22-.086-.486-.111-1.148-.118A1.75 1.75 0 0 1 14 5.75h-4a1.75 1.75 0 0 1-1.58-.998M10 3.75a.25.25 0 0 0 0 .5h4a.25.25 0 0 0 0-.5zM5.7 9.886c-.91.132-1.351.372-1.63.73c-.28.357-.405.842-.312 1.758c.095.936.4 2.16.834 3.9c.278 1.108.47 1.876.69 2.45c.21.554.417.847.677 1.05c.259.202.593.331 1.183.402c.61.073 1.4.074 2.544.074h4.63c1.143 0 1.935-.001 2.544-.074c.59-.07.924-.2 1.183-.402c.26-.203.466-.496.678-1.05c.218-.574.411-1.342.688-2.45c.435-1.74.74-2.964.834-3.9c.094-.916-.032-1.402-.311-1.759s-.72-.597-1.631-.729c-.93-.134-2.192-.136-3.985-.136h-4.63c-1.793 0-3.055.002-3.985.136" clip-rule="evenodd"/></svg>Cart アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="reicon:cart" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="reicon:cart" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="reicon:cart" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[reicon--cart]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/reicon -->
<div class="i-reicon:cart"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="reicon:cart"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/reicon/cart.svg" alt="Cart アイコン" width="24" height="24">Reicon の関連アイコン
cart-add
cart-add-duotone
cart-add-filled
cart-add2
cart-add2-filled
cart-check
cart-check-duotone
cart-check-filled
cart-check2
cart-check2-filled
cart-down
cart-down-filled
cart-duotone
cart-filled
cart-large
cart-large-duotone
cart-large-filled
cart-large2
cart-large2-duotone
cart-large2-filled
cart-large3
cart-large3-duotone
cart-large3-filled
cart-large4
他のアイコンセットの Cart アイコン
Cart アイコン のよくある質問
Cart アイコンは商用利用でも無料ですか?
はい。Reicon icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Cart アイコンを使うには?
@iconify/react をインストールして <Icon icon="reicon:cart" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Cart アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/reicon/cart.svg" alt="Cart アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。