Zenn
🏠

【コピペあり】HTMLとCSSだけでアイコンつくる

2022/08/05に公開
CSS
HTML
#
アイコン
#
コーディング
tech

Font AwesomeやGoogle Fonts Iconsなど、アイコンを気軽に使えるサービスは増えてきました。

ただ、簡単なアイコンやアイコン1つだけのためにFont Awesomeを使うのもなんだかなーと思い、よく使いそうなアイコンをHTMLとCSSだけでつくるコードをまとめてみました。

HTMLとCSSでつくるアイコン

今回つくるHTMLとCSSでつくるアイコンはこんな感じです。

HTMLとCSSでつくるアイコン

共通のCSS

アイコンを複数使う際に、線幅とか色を共通で使いたいので、以下のように線幅と色を管理したいと思います。

:root {
	--icon-width: 4px;
	--icon-color: black;
}

矢印アイコン

ボタンやグローバルメニュー、アコーディオンメニューなどなど、汎用性抜群の矢印アイコン。
transform: rotate(XXdeg)を使って右向き、上向き、下向きなど角度を調整しています。

矢印アイコン

<i class="icon-arrow-right"></i>
<i class="icon-arrow-top"></i>
<i class="icon-arrow-bottom"></i>

.icon-arrow-right,
.icon-arrow-top,
.icon-arrow-bottom {
	display: inline-block;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	border-style: solid;
	border-width: var(--icon-width) var(--icon-width) 0 0;
	border-color: var(--icon-color);
	transform: rotate(45deg);
}
.icon-arrow-right {
	transform: rotate(45deg);
}
.icon-arrow-top {
	transform: rotate(-45deg);
}
.icon-arrow-bottom {
	transform: rotate(135deg);
}

3本線メニューのアイコン（ハンバーガーメニュー）

ハンバーガーメニューでよく使う3本線のメニューアイコン。
これに関してはスクラッチでつくる人のほうが多いとは思いますが、一応掲載しておきますー。

ハンバーガーメニューアイコン

<i class="icon-menu"></i>

.icon-menu {
	color: var(--icon-color);
	position: relative;
	margin: 10px 0;
}
.icon-menu,
.icon-menu:before,
.icon-menu:after {
	width: 24px;
	height: var(--icon-width);
	background-color: currentColor;
}
.icon-menu:before,
.icon-menu:after {
	content: "";
	position: absolute;
	left: 0;
}
.icon-menu:before {
	top: -8px;
}
.icon-menu:after {
	top: 8px;
}

ばつ印のアイコン

ハンバーガーメニューやアコーディオンメニューの閉じるボタンなどで使えるばつ印。
こちらもスクラッチでつくるか、&times;でばつ印をつくる人が多いとは思いますが、覚書として。

バツ印のアイコン

<i class="icon-close"></i>

.icon-close {
	color: var(--icon-color);
	width: 24px;
	height: 24px;
	position: relative;
}
.icon-close:before,
.icon-close:after {
	content: "";
	position: absolute;
	top: 12px;
	width: 24px;
	height: var(--icon-width);
	background-color: currentColor;
}
.icon-close:before {
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.icon-close:after {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

プラス・マイナスのアイコン

アコーディオンメニュー等で使うプラス・マイナスのアイコン。こちらも簡単にHTMLとCSSでつくれました。

プラス・マイナスのアイコン

マイナスアイコン

<i class="icon-minus"></i>

.icon-minus {
	color: var(--icon-color);
	width: 24px;
	height: var(--icon-width);
	background-color: currentColor;
}

プラスアイコン

<i class="icon-plus"></i>

.icon-plus {
	color: var(--icon-color);
	width: 24px;
	height: 24px;
	position: relative;
}
.icon-plus:before,
.icon-plus:after {
	content: "";
	position: absolute;
	top: 12px;
	width: 24px;
	height: var(--icon-width);
	background-color: currentColor;
}
.icon-plus:after {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}

チェックマークアイコン

リストの装飾や送信後メッセージ等で使えるチェックマーク。
こちらはbefore,after属性なしでつくれるので結構便利ですねー。

チェックマークアイコン

<i class="icon-check"></i>

.icon-check {
	color: var(--icon-color);
	width: 18px;
	height: 10px;
	border-bottom: solid var(--icon-width) currentColor;
	border-left: solid var(--icon-width) currentColor;
	transform: rotate(-45deg);
}

新しいタブで開くアイコン

リンクテキストやボタンで新しいタブで開くときによく使うアイコン。（正式名称あるのかな？）
こちらもHTMLとCSSで制作できます。

新しいタブで開くアイコン

<i class="icon-blank"></i>

.icon-blank {
	display: inline-block;
	box-sizing: border-box;
	position: relative;
	width: 20px;
	height: 16px;
}
.icon-blank:before,
.icon-blank:after {
	content: "";
	box-sizing: border-box;
	position: absolute;
	width: 100%;
	height: 100%;
	border-style: solid;
	border-color: var(--icon-color);
}
.icon-blank:before {
	top: 0;
	left: 0;
	border-width: var(--icon-width);
}
.icon-blank:after {
	top: 6px;
	left: 6px;
	border-width: 0 var(--icon-width) var(--icon-width) 0;
}

最後に

ということで、HTMLとCSSだけでつくるアイコンまとめでした。

このHTMLとCSSをカスタマイズして、3本線からバツ印にするアニメーション実装する等応用も効くのでぜひご活用ください。

ちなみにGoogle Fonts Iconsの導入・使い方・装飾などは以下記事でまとめています。
https://zenn.dev/yurukei20/articles/2b315c826be4d8

皆さんの参考になれば幸いです。
それでは。👋

Discussion