Inline Icons Component

The Inline Icons component displays a row of trust badge icons, security badges, payment icons, or guarantee symbols to build customer confidence during checkout.

desc - Display trust badges, security icons, and guarantee symbols to build customer confidence.

Description

Display visual trust signals including security badges, payment methods, or guarantees. Upload custom icons or use automatically detected payment method icons. Clean horizontal layout that builds confidence without distracting from checkout flow.

Sample Use Cases

• Security Badges: Display security badges like "SSL Secure" or "Norton Secured"
• Guarantee Icons: Show guarantee icons like "30-Day Money Back" or "Free Returns"
• Trust Signals: Display trust signals like "Trusted by 10,000+ customers"

Display Rules

Supports advanced display rules for conditional rendering. See Display Rules System documentation for details.

Key Features

• Custom icon upload support
• Automatic payment icon detection
• Flexible alignment (left, center, right)
• Responsive sizing
• Localization support

Icon Types

Security Badges

Build trust with security certifications:

• SSL Secure
• Norton Secured
• McAfee Secure
• BBB Accredited
• TrustPilot

Guarantee Icons

Showcase your guarantees:

• 30-Day Money Back Guarantee
• Free Returns
• Lifetime Warranty
• Satisfaction Guaranteed
• Price Match Guarantee

Trust Signals

Display social proof and credentials:

• "10,000+ Happy Customers"
• "5-Star Reviews"
• "As Seen In" media logos
• Industry certifications
• Awards and recognition

Examples

Security & Trust Row

Icons:
1. SSL Secure badge
2. McAfee Secure badge
3. "10,000+ Customers" badge
4. "5-Star Rated" badge
Alignment: Center
Size: Medium

Guarantee Row

Icons:
1. "30-Day Money Back" icon
2. "Free Shipping" icon
3. "Secure Checkout" icon
Alignment: Center
Size: Large

Payment Methods

Icons:
1. Visa logo
2. Mastercard logo
3. American Express logo
4. PayPal logo
5. Apple Pay logo
Alignment: Left
Size: Small

Best Practices

Number of Icons

• Ideal: 3-5 icons
• Minimum: 2 icons (fewer lacks impact)
• Maximum: 7 icons (more creates clutter)

Icon Sizing

• Small: Best for 5+ icons or secondary placements
• Medium: Standard size, works well for 3-4 icons
• Large: Use for 2-3 prominent badges only

Icon Design

• Use consistent visual style across all icons
• Ensure icons are recognizable at small sizes
• Use high-resolution images (2x resolution for retina)
• Transparent backgrounds work best
• Square or slightly rectangular aspect ratios

Alignment

• Center: Most common, creates balanced look
• Left: Works well in sidebar or with left-aligned content
• Right: Use when aligning with right-side elements

File Specifications

• Format: PNG with transparency preferred
• Dimensions: 100-200px square recommended
• File size: Keep under 50KB each
• Resolution: 2x for retina displays

Placement Recommendations

Below Cart Summary

Common placement that builds confidence before payment:

[Cart Items]
[Subtotal]
[Inline Icons: SSL | Money Back | Free Returns]
---
[Proceed to Shipping]

Above Payment Section

Strategic placement when customers enter payment details:

[Shipping Information]
---
[Inline Icons: Secure Checkout | Trusted | Guaranteed]
[Payment Information]

Near Checkout Button

Final confidence boost before order completion:

[Cart Summary]
[Inline Icons: SSL Secure | Safe Payment | Money Back]
[Complete Order Button]

Automatic Payment Icon Detection

When using payment method icons, enable automatic detection to show only the payment methods you accept. Icons automatically update when you add or remove payment providers in Shopify.

For payment-specific icons, consider using the dedicated Payment Icons component.