LoginSignup
13

More than 3 years have passed since last update.

プログラミング言語やツールのアイコン集「Devicon」のススメ

Posted at

この記事について

この記事は、aslead Agileの開発チーム「オキザリス」にて行っているアウトプット企画である
チーム「オキザリス」Advent Calendar」の21日目の記事です。

言語やツールのアイコンを使いたい!

勉強会や学会の資料、ポートフォリオサイトのスキル紹介などなど...
プログラミング言語やフレームワーク、ツールのアイコンを入れたい場面って結構あると思います。
そんな時に、学生の頃に友人に教えてもらった Devicon がかなり役に立ってくれているので、ご紹介しようと思います。

Devicon

Screenshot 2020-12-21 0.30.58.png

Deviconはプログラミング言語やフレームワーク、各種エディタやブラウザ等のツールのアイコン集です。
アイコンはMITライセンスで公開されています。1

アイコンには複数バージョンが用意されていて、オリジナルのデザインのものだけでなく、
線画バージョン、モノクロバージョン、言語やツールの名前入りバージョンなんかも用意されています。

Screenshot 2020-12-21 1.06.12.png

例えばDockerだと、
色の塗り方のパターンが少し違ったり、名前あり/なしバージョンが用意されていたり、

Screenshot 2020-12-21 0.42.31.png

Gopherくんだと、水色、まっしろ、まっくろ、線画バージョンがあったり。

Screenshot 2020-12-21 1.14.52.png

Jetbrainsも結構いろんなパターンが用意されていたり。なお筆者は目が悪いので違いがあまりわからず...

このDeviconでは、フォント形式とSVG形式の2種類が用意されていて、
使いたいアイコンをクリックするだけで、コードスニペットが入手できます。


<!-- in your header -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@master/devicon.min.css">

<!-- in your body -->
<i class="devicon-atom-original"></i>

こちらはフォント形式版のスニペット。親切にヘッダ用のタグも書いておいてくれてますね。

シンプルに画像として保存して使いたい人は、SVG形式のアイコンを右クリックして保存すればOKです。

Screenshot 2020-12-21 1.17.41.png

SVG形式だと、アイコン拡大しても画像がざらざらにならず、綺麗に見えるので嬉しい。
アイコン画像、検索して出てきた画像だとちょっと小さくて、拡大すると汚く見えちゃう...ということも多々あったんですが、
Deviconに出会ってSVG形式でダウンロードできるようになってからはそのお悩みも無事に解消されました。

おわりに

いかがでしたでしょうか。
アイコン探しで苦労されている方、是非Deviconをお試ししてみてください。


  1. リポジトリはこちら 

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13