お気に入り・共有・メニューなどのアイコンボタン。44pxのタップ領域とaria-labelで、小さく見えても押しやすく意味が伝わるボタンにします。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
アイコンだけのボタンで最も大事なのはCSSではなくaria-labelです。視覚的なラベルがない分、ボタンの意味はここでしか伝わりません。サイズはWCAGのターゲットサイズ推奨に合わせて44px四方を確保し、アイコンは display: grid + place-items: center で正確に中央へ置きます。
絵文字ではなくSVGアイコンを使う場合は、svg側にaria-hidden="true"を付けてボタンのaria-labelに一本化します。
アイコンのみのボタンを3つ並べたツールバーを作ってください。各ボタンは44px四方、aria-labelで意味を伝え、display: gridで中央配置、hoverとfocus-visibleのスタイルも付けてください。