Icon Block

Flexible styling options and more than 100 custom icons available with new ones being added regularly.

Settings

This section will help you configure the block. Let’s check out the available options.

  1. Icon: Use the dropdown to find and select your desired icon.
  2. View: Choose between default, stacked (rounded container with solid background) or framed (square container with border).
  3. Icon Size: Set the size of the icon.
  4. Alignment: Choose the alignment of the icon, available options are left, center and right.

The Shape and Padding options are made available when a view is selected to control the shape of the icon’s background and its padding. Furthermore when the Framed view is selected a Border Size option is available to control the width of the border.

Notice that the Icon Size option has three icons next to the label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the control’s values for each device.


Block Appearance

Under the block appearance tab you can control how the block looks. Let’s check out the options.

  1. Primary Color: This option allows you to set the primary icon color.
  2. Secondary Color: This option controls the icon’s secondary color (visible only when a View is selected).
  3. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
  4. Padding: With this option you can control the padding on each side of the block individually or all at once.
  5. Margin: With this option you can control the margin on each side of the block individually or all at once.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.


Visibility Settings

Via the Visibility Settings you can hide the block for certain type of device or user.

The Viewport visibility toggles allow you to hide the block on desktops, tablets and mobiles. You can choose to hide it on more than one device type.

The Authentication visibility toggles allow you to display the block only to logged in or logged out users.