【商用利用OK!】【Free vector icons】で、アイコン素材を使ってみよう!

Technology
スポンサーリンク

みなさんこんにちは!おさかなです!

今回は「Free vector icons」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・商用利用できるアイコンを使いたい方
・色付きのアイコンを使用したい方
・フリーアイコン素材を探してる方

アイコン素材の幅を広げたい!

おさかな
おさかな

う~ん、色付きのアイコンとか使いたいなあ~。

ナビまる
ナビまる

(おさかな、また考えてることが口に出てるぞ…。)
なら、これ使ってみれば?

おさかな
おさかな

ナッ、ナビまる!!

【Google】が提供する「Material Icons(マテリアルアイコン)」って何?使い方・手順を徹底解説!
みなさんこんにちは!おさかなです! 今回は「Material Icons(マテリアルアイコン)」について、書いていこうと思います! それでは、レッツゴー!!!!! 想定読者 ・手軽にアイコンを使用したい方 ・Web制作・デ...

「Free vector icons」って何?

Free vector icons」とは、商用利用OKの「ベクターアイコン」を使うことができるサービスです。
マテリアルアイコンや、fontawesomeなどと違った特徴は「カラー付アイコン」を取り扱っているところや、アイコンを「PSDデータ」として保存できるところなど今までにないものが沢山あります!


利用する場合クレジット表記は必要ですが、それでもデザインの幅を広げられそうです。(すごい!)

↓こんな感じのアイコンが沢山使えます!

Flaticon, the largest database of free vector icons
Download all icons in SVG, PSD, PNG, EPS format or as webfonts
【HTML/CSS】「textarea」のサイズを「固定」する方法をわかりやすく解説!【画像付き】
みなさんこんにちは!おさかなです!今回は「<textarea>のサイズを「固定」する方法」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・<textarea>タグの...

実際につかってみよう!

アイコンを選択しよう!

それでは早速、サイトにアクセスしてみましょう!

こちらの検索ボックスから、使いたいアイコンを検索することができます!(うんうん!)

いい感じのアイコンセットを見つけたら、クリックしましょう!(よいしょっ!)

今回は無料版で、Webサービスなどのボタンに使えそうなアイコンを選択してみました!

すると、このようなページに遷移します。

アイコンをダウンロードするには、右上にある「Register Download」という緑色のボタンをクリックしましょう!


(※この時点でアカウント作成が、まだの方は登録しておきましょう!)

(もうちょっと…!🍫)

ダウンロードしよう!

このようなウィンドウが表示されたら、次に、右側の「Free Download」という緑色のボタンをクリックします。(ポチっと)

zip形式のフォルダがダウンロードされたら、解凍して、このようになればOKです!

ちなみに無料版では「クレジット表記」が必須なので、この画面が出てきたら消さずに一旦ストップ!
SNSで拡散、または右側の「Copy link」をクリックして、アイコンを使用するサービスに貼り付けておきましょう!

ちなみに「Copy link」は<div>というHTMLタグなので、<body></body>の間に貼り付けておきましょう!

↓コピーを忘れた方はこちらをご活用ください。

<div>Icons made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>

↓こんな感じで表示されるよ!

アイコンを使ってみよう!

ということで!
実際にダウンロードしたアイコンを挿入してみました!(どうですか~?)

Icons made by Freepik from www.flaticon.com

色付きかつ立体的なので、迫力が違いますね!!(すごい!)
みなさんも是非アイコンを沢山活用して、すてきなサービスを作ってみてはいかがでしょうか?

これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました!

当サイトを気に入っていただけましたら、匿名OK!15円から!のサポート支援に是非!ご協力をお願いいたします!
ご支援いただいたものは、「プログラム関連の書籍」や「新しいWebサービス」などから知見を得るために活用させていただきます。✨

※「受け取り人メールアドレス」には「osakana1699@gmail.com」を入力してください。

おさかな

文章が書けちゃう、新種のおさかなです。

元不登校。引っ越し以外の理由で3回も転校したのに、結局中卒。
現在はマイペースに「プログラム」書いたり、「作曲」したり「文章」書いたり色々してます。
SAOのユウキが好きです!

おさかなをフォローする

この記事は役に立ちましたか?

タイトルとURLをコピーしました