SVG・PNGアイコン作成

アイコン作成ツールの使い方

このアイコン作成ツールは、サイトやアプリ、プレゼン資料、デザインの制作にそのまま使えるアイコンを探し、調整し、ダウンロードできる無料のオンラインツールです。会員登録もインストールも不要で、すべてブラウザ上で完結します。

アイコンを探して選ぶ

検索欄を使うか、左のパネルにあるカテゴリーをたどって、目的のアイコンを見つけてください。ライブラリには数百種類のアイコンがテーマ別に整理されており、インターフェース、SNS、テクノロジー、ビジネスなど、必要な記号をすぐに探せます。アイコンをクリックすると選択され、調整パネルにその場で反映されます。

アイコンを調整する

アイコンを選んだら、 メインカラー と サブカラー をプロジェクトの世界観に合わせて調整できます。さらに、 サイズ をピクセル単位で指定したり、 線の太さを変えたりすることも可能です。余白の多いミニマルなUIでも、線の力強いデザインでも、レイアウトにぴたりと馴染ませられます。

アイコンをダウンロード・コピーする

調整が終わったら、書き出し方法を3つから選べます。

• SVG： 拡大縮小に強いベクターファイルとして保存します。サイトやデザインシステム、アプリでの利用に最適です。SVGのアイコンは軽く、どんな解像度でも鮮明で、CSSやコードから手軽に編集できます。
• PNG： 指定したサイズのラスター画像として保存します。書類やプレゼン資料、SVGに対応していないサービスで使うのにぴったりです。
• SVGコードをコピー： アイコンのソースコードをそのままクリップボードにコピーします。外部ファイルを読み込むことなく、ページのHTMLに貼り付けるだけで使えます。

この3つがあることで、コードにアイコンを直接組み込む開発者にも、FigmaやCanva、PowerPointですぐ使えるファイルが欲しいデザイナーにも対応できます。

よくある質問