コンテンツへ移動
SVG Nexus / DEVELOPERS 登録不要 | 100%ブラウザ完結処理

開発者向けドキュメント

開発者とデザイナーのためのベクターと3Dアイコンライブラリ

76,166 点のカタログ、JSON 検索 API、依存なしのコンポーネントを React、Next.js、Vue 3、Svelte、Tailwind CSS、PHP のプロジェクトに追加できます。

1. JSON 検索とファセット API (GET /api/icons)

キーワード、ライブラリフォルダー、カテゴリ、スタイル、ライセンスで絞り込めます。応答は安全なインライン SVG、候補、一致するファセット付きのページ分割されたアイコンを返します。

GET /api/icons?q=arrow&library=lucide&category=arrows&style=outline&license=ISC&page=1&limit=48&facets=1

2. ベクターファイルの直接 URL

# Folder-scoped SVG asset (all 15 active folders supported):
GET /icon-library-assets/{libraryId}/{slug}.svg

# Legacy flat slug endpoint:
GET /icon-assets/{slug}.svg

# Upstream SPDX license notice file:
GET /icon-library-notices/{libraryId}/LICENSE.txt

3. 依存なしコンポーネントの型

import * as React from 'react';

export function NexusArrowRightIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      width="24"
      height="24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      {...props}
    >
      <path d="M5 12h14" />
      <path d="m12 5 7 7-7 7" />
    </svg>
  );
}

実践的なSVGガイド&チュートリアル

SVGとPNGの違い:どちらを使うべき?

Webサイトのアイコンやロゴ、UIには、どんな画面サイズでもくっきり表示されるSVGを使用してください。メール署名やSNS用サムネイルなど固定ピクセル画像が必要な場合はPNGを使用します。

CSSでSVGアイコンをアニメーションさせる方法

インラインSVGにCSSクラスを追加し、stroke-dasharrayのkeyframesでHover色変化や読み込みアニメーションを定義します。

FigmaやブラウザでSVGアイコンを編集する方法

SVG NexusからSVGコードをコピーしてFigmaやIllustratorに直接貼り付けるか、ブラウザ上のベクタースタジオを開いてソフト不要で編集できます。

React、Next.js、VueでSVGアイコンを使う方法

アイコンページのReact TSXまたはVue 3タブを選択し、currentColorとTailwind CSSに対応したコンポーネントコードをコピーします。

76,166個のベクターアイコンを検索するには入力してください...

移動 | Enter で開く すべてのアイコンを見る

比較

アイコンの出典とライセンス

ライセンス 商用利用 クレジット 変更と色替え
MIT許可パッケージに通知許可
ISC許可パッケージに通知許可
Apache-2.0許可通知ファイルとともに必須許可
CC BY 4.0許可クレジット必須許可
CC-BY-SA-4.0許可同一条件で配布同一条件で配布
Trademark / Brand参照目的のみ権利者の指針制限あり

アイコンプレビュー