[box type="custom-boxed-item" align="center" text_align="textcenter"]
[fancy_header tag="h4" size="medium" text_align="textcenter" bold="1" margin_bottom="25"]What's this?[/fancy_header]
[icon icon="far fa-comments" color="style-dark" animation="bounceIn" animation_delay="600"]
[icon icon="far fa-hand-peace" color="style-dark" animation="bounceIn" animation_delay="300"]
[icon icon="far fa-eye" color="style-dark" animation="bounceIn" animation_delay="600"]
[icon icon="far fa-paper-plane" color="style-dark" animation="bounceIn" animation_delay="900"]
[icon icon="far fa-heart" color="style-dark" animation="bounceIn" animation_delay="1200"]
[icon icon="far fa-grin-tongue-squint" color="style-dark" animation="bounceIn" animation_delay="1500"]
[icon icon="far fa-check-circle" color="style-dark" animation="bounceIn" animation_delay="1800"]
[icon icon="far fa-user-circle" color="style-dark" animation="bounceIn" animation_delay="2100"]
[icon icon="fas fa-shield-heart" color="style-dark" animation="bounceIn" animation_delay="2400"]
[icon icon="fas fa-bitcoin-sign" color="style-dark" animation="bounceIn" animation_delay="2700"]
[icon icon="fas fa-apple-alt" color="style-dark" animation="bounceIn" animation_delay="3000"]
[icon icon="fas fa-burn" color="style-dark" animation="bounceIn" animation_delay="3300"]
[icon icon="fas fa-cloud-sun" color="style-dark" animation="bounceIn" animation_delay="3600"]
[icon icon="fas fa-basketball-ball" color="style-dark" animation="bounceIn" animation_delay="3900"]
[icon icon="fas fa-credit-card" color="style-dark" animation="bounceIn" animation_delay="4200"]
[icon icon="fas fa-sms" color="style-dark" animation="bounceIn" animation_delay="4500"]
[icon icon="fab fa-cc-visa" color="style-dark" animation="bounceIn" animation_delay="4800"]
[icon icon="fab fa-mailchimp" color="style-dark" animation="bounceIn" animation_delay="5100"]
[icon icon="fab fa-apple" color="style-dark" animation="bounceIn" animation_delay="5400"]
[icon icon="fab fa-tiktok" color="style-dark" animation="bounceIn" animation_delay="5700"]
[section_break type="blank" margin_bottom="-5" margin_bottom="-5" /]
React has over [b]1000[/b] retina ready icons. Wow, that's a lot of icons at your fingertips. Use the Icon shortcode to add them in the size, color and shape you want. Here are some examples.
[icon icon="fas fa-arrow-down" font_size="15" boxed="1" description="See examples below" position="center" margin_top="20px" margin_bottom="-40px" link="#content" class="infinite wobble"]
[/box]
[section_break type="blank" margin_bottom="40" /]
[tabs layout="vertical" convert="cvt-phone-ldsp"]
[tab title="Font icons"]
[fancy_header bold="1" type="style1"]FontAwsome[/fancy_header]
[icon icon="fas fa-coffee" font_size="10"]
[icon icon="fas fa-coffee" font_size="15"]
[icon icon="fas fa-coffee" font_size="20"]
[icon icon="fas fa-coffee" font_size="25"]
[icon icon="fas fa-coffee" font_size="30"]
[icon icon="fas fa-coffee" font_size="35"]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[icon icon="fas fa-coffee" font_size="25"]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" type="style1" margin_top="50"]Add Animations[/fancy_header]
[icon icon="fas fa-check" font_size="10" animation="flipInX" animation_delay="200"]
[icon icon="fas fa-check" font_size="15" animation="flipInX" animation_delay="300"]
[icon icon="fas fa-check" font_size="20" animation="flipInX" animation_delay="400"]
[icon icon="fas fa-check" font_size="25" animation="flipInX" animation_delay="500"]
[icon icon="fas fa-check" font_size="30" animation="flipInX" animation_delay="600"]
[icon icon="fas fa-check" font_size="35" animation="flipInX" animation_delay="700"]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[icon icon="fas fa-check" font_size="35" animation="flipInX" animation_delay="700"]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" type="style1" margin_top="50"]Add a Description[/fancy_header]
[icon description="Description" icon="fas fa-envelope" font_size="35"]
[icon description="Description" icon="fas fa-envelope" font_size="30"]
[icon description="Description" icon="fas fa-envelope" font_size="25"]
[icon description="Description" icon="fas fa-envelope" font_size="20"]
[icon description="Description" icon="fas fa-envelope" font_size="15"]
[icon description="Description" icon="fas fa-envelope" font_size="10"]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[icon description="Description" icon="fas fa-envelope" font_size="10"]
[/accordion_toggle]
[/accordion]
[/tab]
[tab title="Font icons Boxed"]
[fancy_header bold="1" type="style1"]Boxed[/fancy_header]
[icon boxed="1" icon="fas fa-coffee" font_size="10"]
[icon boxed="1" icon="fas fa-coffee" font_size="15"]
[icon boxed="1" icon="fas fa-coffee" font_size="20"]
[icon boxed="1" icon="fas fa-coffee" font_size="25"]
[icon boxed="1" icon="fas fa-coffee" font_size="30"]
[icon boxed="1" icon="fas fa-coffee" font_size="35"]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[icon boxed="1" icon="fas fa-coffee" font_size="25"]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" type="style1" margin_top="50"]Hollow[/fancy_header]
[icon icon="fas fa-coffee" font_size="10" boxed="1" hollow="1" background_animation="hvr-shutter-out-horizontal"]
[icon boxed="1" icon="fas fa-coffee" font_size="15" hollow="1" background_animation="hvr-shutter-out-horizontal"]
[icon boxed="1" icon="fas fa-coffee" font_size="20" hollow="1" background_animation="hvr-shutter-out-horizontal"]
[icon boxed="1" icon="fas fa-coffee" font_size="25" hollow="1" background_animation="hvr-shutter-out-horizontal"]
[icon boxed="1" icon="fas fa-coffee" font_size="30" hollow="1" background_animation="hvr-shutter-out-horizontal"]
[icon boxed="1" icon="fas fa-coffee" font_size="35" hollow="1" background_animation="hvr-shutter-out-horizontal"]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[icon boxed="1" icon="fas fa-coffee" font_size="25" hollow="1" background_animation="hvr-shutter-out-horizontal"]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" type="style1" margin_top="50"]Round[/fancy_header]
[icon icon="fas fa-coffee" font_size="10" boxed="1" round="1"]
[icon boxed="1" icon="fas fa-coffee" font_size="15" round="1"]
[icon boxed="1" icon="fas fa-coffee" font_size="20" round="1"]
[icon boxed="1" icon="fas fa-coffee" font_size="25" round="1"]
[icon boxed="1" icon="fas fa-coffee" font_size="30" round="1"]
[icon boxed="1" icon="fas fa-coffee" font_size="35" round="1"]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[icon boxed="1" icon="fas fa-coffee" font_size="25" round="1"]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" type="style1" margin_top="50"]Add Gradient[/fancy_header]
[icon boxed="1" gradient="gradient" icon="fas fa-paper-plane" font_size="35"]
[icon boxed="1" gradient="gradient" icon="fas fa-paper-plane" font_size="30"]
[icon boxed="1" gradient="gradient" icon="fas fa-paper-plane" font_size="25"]
[icon boxed="1" gradient="gradient" icon="fas fa-paper-plane" font_size="20"]
[icon boxed="1" gradient="gradient" icon="fas fa-paper-plane" font_size="15"]
[icon boxed="1" gradient="gradient" icon="fas fa-paper-plane" font_size="10"]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[icon boxed="1" gradient="gradient" icon="fas fa-paper-plane" font_size="25"]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" type="style1" margin_top="50"]Add Animations[/fancy_header]
[icon boxed="1" icon="fas fa-check" font_size="10" animation="flipInX" animation_delay="200"]
[icon boxed="1" icon="fas fa-check" font_size="15" animation="flipInX" animation_delay="300"]
[icon boxed="1" icon="fas fa-check" font_size="20" animation="flipInX" animation_delay="400"]
[icon boxed="1" icon="fas fa-check" font_size="25" animation="flipInX" animation_delay="500"]
[icon boxed="1" icon="fas fa-check" font_size="30" animation="flipInX" animation_delay="600"]
[icon boxed="1" icon="fas fa-check" font_size="35" animation="flipInX" animation_delay="700"]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[icon boxed="1" icon="fas fa-check" font_size="35" animation="flipInX" animation_delay="700"]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" type="style1" margin_top="50"]Add a Description[/fancy_header]
[icon boxed="1" description="Description" icon="fas fa-envelope" font_size="35"]
[icon boxed="1" description="Description" icon="fas fa-envelope" font_size="30"]
[icon boxed="1" description="Description" icon="fas fa-envelope" font_size="25"]
[icon boxed="1" description="Description" icon="fas fa-envelope" font_size="20"]
[icon boxed="1" description="Description" icon="fas fa-envelope" font_size="15"]
[icon boxed="1" description="Description" icon="fas fa-envelope" font_size="10"]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[icon boxed="1" description="Description" icon="fas fa-envelope" font_size="10"]
[/accordion_toggle]
[/accordion]
[/tab]
[tab title="IconSweets"]
[fancy_header bold="1" type="style1"]Small[/fancy_header]
[icon icon="home"]
[icon icon="pen"]
[icon icon="image"]
[icon icon="music"]
[icon icon="bullhorn"]
[icon icon="tag"]
[icon icon="pushpin"]
[icon icon="bubbles"]
[icon icon="earth"]
[icon icon="fas facebook"]
[icon icon="heart"]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[icon icon="heart"]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" type="style1" margin_top="50"]Medium[/fancy_header]
[icon size_image="med" icon="home"]
[icon size_image="med" icon="pen"]
[icon size_image="med" icon="image"]
[icon size_image="med" icon="music"]
[icon size_image="med" icon="bullhorn"]
[icon size_image="med" icon="tag"]
[icon size_image="med" icon="pushpin"]
[icon size_image="med" icon="bubbles"]
[icon size_image="med" icon="earth"]
[icon size_image="med" icon="fas facebook"]
[icon size_image="med" icon="heart"]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[icon size_image="med" icon="heart"]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" type="style1" margin_top="50"]Large[/fancy_header]
[icon size_image="lrg" icon="home"]
[icon size_image="lrg" icon="pen"]
[icon size_image="lrg" icon="image"]
[icon size_image="lrg" icon="music"]
[icon size_image="lrg" icon="bullhorn"]
[icon size_image="lrg" icon="tag"]
[icon size_image="lrg" icon="heart"]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[icon size_image="lrg" icon="heart"]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" type="style1" margin_top="50"]Add animation[/fancy_header]
[icon size_image="med" icon="home" animation="fadeIn" animation_delay="200"]
[icon size_image="med" icon="pen" animation="fadeIn" animation_delay="300"]
[icon size_image="med" icon="image" animation="fadeIn" animation_delay="400"]
[icon size_image="med" icon="music" animation="fadeIn" animation_delay="500"]
[icon size_image="med" icon="bullhorn" animation="fadeIn" animation_delay="600"]
[icon size_image="med" icon="tag" animation="fadeIn" animation_delay="700"]
[icon size_image="med" icon="pushpin" animation="fadeIn" animation_delay="800"]
[icon size_image="med" icon="bubbles" animation="fadeIn" animation_delay="900"]
[icon size_image="med" icon="earth" animation="fadeIn" animation_delay="1000"]
[icon size_image="med" icon="fas facebook" animation="fadeIn" animation_delay="1100"]
[icon size_image="med" icon="heart" animation="fadeIn" animation_delay="1200"]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[icon size_image="med" icon="heart" animation="flipInX" animation_delay="200"]
[/accordion_toggle]
[/accordion]
[fancy_header bold="1" type="style1" margin_top="50"]Boxed[/fancy_header]
[icon boxed="1" style_image="lgt" size_image="med" icon="home"]
[icon boxed="1" style_image="lgt" size_image="med" icon="pen"]
[icon boxed="1" style_image="lgt" size_image="med" icon="image"]
[icon boxed="1" style_image="lgt" size_image="med" icon="music"]
[icon boxed="1" style_image="lgt" size_image="med" icon="bullhorn"]
[icon boxed="1" style_image="lgt" size_image="med" icon="tag"]
[icon boxed="1" style_image="lgt" size_image="med" icon="pushpin"]
[icon boxed="1" style_image="lgt" size_image="med" icon="bubbles"]
[icon boxed="1" style_image="lgt" size_image="med" icon="earth"]
[icon boxed="1" style_image="lgt" size_image="med" icon="fas facebook"]
[icon boxed="1" style_image="lgt" size_image="med" icon="heart"]
[accordion style="plain"]
[accordion_toggle title="Get code"]
[icon boxed="1" size_image="med" icon="heart"]
[/accordion_toggle]
[/accordion]
[/tab]
[/tabs]