Icon

ShortcodesIcon

What’s this?

React has over 1000 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.

FontAwsome

Get code

[icon icon="fa-coffee" font_size="25"]

Add Animations

Get code

[icon icon="fa-check" font_size="35" animation="flipInX" animation_delay="700"]

Add a Description

Get code

[icon description="Description" icon="fa-envelope" font_size="10"]

Boxed

Get code

[icon boxed="1" icon="fa-coffee" font_size="25"]

Hollow

Get code

[icon boxed="1" icon="fa-coffee" font_size="25" hollow="1" background_animation="hvr-shutter-out-horizontal"]

Round

Get code

[icon boxed="1" icon="fa-coffee" font_size="25" round="1"]

Add Gradient

Get code

[icon boxed="1" gradient="gradient" icon="fa-paper-plane" font_size="25"]

Add Animations

Get code

[icon boxed="1" icon="fa-check" font_size="35" animation="flipInX" animation_delay="700"]

Add a Description

Get code

[icon boxed="1" description="Description" icon="fa-envelope" font_size="10"]

Small

Get code

[icon icon="heart"]

Medium

Get code

[icon size_image="med" icon="heart"]

Large

Get code

[icon size_image="lrg" icon="heart"]

Add animation

Get code

[icon size_image="med" icon="heart" animation="flipInX" animation_delay="200"]

Boxed

Get code

[icon boxed="1" size_image="med" icon="heart"]

Variations

Change the Skin for this Case Study

Demos

React Hub
Lens
Berri
Replika
Press
Second
View all Demos React Hub Copy current page content
[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="icon-camera" color="style-dark" animation="bounceIn"][icon icon="icon-bike" color="style-dark" animation="bounceIn" animation_delay="300"][icon icon="icon-key" color="style-dark" animation="bounceIn" animation_delay="600"][icon icon="icon-linegraph" color="style-dark" animation="bounceIn" animation_delay="900"][icon icon="icon-heart" color="style-dark" animation="bounceIn" animation_delay="1200"] [icon icon="icon-basket" color="style-dark" animation="bounceIn" animation_delay="1500"][icon icon="icon-lightbulb" color="style-dark" animation="bounceIn" animation_delay="1800"][icon icon="icon-mic" color="style-dark" animation="bounceIn" animation_delay="2100"] [icon icon="icon-heart2" color="style-dark" animation="bounceIn" animation_delay="2400"][icon icon="icon-chart-pie" color="style-dark" animation="bounceIn" animation_delay="2700"][icon icon="icon-plane" color="style-dark" animation="bounceIn" animation_delay="3000"][icon icon="icon-wi-fi" color="style-dark" animation="bounceIn" animation_delay="3300"][icon icon="icon-power" color="style-dark" animation="bounceIn" animation_delay="3600"][icon icon="icon-social-twitter" color="style-dark" animation="bounceIn" animation_delay="3900"][icon icon="icon-star-outline" color="style-dark" animation="bounceIn" animation_delay="4200"][icon icon="icon-arrow-loop-outline" color="style-dark" animation="bounceIn" animation_delay="4500"][icon icon="icon-globe-outline" color="style-dark" animation="bounceIn" animation_delay="4800"][icon icon="icon-headphones" color="style-dark" animation="bounceIn" animation_delay="5100"][icon icon="icon-watch" color="style-dark" animation="bounceIn" animation_delay="5400"][icon icon="icon-messages" 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="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="fa-coffee" font_size="10"] [icon icon="fa-coffee" font_size="15"] [icon icon="fa-coffee" font_size="20"] [icon icon="fa-coffee" font_size="25"] [icon icon="fa-coffee" font_size="30"] [icon icon="fa-coffee" font_size="35"] [accordion style="plain"] [accordion_toggle title="Get code"]
[icon icon="fa-coffee" font_size="25"]
[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]Add Animations[/fancy_header] [icon icon="fa-check" font_size="10" animation="flipInX" animation_delay="200"] [icon icon="fa-check" font_size="15" animation="flipInX" animation_delay="300"] [icon icon="fa-check" font_size="20" animation="flipInX" animation_delay="400"] [icon icon="fa-check" font_size="25" animation="flipInX" animation_delay="500"] [icon icon="fa-check" font_size="30" animation="flipInX" animation_delay="600"] [icon icon="fa-check" font_size="35" animation="flipInX" animation_delay="700"] [accordion style="plain"] [accordion_toggle title="Get code"]
[icon icon="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="fa-envelope" font_size="35"] [icon description="Description" icon="fa-envelope" font_size="30"] [icon description="Description" icon="fa-envelope" font_size="25"] [icon description="Description" icon="fa-envelope" font_size="20"] [icon description="Description" icon="fa-envelope" font_size="15"] [icon description="Description" icon="fa-envelope" font_size="10"] [accordion style="plain"] [accordion_toggle title="Get code"]
[icon description="Description" icon="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="fa-coffee" font_size="10"] [icon boxed="1" icon="fa-coffee" font_size="15"] [icon boxed="1" icon="fa-coffee" font_size="20"] [icon boxed="1" icon="fa-coffee" font_size="25"] [icon boxed="1" icon="fa-coffee" font_size="30"] [icon boxed="1" icon="fa-coffee" font_size="35"] [accordion style="plain"] [accordion_toggle title="Get code"]
[icon boxed="1" icon="fa-coffee" font_size="25"]
[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]Hollow[/fancy_header] [icon icon="fa-coffee" font_size="10" boxed="1" hollow="1" background_animation="hvr-shutter-out-horizontal"] [icon boxed="1" icon="fa-coffee" font_size="15" hollow="1" background_animation="hvr-shutter-out-horizontal"] [icon boxed="1" icon="fa-coffee" font_size="20" hollow="1" background_animation="hvr-shutter-out-horizontal"] [icon boxed="1" icon="fa-coffee" font_size="25" hollow="1" background_animation="hvr-shutter-out-horizontal"] [icon boxed="1" icon="fa-coffee" font_size="30" hollow="1" background_animation="hvr-shutter-out-horizontal"] [icon boxed="1" icon="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="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="fa-coffee" font_size="10" boxed="1" round="1"] [icon boxed="1" icon="fa-coffee" font_size="15" round="1"] [icon boxed="1" icon="fa-coffee" font_size="20" round="1"] [icon boxed="1" icon="fa-coffee" font_size="25" round="1"] [icon boxed="1" icon="fa-coffee" font_size="30" round="1"] [icon boxed="1" icon="fa-coffee" font_size="35" round="1"] [accordion style="plain"] [accordion_toggle title="Get code"]
[icon boxed="1" icon="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="fa-paper-plane" font_size="35"] [icon boxed="1" gradient="gradient" icon="fa-paper-plane" font_size="30"] [icon boxed="1" gradient="gradient" icon="fa-paper-plane" font_size="25"] [icon boxed="1" gradient="gradient" icon="fa-paper-plane" font_size="20"] [icon boxed="1" gradient="gradient" icon="fa-paper-plane" font_size="15"] [icon boxed="1" gradient="gradient" icon="fa-paper-plane" font_size="10"] [accordion style="plain"] [accordion_toggle title="Get code"]
[icon boxed="1" gradient="gradient" icon="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="fa-check" font_size="10" animation="flipInX" animation_delay="200"] [icon boxed="1" icon="fa-check" font_size="15" animation="flipInX" animation_delay="300"] [icon boxed="1" icon="fa-check" font_size="20" animation="flipInX" animation_delay="400"] [icon boxed="1" icon="fa-check" font_size="25" animation="flipInX" animation_delay="500"] [icon boxed="1" icon="fa-check" font_size="30" animation="flipInX" animation_delay="600"] [icon boxed="1" icon="fa-check" font_size="35" animation="flipInX" animation_delay="700"] [accordion style="plain"] [accordion_toggle title="Get code"]
[icon boxed="1" icon="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="fa-envelope" font_size="35"] [icon boxed="1" description="Description" icon="fa-envelope" font_size="30"] [icon boxed="1" description="Description" icon="fa-envelope" font_size="25"] [icon boxed="1" description="Description" icon="fa-envelope" font_size="20"] [icon boxed="1" description="Description" icon="fa-envelope" font_size="15"] [icon boxed="1" description="Description" icon="fa-envelope" font_size="10"] [accordion style="plain"] [accordion_toggle title="Get code"]
[icon boxed="1" description="Description" icon="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="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="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="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="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]
Download - $44