Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

When enabled a preset margin will be added to the base of the tool. Foundry allows you to configure the Base Margin preset to your liking within the Control Center. The Base Margin can be configured independently at each of the 6 responsive breakpoints.

This setting provides the outer dimensions for your icon container. By default the outer dimensions are set to 48 x 48 px in size for all responsive breakpoints.

Clicking the small plus button above the Height & Width controls gives you settings for configuring the outer dimensions at each of the 6 responsive breakpoints.

When enabled the icons will have their individual widths set automatically. This feature takes the full width of the parent container and divides it by the number of icons included in your layout. This creates equally sized icon outer containers for each icon to have them fill out with full width of the parent item.

Here we choose the font-size for the icon itself. Much like with the Height & Width settings above for the outer container, clicking the small plus button above the Icon Size controls gives you settings for configuring the icon font size at each of the 6 responsive breakpoints.

Allows you to specify the unit of measure for sizing your icon font. The default is Root EM (rem).

In addition to aligning your icons left, right and center we've also included the ability to space them equally using the Space Between, Space Around and Space Evenly options. This can help you achieve different looks depending on your page's layout and the width of the parent container item.

Clicking the small plus button above the Alignment setting allows you to choose a different alignment type for your icons at each of the 6 responsive breakpoints, making them incredibly versatile.

This setting determins the gutter between your the outer dimensions of each icon.

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for this item. You're also provided an option to choose a custom one-off color as well.

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for this item. You're also provided an option to choose a custom one-off color as well.

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

This field allows you to replace the default HTML Comment with your own text.

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.

When enabled you're able to add a link to your individual icon.

Allows you to link to either an internal page or external site, or link to an anchor on the same page. Additionally further down in the settings you'll be able to opt to use the icon link as a toggle to trigger a Foundry Modal.

Here we provide a preset list of icons for you to choose from. Each of the libraries Foundry makes available have hundreds of icons to choose from, so we've not included them all in the preset list.

Because of this we've included a Custom option in the list where you can instead provide your own icon ID. You can look up icon IDs from their respective sites.

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the icon's outer container. You're also provided an option to choose a custom one-off color as well or a transparent background.

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the icon's outer container when hovered over by the visitor. You're also provided an option to choose a custom one-off color as well.

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the icon itself. You're also provided an option to choose a custom one-off color as well.

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the icon itself when hovered over. You're also provided an option to choose a custom one-off color as well.

We provide a quick way to add a subtle light gradient over our buttons when using Preset or Custom Styling modes. This simply includes a translucent white gradient over the button to give it a bit more depth.

Foundry provides 5 different presets for rounded corners. These can be found throughout Foundry's various tools. You're also able to remove the roundness of the corners by setting this to none, or provide your own custom value for the border radius, or rounded corners. When using Custom mode you can set a different value on each of the four corners.

Used to add a decorative shadow to the outer portion of the icon. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.

This setting can be used to apply a different shadow, or none at all, to the outer portion of the icon when the visitor hovers over the button on the page.

This feature allows us to use a Icon to trigger the opening of the Foundry Modal. This allows us to decouple the Modal from its trigger, which in this case is our Button, which gives us much greater control over our page's design and layout.

The Unique Modal ID you enter here should match the Unique ID you've setup in the Modal tool's settings. This allows the Button to know which Modal to terigger when your visitor clicks it. This ID links the two page elements together.

Here we can choose between having a simple Tooltip or a more advanced Popover added to our Icons. These elements appear when the visitor hovers over the Button. By default we have the Type set to None, which turns off this feature.

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.