【UI】技術スタックをおしゃれに見せたい？「Skill Icons」が超便利！

はじめに

こんにちは。アメリカ在住で独学エンジニアを目指している Taira です。

ポートフォリオやGitHubのREADMEで、使用している技術スタックをアイコン付きでおしゃれに見せたいと思ったことはありませんか？

そんなときにおすすめなのが、
👉 Skill Icons です。

---

🎨 Skill Iconsとは？

「Skill Icons」は、よく使われるプログラミング言語・フレームワーク・ツールなどのSVGアイコンを無料で使えるGitHubリポジトリです。

---

💡 使用例

例えば以下のように記述することで、技術スタックをアイコン付きで表示できます。

![React](https://skillicons.dev/icons?i=react)
![TypeScript](https://skillicons.dev/icons?i=typescript)
![Ruby](https://skillicons.dev/icons?i=ruby)
![Rails](https://skillicons.dev/icons?i=rails)
![AWS](https://skillicons.dev/icons?i=aws)

⚙️ 使い方

使い方はとても簡単です！

✅ 1. 基本構文

https://skillicons.dev/icons?i=react

✅ 2. 複数のアイコンをまとめて表示

https://skillicons.dev/icons?i=react,typescript,rails,aws

✅ 3. HTMLタグでもOK

<img src="https://skillicons.dev/icons?i=react,typescript,rails,aws" />

MarkdownでもHTMLでも使えるので、QiitaやREADME、ポートフォリオサイトなどあらゆる場面で使えます。

---

🧠 利用できるアイコン一覧

• 言語：Ruby / Python / JavaScript / TypeScript / Go / Rust など
• フレームワーク：Rails / React / Next.js / Vue / Django / Laravel など
• ツール：Git / Docker / AWS / VSCode / Linux / Figma など

👉 一覧はこちらから確認できます

まとめ

私はポートフォリオサイトやGitHubのREADMEに利用していますが、
統一感が出て一気に見栄えが良くなりました。

「文字だけのスキル一覧が味気ないな…」と感じている方には本当におすすめです✨