An Icon Link is a link with a small icon beside its label, such as an envelope before "Write to us". It can also show the icon alone. Use it where a Button would be too loud: a row of contact links, a link under a card, or a link in a footer.
You can add an Icon Link to a Section, a Post Content section or a Dialog section, and inside a Collection, a Group, a No Results block or a Paywall. In the block picker it sits under Content. For links to your social accounts, use Social Links, which reads them from Ghost. To put several Icon Links side by side, place them in a Group set to Row. Click it on the canvas to select it. Its settings open in the right sidebar, where "the + menu" in the tables below is the + beside the name of a group of settings, such as General.
Variant
Setting
What it does
Variant
The look: Plain (the default) is the icon and the label alone. Filled puts them in a light grey box, and Outline in a box with a thin border.
The variants come from the Icon Link entry in the Blocks panel. The variants Filled and Outline draw a box around the whole link, while Icon style under Appearance draws a circle around the icon alone. To change how every Plain Icon Link in the project looks, click the arrow beside the block's name at the top of the settings panel and select Edit block. How block variants and formats work explains variants.
General
Setting
What it does
Link URL
Where the link goes: a page of your site such as /about, a part of the page such as #contact, another site such as https://example.com, an email address such as mailto:hello@example.com, or a phone number such as tel:+15550100.
Open in new tab
Opens the link in a new browser tab. Add it from the + menu beside General. Links to other sites already open in a new tab while Open external links in a new tab is on in Project settings › Features, as it is by default.
Icon
The icon. Click it to pick one from the Library tab of the icon picker, or paste your own SVG under Custom SVG. The default is a chain link.
Label
The link's text. The default is "Link".
Show icon
On by default. Turn it off for a text link.
Show label
On by default. Turn it off to show the icon alone. Screen readers still read the Label, so fill it in anyway.
Icon size
How large the icon is next to the text: XS, S, M (the default), L or XL, or a length you enter, such as 20px.
Circle padding
Applies when Icon style is not Plain. The room around the icon inside its circle: XS to XL, or a length. Empty, it follows the Icon size.
Show icon and Show label can't both be off. While one is off, the other switch is locked on.
Appearance
Setting
What it does
Icon style
A circle around the icon. Plain (the default) has none. Filled is a circle in the text color, with the icon in the background color. Tinted is a pale circle in the text color. Outline is a ring in the text color. Filled Muted is a light grey circle. Outline Muted is a light grey ring. Dark is a dark circle with a white icon, for links over a photo.
The group also holds Border, Corners and Shadow. Under Colors, Text color sets the color of the label and the icon: Default (the color of the fill or the text around it), Foreground, Muted, Primary, Accent, White, Black or Custom. Colors and appearance settings describes them, and the Background and Gradient under Colors.
Typography and spacing
The Typography group sets the label's Size, Weight and Style, as Typography settings describes. Under Spacing, Gap is the space between the icon and the label, Tiny (8 px) by default, and Padding is the room inside a Filled or Outline box. Margin comes from the + menu.
An Icon Link is a link with a small icon beside its label, such as an envelope before "Write to us". It can also show the icon alone. Use it where a Button would be too loud: a row of contact links, a link under a card, or a link in a footer.
You can add an Icon Link to a Section, a Post Content section or a Dialog section, and inside a Collection, a Group, a No Results block or a Paywall. In the block picker it sits under Content. For links to your social accounts, use Social Links, which reads them from Ghost. To put several Icon Links side by side, place them in a Group set to Row. Click it on the canvas to select it. Its settings open in the right sidebar, where "the + menu" in the tables below is the + beside the name of a group of settings, such as General.
Variant
The variants come from the Icon Link entry in the Blocks panel. The variants Filled and Outline draw a box around the whole link, while Icon style under Appearance draws a circle around the icon alone. To change how every Plain Icon Link in the project looks, click the arrow beside the block's name at the top of the settings panel and select Edit block. How block variants and formats work explains variants.
General
/about, a part of the page such as#contact, another site such ashttps://example.com, an email address such asmailto:hello@example.com, or a phone number such astel:+15550100.20px.Show icon and Show label can't both be off. While one is off, the other switch is locked on.
Appearance
The group also holds Border, Corners and Shadow. Under Colors, Text color sets the color of the label and the icon: Default (the color of the fill or the text around it), Foreground, Muted, Primary, Accent, White, Black or Custom. Colors and appearance settings describes them, and the Background and Gradient under Colors.
Typography and spacing
The Typography group sets the label's Size, Weight and Style, as Typography settings describes. Under Spacing, Gap is the space between the icon and the label, Tiny (8 px) by default, and Padding is the room inside a Filled or Outline box. Margin comes from the + menu.
An Icon Link also has Width from Layout settings, and the Display settings and Advanced settings of every block.