これが欲しかった！HTML/CSSのみで作られた矢印アイコンのスニペット

2018.11.24 2019.12.19

みなさん、こんにちは！

よくWebサイトで使用される矢印アイコンですがFont Awesomeで済ましてしまうことって多いじゃないですか。

でもサイトのテイスト的にもっと細いほうが良いとかがあったりして、結局自作する際に少々面倒……。

そんなときに活躍してくれそうなHTML5、CSS3のみで作成された矢印アイコンを今回はご紹介していこうと思います！

アニメーションも紹介していますのでこちらも同時に活用してみてくださいね。

【リッチなサイトへ】おしゃれなCSSアニメーションサンプル10選

HTML／CSSのみで作られた矢印アイコンまとめ

すべてCodePenからの引用になります。

よかったらご自身でも他のモノを探してみてはいかがでしょうか。

では早速紹介していきます！

ファーストビューがウインドウサイズいっぱいの時によく用いられるアイコン。

バウンスのアニメーション付きです！

ページ送り（ページネーション）などでよく使われる矢印アイコン。マウスホバーで色変換ありです。

細めなものをお探しの方むけです。

立体的で矢じりの形をしたボタンです。

パンくずリストなどでもこの形はしばしば見受けられます。

アクションを促せそうな形ですね。

とりあえずベーシックな矢印アイコンが欲しい人向け。

シンプル・イズ・ベスト

tooltipや会話風のデザインに使われる吹き出しタイプ。

これが意外と実装がめんどくさいので、残しておきたい一個。

あまり見かけないですが、いつか使うかもしれないという思いで紹介。

ボックス内に食い込むタイプのやつ。

ちょっとしたことでおしゃれに見えるのでおすすめ。