Icon
Role: All editing roles
Add icons with an optional link. Ideal to add social media icons to a site footer.
Related information
How to edit
Getting started
- Add Component > choose Icon
- Search for an icon. For example: house
- Name of the Font Awesome Icon. See the Font Awesome icon list for valid icon names, or begin typing for an autocomplete list. Note that all four versions of the icon will be shown - Light, Regular, Solid, Duotone, and Thin respectively. If the icon shows a question mark, that icon version is not supported in your version of Fontawesome
- Note: Fresco is transitioning from Font Awesome to Material UI icons
- Optionally enter text to appear alongside the icon. For example: About us
- Text limited to 50 characters
- Choose whether to show the icon Before or After the text
- Add an optional link
- Start typing to find content or paste a URL
- Select from the search results
- The /node/ value of your linked site's content populates the field
- Style: Solid (default), Regular, Kit Uploads
- This changes the style of the icon. Please note that this is not available for all icons, and for some of the icons this is only available in the pro version. If the icon does not render properly in the , the icon does not support that style. Notably, brands do not support any styles. See the Font Awesome icon list for more information
- Icon set: Classic (default), Sharp
- Choose the Font Awesome icon set
- Size: Default, Extra Small, Small, Large, 2x-10x
- This increases icon sizes relative to their container
- Optionally, toggle on Fixed Width
- Use to set icons at a fixed width. Great to use when different icon widths throw off vertical alignment. Especially useful in things like nav lists and list groups
- Optionally, toggle on Border
- Adds a border to the icon
- Optionally, toggle on Invert color
- Inverts the colour of the icon (black becomes white, etc)
- Animation: None (default), Spin, Pulse
- Use spin to get any icon to rotate, and pulse to have it rotate with 8 steps. Works especially well with fa-spinner & everything in the spinner icons category
- Pull: None (default), Left, Right
- This setting will pull the icon (float) to one side or the other in relation to its nearby content
- Additional Classes:
- Use space separated classes for additional manual icon tagging/settings
- Masking is used to combine two icons to create one single-color shape. Use it with Power Transforms for some really awesome effects. Masks are great when you do want your background color to show through. See the Font Awesome guide to masking for more information. Note that masking only works with the SVG version of Font Awesome
- Search for fa- Icon name and select Style
- See the Font Awesome `How to use` guide for additional information on Power Transforms. Note that these transforms only work with the SVG with JS version of Font Awesome and are disabled for Webfonts. See the admin page to set your version of Font Awesome
- Rotate: add number of degrees
- Power Transform rotating effects icon angle without changing or moving the container. To rotate icons use any arbitrary value. Units are degrees with negative numbers allowed
- Optionally, toggle on Flip Horizontal
- Power Transform flipping effects icon reflection without changing or moving the container
- Optionally, toggle on Flip Vertical
- Power Transform flipping effects icon reflection without changing or moving the container
- Scale:
- Power Transform scaling effects icon size without changing or moving the container. This field will scale icons up or down with any arbitrary value, including decimals. Units are 1/16em
- Scale type: None (default)
- Enter Scale Value
- Position (Y Axis):
- Power Transform positioning effects icon location without changing or moving the container. This field will move icons up or down with any arbitrary value, including decimals. Units are 1/16em
- Position type: None (default)
- Enter Position Value
- Position (X Axis):
- Power Transform positioning effects icon location without changing or moving the container. This field will move icons up or down with any arbitrary value, including decimals. Units are 1/16em
- Position type: None (default)
- Enter Position Value
Changes may have been made to enhance this feature since we last updated this page. See What’s new for the latest release information.
Last updated: 2 April 2026