Icon Element

The Icon element displays Font Awesome icons. Use icons to enhance visual communication, add branding, and improve user experience.

Overview

Property	Value
Element Type	icon
Can Contain Children	No
Icon Library	Font Awesome 6

Use Cases

• Feature indicators
• Visual accents
• Social media links
• Navigation hints
• Status indicators
• Decorative elements

Content Settings

Icon Selection

Choose from Font Awesome 6 icons:

Icon Styles:

Style	Description	Example
Solid	Filled icons	fa-solid fa-star
Regular	Outlined icons	fa-regular fa-star
Brands	Brand logos	fa-brands fa-github

Popular Icons:

• check — Checkmark
• star — Star
• heart — Heart
• arrow-right — Arrow
• envelope — Email
• phone — Phone
• location-dot — Location
• clock — Time
• user — User
• gift — Gift/offer

Icon Link

Make the icon clickable:

Property	Description
URL	Link destination
Target	Same window or new window

Size Settings

Icon Size

Set the icon size:

Preset	Size
Extra Small	12px
Small	16px
Medium	24px
Large	32px
Extra Large	48px
Custom	Any pixel value

Responsive Sizing

Use device-specific sizes for optimal display across screens.

Color Settings

Icon Color

Set the icon color:

Color: #4F46E5

Common approaches:

• Brand color for consistency
• High contrast for visibility
• Muted for subtle accents

Hover Color

Color when mouse hovers (for linked icons):

Hover Color: #4338CA

Background Settings

Background Shape

Add a background shape:

Shape	Description
None	No background
Circle	Circular background
Square	Square background
Rounded Square	Rounded corners

Background Color

Fill color for the shape:

Background: #EEF2FF

Background Size

Size of the background shape relative to icon.

Border Settings

Border

Add border around icon or background:

Property	Description
Width	Border thickness
Color	Border color
Style	Solid, dashed, dotted

Border Radius

For custom corner rounding.

Effects

Shadow

Add shadow to icon or background:

Shadow: 0 2px 4px rgba(0,0,0,0.1)

Rotation

Rotate the icon:

Value	Result
0deg	Normal
90deg	Rotated right
180deg	Upside down
-90deg	Rotated left

Animation

Animate the icon:

Animation	Description
None	Static
Spin	Continuous rotation
Pulse	Pulsing effect
Beat	Heartbeat effect
Bounce	Bouncing effect

Layout Settings

Alignment

Position the icon:

Option	Description
Left	Align to left
Center	Center horizontally
Right	Align to right

Margin

Space around the icon.

Padding

Space inside icon container.

Advanced Settings

HTML ID

Custom ID for targeting.

CSS Classes

Add Font Awesome modifier classes:

Class	Effect
fa-flip-horizontal	Flip horizontally
fa-flip-vertical	Flip vertically
fa-rotate-90	Rotate 90°
fa-fw	Fixed width

Examples

Feature Checkmark

Icon: fa-solid fa-check

Settings:

• Size: 20px
• Color: #22c55e (green)
• Background: Circle
• Background Color: #dcfce7
• Background Size: 32px

Social Media Icon

Icon: fa-brands fa-twitter

Settings:

• Size: 24px
• Color: #1da1f2
• Link: https://twitter.com/...
• Target: New Window
• Hover Color: #0d8bd9

Notification Bell

Icon: fa-solid fa-bell

Settings:

• Size: 18px
• Color: #f59e0b
• Animation: Bounce

Arrow Indicator

Icon: fa-solid fa-arrow-right

Settings:

• Size: 14px
• Color: #4F46E5
• Margin Left: 8px (inline with text)

Close X Icon

Icon: fa-solid fa-xmark

Settings:

• Size: 16px
• Color: #64748b
• Hover Color: #334155
• Link: (Close Popup action)

Icon + Text Patterns

Feature List Item

✓ Unlimited popups

Layout:

1. Icon (checkmark)
2. Text element

Social Links Row

[Twitter] [Facebook] [Instagram]

Layout: Section with columns, icon in each.

Best Practices

1. Consistent sizing — Use same size for related icons
2. Meaningful icons — Icons should aid understanding
3. Color harmony — Match your design palette
4. Touch targets — Make clickable icons at least 44px
5. Accessibility — Add aria-label for screen readers
6. Don't overuse — Icons should enhance, not clutter

Finding Icons

Browse Font Awesome icons at fontawesome.com/icons

Search tips:

• Use descriptive terms
• Check different styles (solid, regular, brands)
• Preview at your target size

Related Elements

• Button — Buttons with icons
• Text — Text alongside icons
• Image — For custom graphics