パソコンは３カラム、スマホでは１カラムのアイコンを使ったパターン

 
カラムwidthの設定はなしの３分割。スマホレイアウトでは１列表示。シンプルなアイコンをSiGNで作る丸枠の中に読み込み、丸枠にはsignで影をつけています。
SiGNで作成した枠にアイコンを読み込んでフィット表示。マウスオーバーの動きはcssで設定。
 

features_003a

マウスオーバーでアイコンが少しだけ上に動くアクションをCSSで設定しています。
アイコンのサイズは190px
 

features_003b

色のあるシェイプの中に白の透過アイコンを乗せたパターン。
アクション設定なし。
 

features_003c

メインカラーで作成したアイコンを使用したパターン。
マウスオーバーでアイコンが少しだけ上に動くアクションをCSSで設定しています。
 
 

高解像度ディスプレイではアイコンやロゴのようなものがぼやっとした感じになることがあり、その対策として実際に配置するサイズの倍のサイズで作成することを推奨しているブログなどをよく見かけます。
例えば、200pxの幅にアイコンを使いたいとき、アイコンの画像は400pxで作成し、ブロックエディタで配置した画像の出力サイズで200pxと指定します。
MACやiPhoneなどのRetinaディスプレイでも鮮明に表示させたい時にはこのような対応が必要になりますが、そうするとファイルサイズは当然その分大きくなるため、注意しながら作成しましょう。