Icon Grid

The grid can have up to 48 items and the number of items per row set for each device type. Since this is a CSS Grid layout, the item spacing can be easily adjusted using the "grid-gap" property and the items maintain equal height despite varying amounts of content.
Items
Each grid item is an HTML5 <figure> element and has an image, figcaption and text. The grid items can be created as a hyperlinks with a new window option if required.
Images
The images used in this example were created in Keynote, cropped to 128px square and then had the background removed in Preview.app to create round PNG icons. The images are centered and have a control for adjusting their size.
The images can be square/rectangular or round and can have padding and a border which can be solid, dashed or dotted. The border style can change on hover and a box shadow can be added to it.
Hover Animation
In addition to showing a different border style and a box shadow, the icons can have a scale on hover animation which is preset and is added by checking a box.
Text
The caption and description can use a web safe font or a non web safe or Google hosted font with a web safe fallback and there is a control for adjusting their vertical spacing.
Grid
The grid items have controls for border width, color and radius, left/right and top/bottom padding.
The grid has controls for adjusting the item spacing, left/right padding, background color and its opacity and for adjusting the vertical spacing from the items above and below.

A similar widget is available which adds a Google styles staggered slide up animation. Follow the link below to see it.