Openobserve アイコン

Q: Openobserve アイコンは商用利用でも無料ですか?

はい。selfh.st/icons は CC BY 4.0 ライセンス で公開されています。作者のクレジットを表記すれば、個人・商用プロジェクトで利用できます。

selfhst:openobserve

Openobserve アイコン(selfhst:openobserve)は、selfh.st/icons セットの無料 SVG アイコンです（作者: selfh.st）。 512 × 512 のグリッドで描かれています。 selfh.st/icons は CC BY 4.0 ライセンスで公開されています。作者のクレジットを表記すれば、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット: selfh.st/icons
作者: selfh.st
ライセンス: CC-BY-4.0
サイズ: 512 × 512

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path fill="#fff" d="M422.8 256c0 5.2-.3 10.3-.7 15.3h-95.2l-7.3-14.8L268 359.8l-42.8-123.5l-29.2 96.5l-39-61.4H89.8c-.4-5.1-.7-10.2-.7-15.3c0-5.2.3-10.3.7-15.4h84.1l12.2 19.2l37.2-122.8l49.8 144l46.8-93.5l26 53h76.2c.4 5.1.7 10.3.7 15.4"/><linearGradient id="SVGcoOeTdyJ" x1="255.99" x2="511.849" y1="371.628" y2="371.628" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset=".01" stop-color="#82c2df"/><stop offset=".3" stop-color="#3cafd9"/><stop offset=".59" stop-color="#0379b8"/><stop offset=".7" stop-color="#006dac"/><stop offset=".73" stop-color="#006aa9"/><stop offset=".91" stop-color="#334c84"/><stop offset="1" stop-color="#3a447a"/></linearGradient><path fill="url(#SVGcoOeTdyJ)" d="M511.8 256c-3 8.4-8.5 15.7-15.8 20.8s-16 7.9-24.9 7.9s-17.6-2.8-24.9-7.9s-12.8-12.4-15.8-20.8c0-46.3-18.4-90.7-51.1-123.5c-32.6-32.8-77-51.2-123.3-51.2c8.4-3 15.7-8.5 20.8-15.8s7.9-16 7.9-24.9s-2.7-17.6-7.9-24.8C271.7 8.5 264.4 3 256 0c33.6 0 66.9 6.6 97.9 19.5s59.3 31.7 83 55.5c23.8 23.8 42.6 52 55.5 83c12.8 31.1 19.5 64.4 19.4 98"/><linearGradient id="SVGRmwVyd2U" x1="250.325" x2="601.601" y1="29.345" y2="290.696" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0c6237"/><stop offset=".406" stop-color="#31bb77"/><stop offset=".752" stop-color="#5bc792"/><stop offset=".98" stop-color="#b1e9cd"/></linearGradient><path fill="url(#SVGRmwVyd2U)" d="M511.8 256c0 33.6-6.6 66.9-19.5 98s-31.7 59.3-55.5 83c-23.8 23.8-52 42.6-83 55.5S289.5 512 255.9 512c-8.4-3-15.7-8.5-20.8-15.8s-7.9-16-7.9-24.9s2.8-17.6 7.9-24.9s12.4-12.8 20.8-15.8c22.9 0 45.6-4.5 66.8-13.3s40.4-21.6 56.7-37.9c16.2-16.2 29.1-35.5 37.9-56.7s13.3-43.9 13.3-66.9c3 8.4 8.5 15.7 15.8 20.8s16 7.9 24.9 7.9s17.6-2.8 24.9-7.9c7.2-5 12.7-12.2 15.6-20.6"/><linearGradient id="SVGC4s08d7G" x1=".085" x2="284.649" y1="385.982" y2="385.982" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#d1c6e0"/><stop offset=".35" stop-color="#9274b2"/><stop offset=".71" stop-color="#652f8d"/><stop offset="1" stop-color="#2b1143"/></linearGradient><path fill="url(#SVGC4s08d7G)" d="M284.6 41.2c-.1 8.8-3 17.3-8.1 24.5s-12.3 12.6-20.6 15.6c-22.9 0-45.6 4.5-66.8 13.3s-40.4 21.7-56.7 37.9c-16.2 16.2-29.1 35.5-37.9 56.7s-13.3 43.9-13.3 66.9c-3-8.4-8.5-15.7-15.8-20.8c-7.3-5.2-16-7.9-24.9-7.9s-17.6 2.8-24.9 7.9c-7 5-12.5 12.3-15.5 20.7c0-33.6 6.6-66.9 19.5-98C32.4 127 51.3 98.8 75 75c23.8-23.8 52-42.6 83-55.5C189.1 6.6 222.4 0 256 0c8.5 3.1 15.8 8.7 20.9 16c5.1 7.4 7.8 16.2 7.7 25.2"/><linearGradient id="SVGECKtHbFv" x1=".127" x2="256.03" y1="144.384" y2="144.384" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#931b1e"/><stop offset=".32" stop-color="#ed4725"/><stop offset=".38" stop-color="#ee5f26"/><stop offset=".53" stop-color="#f08f27"/><stop offset=".74" stop-color="#f5c321"/><stop offset=".88" stop-color="#f8d718"/><stop offset="1" stop-color="#f6df65"/></linearGradient><path fill="url(#SVGECKtHbFv)" d="M256 512c-67.9 0-132.9-27-180.9-75S.2 323.9.2 256c3-8.4 8.5-15.7 15.8-20.8s16-7.9 24.9-7.9s17.6 2.8 24.9 7.9s12.8 12.4 15.8 20.8c0 46.3 18.4 90.8 51.1 123.5c16.2 16.2 35.5 29.1 56.7 37.9s43.9 13.3 66.8 13.3c-8.4 3-15.7 8.5-20.8 15.8s-7.9 16-7.9 24.9s2.8 17.6 7.9 24.9c4.9 7.2 12.2 12.7 20.6 15.7"/></svg>

Openobserve アイコンの使い方

React

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

<Icon icon="selfhst:openobserve" width="24" />

Vue

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

<template>
  <Icon icon="selfhst:openobserve" width="24" />
</template>

Svelte

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

<Icon icon="selfhst:openobserve" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[selfhst--openobserve]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/selfhst -->
<div class="i-selfhst:openobserve"></div>

Web コンポーネント

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

<iconify-icon icon="selfhst:openobserve"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/selfhst/openobserve.svg" alt="Openobserve アイコン" width="24" height="24">

selfh.st/icons の関連アイコン

他のアイコンセットの Openobserve アイコン

Openobserve アイコンのよくある質問

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

はい。selfh.st/icons は CC BY 4.0 ライセンスで公開されています。作者のクレジットを表記すれば、個人・商用プロジェクトで利用できます。

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

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

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

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

selfh.st/icons をすべて見る →