
4万個超のSVGアイコン管理システム
有料

Nucleoは、4万個以上のプレミアムSVGアイコンと、アセット管理用の専用デスクトップ/Webアプリで構成される包括的なアイコン管理エコシステムです。静的なアイコンライブラリとは異なり、Nucleoはネイティブアプリを提供しており、ユーザーはワークフローを中断することなく、さまざまな形式(SVG、PNG、PDF)やサイズでアイコンを検索、カスタマイズ、エクスポートできます。また、専用のReactパッケージを通じて開発環境に直接統合できるため、UIコンポーネント全体で一貫したアイコン実装が可能です。このプラットフォームは拡張性を考慮して構築されており、ピクセルパーフェクトなUIセットから、ボールド、マイクロ、アイソメトリックなバリエーションまで、複数のビジュアルスタイルを提供し、デザインシステムやプロダクトチームにとっての信頼できる唯一の情報源(Source of Truth)となります。
Nucleoデスクトップアプリはローカルアセットマネージャーとして機能し、インターネット接続なしで4万個以上のアイコンを閲覧、検索、エクスポートできます。バッチエクスポートやカスタムサイズ設定をサポートしており、Webベースのリポジトリから個別にファイルをダウンロードするよりも大幅に高速です。このローカルファーストのアプローチにより、デザイナーはオフライン時でも一貫したワークフローを維持でき、アプリの内部エンジンがSVGの最適化とパスの簡素化を自動的に処理します。
Nucleoは、開発者がアイコンをネイティブコンポーネントとしてインポートできる専用のReactパッケージを提供します。これにより、プロジェクトディレクトリ内でSVGファイルを個別に管理する必要がなくなります。サイズ、色、線の太さをpropsで指定することで、開発者はアプリケーションの状態に基づいてアイコンスタイルを動的に更新でき、バンドルサイズを削減し、UIコンポーネントライブラリ全体でアイコンのレンダリングの一貫性を確保できます。
ライブラリには、Core、UI、Sharp、Pixel、Microといった異なるスタイルにわたる4万個以上のアイコンが含まれています。各スタイルは、同じグリッドとデザイン言語を共有するように細心の注意を払って作成されています。これにより、チームは製品インターフェース全体でスタイル(例:「Sharp」から「Pixel」へ)を切り替えても視覚的な調和を維持できます。これは、バラバラのオープンソースセットからアイコンを混在させる場合には非常に困難な作業です。
アプリには、エクスポート前にアイコンのプロパティを変更できる統合エディタが搭載されています。ユーザーは線の太さ、角の半径、カラーパレットをリアルタイムで調整できます。これにより、エクスポートされるすべてのアイコンがプロジェクトのブランドガイドラインに確実に準拠するため、Illustratorなどの外部ベクターソフトでエクスポート後に編集する必要がなくなり、デザインから開発への引き継ぎプロセスにおける時間を大幅に節約できます。
Nucleoライブラリのすべてのアイコンには包括的なメタデータがタグ付けされており、4万個以上のアセットをサブ秒で検索できます。検索アルゴリズムはコンテキストを理解するため、機能(例:「ナビゲーション」、「エディタ」)や視覚的特徴でアイコンを見つけることができます。この高性能な検索機能は、迅速なプロトタイピングや開発サイクル中に速度を維持するために特定のUI要素を素早く見つける必要がある大規模なプロダクトチームにとって不可欠です。
公式サイトからmacOSまたはWindows用のNucleoデスクトップアプリをダウンロードしてインストールします。アプリを起動し、検索バーやカテゴリフィルターを使用して4万個以上のアイコンライブラリを閲覧します。アイコンを選択し、カスタマイズパネルで線の太さ、色、サイズを調整してからエクスポートします。アイコンをFigma、Sketch、Adobe XDなどのデザインツールに直接ドラッグ&ドロップします。npm経由で@nucleo/reactパッケージをインストールし、コードベース内でアイコンをReactコンポーネントとしてプログラム的にレンダリングします。プロジェクトをNucleoアプリと同期し、デザインアセットと本番コード間の一貫性を維持します。
プロダクトデザイナーは、Nucleoを使用してアイコンの信頼できる唯一の情報源を維持します。アプリを使用して標準化されたアセットをエクスポートすることで、Webやモバイルアプリケーション全体のすべてのUI要素が同一の線の太さとグリッド配置を共有し、統一されたビジュアルアイデンティティを実現します。
フロントエンド開発者は、NucleoのReactパッケージを使用してアイコンをコードに直接注入します。これにより、数千個の個別のSVGファイルを管理するオーバーヘッドを回避し、propsを介してアイコンの色やサイズを変更できるため、UI更新の実装がスピードアップします。
複数のプロジェクトを抱えるエージェンシーは、Nucleoアプリを使用してアイコンをカスタムの「プロジェクト」や「コレクション」に整理します。これにより、数千個の未使用アセットでローカルファイルシステムを散らかすことなく、クライアントごとの異なるデザイン言語を素早く切り替えることができます。
高精度なプロトタイプを作成するために、膨大で一貫性のあるアイコンライブラリを必要としています。Nucleoは、異なるセットのスタイルが衝突する「アイコンの断片化」という問題を解決し、すべてのUIコンポーネントにプロフェッショナルで統一感のある外観を保証します。
手動でのSVG最適化を伴わない、プログラム的なアイコン実装方法を求めています。NucleoのReact統合により、アイコンを標準コンポーネントとして扱うことができ、コードの保守性が向上し、ビルド時間が短縮されます。
複数のクライアントを同時に管理しています。Nucleoは、アセットライブラリを個別に整理してアクセス可能にするツールを提供し、多様なプロジェクト要件全体で高品質かつ一貫した成果物を納品できるようにします。
アイコンバンドルの買い切り型(約99ドル)。4万個以上の全アイコン、デスクトップアプリ、Reactパッケージへのアクセスが含まれます。継続的な料金は発生しません。