Google Classroom アイコン
thesvg-color:google-classroom
Google Classroom アイコン(thesvg-color:google-classroom)は、theSVG Color セットの無料 SVG アイコンです（作者: thesvg.org）。 579 × 500 のグリッドで描かれています。 theSVG Color icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- theSVG Color
- 作者
- thesvg.org
- ライセンス
- MIT
- サイズ
- 579 × 500
- タグ
- googleclassroom
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="579" height="500" viewBox="0 0 579 500"><path fill="#0f9d58" d="M52.6 52.6h473.7v394.7H52.6z"/><path fill="#57bb8a" d="M394.7 263.2c16.4 0 29.6-13.3 29.6-29.6S411 204 394.7 204s-29.6 13.3-29.6 29.6s13.3 29.6 29.6 29.6m0 19.7c-31.7 0-65.8 16.8-65.8 37.6v21.6h131.6v-21.6c0-20.8-34.1-37.6-65.8-37.6m-210.5-19.7c16.4 0 29.6-13.3 29.6-29.6S200.5 204 184.2 204s-29.6 13.3-29.6 29.6s13.3 29.6 29.6 29.6m0 19.7c-31.7 0-65.8 16.8-65.8 37.6v21.6H250v-21.6c0-20.8-34.1-37.6-65.8-37.6"/><path fill="#f7f7f7" d="M289.5 236.8c21.8 0 39.5-17.7 39.4-39.5c0-21.8-17.7-39.5-39.5-39.4c-21.8 0-39.4 17.7-39.4 39.5s17.7 39.4 39.5 39.4m0 26.4c-44.4 0-92.1 23.6-92.1 52.6v26.3h184.2v-26.3c0-29.1-47.7-52.6-92.1-52.6"/><path fill="#f1f1f1" d="M342.1 421.1h118.4v26.3H342.1z"/><path fill="#f4b400" d="M539.5 0h-500C17.7 0 0 17.7 0 39.5v421.1C0 482.3 17.7 500 39.5 500h500c21.8 0 39.5-17.7 39.5-39.5v-421C578.9 17.7 561.3 0 539.5 0m-13.2 447.4H52.6V52.6h473.7z"/><path fill="#fff" d="M539.5 0h-500C17.7 0 0 17.7 0 39.5v3.3C0 21 17.7 3.3 39.5 3.3h500C561.3 3.3 579 21 579 42.8v-3.3C578.9 17.7 561.3 0 539.5 0" opacity=".2"/><path fill="#bf360c" d="M539.5 496.7h-500C17.7 496.7 0 479 0 457.2v3.3C0 482.3 17.7 500 39.5 500h500c21.8 0 39.5-17.7 39.5-39.5v-3.3c-.1 21.8-17.7 39.5-39.5 39.5" opacity=".2"/><linearGradient id="SVG3AmffecS" x1="154.865" x2="154.865" y1="295.747" y2="282.634" gradientTransform="matrix(12.992 0 0 -4 -1584.623 1631.087)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#bf360c" stop-opacity=".2"/><stop offset="1" stop-color="#bf360c" stop-opacity=".02"/></linearGradient><path fill="url(#SVG3AmffecS)" d="M460.3 447.4H341.9l52.6 52.6h118.3z"/><path fill="#263238" d="M52.6 49.3h473.7v3.3H52.6z" opacity=".2"/><path fill="#fff" d="M52.6 447.4h473.7v3.3H52.6z" opacity=".2"/><radialGradient id="SVG7ajZce2w" cx="131.401" cy="367.2" r="18.197" gradientTransform="matrix(38.0002 0 0 -38 -4973.328 13965.323)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity=".1"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><path fill="url(#SVG7ajZce2w)" d="M539.5 0h-500C17.7 0 0 17.7 0 39.5v421.1C0 482.3 17.7 500 39.5 500h500c21.8 0 39.5-17.7 39.5-39.5v-421C578.9 17.7 561.3 0 539.5 0"/></svg>
Google Classroom アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:google-classroom" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:google-classroom" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:google-classroom" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--google-classroom]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:google-classroom"></div>
Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:google-classroom"></iconify-icon>
HTML 画像
<img src="https://iconyz.com/api/public/svg/thesvg-color/google-classroom.svg" alt="Google Classroom アイコン" width="24" height="24">
他のアイコンセットの Google Classroom アイコン
Google Classroom アイコン のよくある質問
Google Classroom アイコンは商用利用でも無料ですか?
はい。theSVG Color icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Google Classroom アイコンを使うには?
@iconify/react をインストールして <Icon icon="thesvg-color:google-classroom" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Google Classroom アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/thesvg-color/google-classroom.svg" alt="Google Classroom アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。
theSVG Color アイコン をすべて見る →
