[kswr_singleicon si_icon= »km-icon-mobile4″ si_iconsize= »30″ si_bgsize= »50″ si_border_radius= »0″ si_ic_color_hover= »{« type« :« color« ,« color1« :« rgba(31, 189, 242, 1)« ,« color2« :« #333« ,« direction« :« to left« } » si_elem_align= »center » si_rotation= »false » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
Solid Color
[kswr_singleicon si_icon= »km-icon-desktop2″ si_iconsize= »30″ si_bgsize= »50″ si_border_radius= »0″ si_ic_color= »{« type« :« gradient« ,« color1« :« #cc5dff« ,« color2« :« #4f8eed« ,« direction« :« to bottom right« } » si_ic_color_hover= »{« type« :« color« ,« color1« :« « ,« color2« :« #333« ,« direction« :« to left« } » si_elem_align= »center » si_rotation= »false » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
Gradient Color
[kswr_singleicon si_icon= »km-icon-laptop4″ si_iconsize= »17″ si_bgsize= »50″ si_border_radius= »0″ si_ic_color= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_ic_color_hover= »{« type« :« color« ,« color1« :« « ,« color2« :« #333« ,« direction« :« to left« } » si_back= »{« type« :« color« ,« color1« :« #4f8eed« ,« color2« :« transparent« ,« direction« :« to left« } » si_elem_align= »center » si_rotation= »false » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
Solid Background
[kswr_singleicon si_icon= »km-icon-phone4″ si_iconsize= »17″ si_bgsize= »50″ si_border_radius= »500″ si_ic_color= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_ic_color_hover= »{« type« :« color« ,« color1« :« « ,« color2« :« #333« ,« direction« :« to left« } » si_back= »{« type« :« color« ,« color1« :« #ff033e« ,« color2« :« transparent« ,« direction« :« to left« } » si_elem_align= »center » si_rotation= »false » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
Round Background
[kswr_singleicon si_icon= »km-icon-circle-compass » si_iconsize= »17″ si_bgsize= »50″ si_border_radius= »0″ si_ic_color= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_ic_color_hover= »{« type« :« color« ,« color1« :« « ,« color2« :« #333« ,« direction« :« to left« } » si_back= »{« type« :« gradient« ,« color1« :« #4f8eed« ,« color2« :« #cc5dff« ,« direction« :« to top right« } » si_elem_align= »center » si_rotation= »false » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
Gradient Background
[kswr_singleicon si_icon= »km-icon-layers2″ si_iconsize= »17″ si_bgsize= »50″ si_border_radius= »500″ si_ic_color= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_ic_color_hover= »{« type« :« color« ,« color1« :« « ,« color2« :« #333« ,« direction« :« to left« } » si_back= »{« type« :« gradient« ,« color1« :« #4f8eed« ,« color2« :« #cc5dff« ,« direction« :« to top« } » si_elem_align= »center » si_rotation= »false » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
Round Gradient
Some Hover Styles
[kswr_singleicon si_icon= »km-icon-genius » si_effect= »fade » si_iconsize= »40″ si_bgsize= »85″ si_border_radius= »0″ si_ic_color_hover= »{« type« :« color« ,« color1« :« rgba(57, 223, 165, 1)« ,« color2« :« #333« ,« direction« :« to left« } » si_link= »# » si_elem_align= »center » si_rotation= »false » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
[kswr_singleicon si_icon= »km-icon-lightbulb » si_effect= »fade » si_iconsize= »34″ si_bgsize= »85″ si_border_radius= »0″ si_ic_color= »{« type« :« color« ,« color1« :« rgba(255, 255, 255, 1)« ,« color2« :« #333« ,« direction« :« to left« } » si_ic_color_hover= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_back= »{« type« :« color« ,« color1« :« #2e5894« ,« color2« :« transparent« ,« direction« :« to left« } » si_back_hover= »{« type« :« color« ,« color1« :« rgba(31, 189, 242, 1)« ,« color2« :« rgba(57, 223, 165, 1)« ,« direction« :« to bottom left« } » si_link= »# » si_elem_align= »center » si_rotation= »false » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
[kswr_singleicon si_icon= »km-icon-strategy » si_effect= »fade » si_iconsize= »32″ si_bgsize= »85″ si_border_radius= »500″ si_ic_color_hover= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_back= »{« type« :« color« ,« color1« :« #f3f3f3« ,« color2« :« transparent« ,« direction« :« to left« } » si_back_hover= »{« type« :« gradient« ,« color1« :« rgba(31, 189, 242, 1)« ,« color2« :« rgba(57, 223, 165, 1)« ,« direction« :« to bottom left« } » si_link= »# » si_elem_align= »center » si_rotation= »false » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
[kswr_singleicon si_icon= »km-icon-genius » si_effect= »fade » si_iconsize= »25″ si_bgsize= »72″ si_border_radius= »0″ si_ic_color= »{« type« :« color« ,« color1« :« rgba(255, 255, 255, 1)« ,« color2« :« #333« ,« direction« :« to left« } » si_ic_color_hover= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_back= »{« type« :« color« ,« color1« :« #a57164« ,« color2« :« transparent« ,« direction« :« to left« } » si_back_hover= »{« type« :« gradient« ,« color1« :« rgba(31, 189, 242, 1)« ,« color2« :« rgba(57, 223, 165, 1)« ,« direction« :« to bottom left« } » si_link= »# » si_elem_align= »center » si_rotation= »true » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
[kswr_singleicon si_icon= »km-icon-tools » si_effect= »zoomin » si_iconsize= »32″ si_bgsize= »85″ si_border_radius= »0″ si_ic_color_hover= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_back= »{« type« :« color« ,« color1« :« #f3f3f3« ,« color2« :« transparent« ,« direction« :« to left« } » si_back_hover= »{« type« :« color« ,« color1« :« rgba(31, 189, 242, 1)« ,« color2« :« rgba(57, 223, 165, 1)« ,« direction« :« to bottom left« } » si_link= »# » si_elem_align= »center » si_rotation= »false » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
[kswr_singleicon si_icon= »km-icon-layers2″ si_effect= »zoomin » si_iconsize= »32″ si_bgsize= »85″ si_border_radius= »500″ si_ic_color= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_ic_color_hover= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_back= »{« type« :« gradient« ,« color1« :« rgba(31, 189, 242, 1)« ,« color2« :« rgba(57, 223, 165, 1)« ,« direction« :« to top right« } » si_back_hover= »{« type« :« color« ,« color1« :« rgba(212, 81, 81, 1)« ,« color2« :« « ,« direction« :« to bottom left« } » si_link= »# » si_elem_align= »center » si_rotation= »false » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
[kswr_singleicon si_icon= »km-icon-circle-compass » si_effect= »zoomin » si_iconsize= »25″ si_bgsize= »72″ si_border_radius= »0″ si_ic_color_hover= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_back= »{« type« :« color« ,« color1« :« #f3f3f3« ,« color2« :« transparent« ,« direction« :« to left« } » si_back_hover= »{« type« :« color« ,« color1« :« rgba(16, 224, 158, 1)« ,« color2« :« rgba(57, 223, 165, 1)« ,« direction« :« to bottom left« } » si_link= »# » si_elem_align= »center » si_rotation= »true » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
[kswr_singleicon si_icon= »km-icon-uniE905″ si_effect= »zoomout » si_iconsize= »32″ si_bgsize= »85″ si_border_radius= »500″ si_ic_color= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_ic_color_hover= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_back= »{« type« :« color« ,« color1« :« #262b31« ,« color2« :« « ,« direction« :« to top right« } » si_back_hover= »{« type« :« gradient« ,« color1« :« rgba(31, 189, 242, 1)« ,« color2« :« rgba(57, 223, 165, 1)« ,« direction« :« to bottom left« } » si_link= »# » si_elem_align= »center » si_rotation= »false » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
[kswr_singleicon si_icon= »km-icon-feed » si_effect= »zoomout » si_iconsize= »25″ si_bgsize= »72″ si_border_radius= »0″ si_ic_color= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_ic_color_hover= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_back= »{« type« :« gradient« ,« color1« :« rgba(72, 82, 94, 1)« ,« color2« :« rgba(38, 43, 49, 1)« ,« direction« :« to bottom left« } » si_back_hover= »{« type« :« color« ,« color1« :« rgba(9, 230, 223, 1)« ,« color2« :« rgba(57, 223, 165, 1)« ,« direction« :« to bottom left« } » si_link= »# » si_elem_align= »center » si_rotation= »true » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
[kswr_singleicon si_icon= »km-icon-uniEBB9″ si_effect= »zoomout » si_iconsize= »32″ si_bgsize= »85″ si_border_radius= »0″ si_ic_color= »{« type« :« color« ,« color1« :« #ffff00« ,« color2« :« #333« ,« direction« :« to left« } » si_ic_color_hover= »{« type« :« color« ,« color1« :« #222222« ,« color2« :« #333« ,« direction« :« to left« } » si_back= »{« type« :« color« ,« color1« :« #222222« ,« color2« :« transparent« ,« direction« :« to left« } » si_back_hover= »{« type« :« color« ,« color1« :« #ffff00« ,« color2« :« rgba(57, 223, 165, 1)« ,« direction« :« to bottom left« } » si_link= »# » si_elem_align= »center » si_rotation= »false » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
Please hover these icons to see effects
All the hover styles can be applied for any icon back shape
[kswr_singleicon si_icon= »km-icon-paintbrush » si_effect= »sasuki » si_iconsize= »21″ si_bgsize= »70″ si_border_radius= »500″ si_ic_color= »{« type« :« color« ,« color1« :« #555555« ,« color2« :« #333« ,« direction« :« to left« } » si_ic_color_hover= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_back= »{« type« :« color« ,« color1« :« #f4f4f4« ,« color2« :« « ,« direction« :« to top right« } » si_back_hover= »{« type« :« gradient« ,« color1« :« rgba(31, 189, 242, 1)« ,« color2« :« rgba(57, 223, 165, 1)« ,« direction« :« to bottom left« } » si_link= »# » si_elem_align= »center » si_rotation= »false » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
[kswr_singleicon si_icon= »km-icon-uniE680″ si_effect= »sasuki » si_iconsize= »21″ si_bgsize= »70″ si_border_radius= »0″ si_ic_color= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_ic_color_hover= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_back= »{« type« :« color« ,« color1« :« rgba(38, 43, 49, 1)« ,« color2« :« « ,« direction« :« to top right« } » si_back_hover= »{« type« :« color« ,« color1« :« rgba(31, 189, 242, 1)« ,« color2« :« rgba(57, 223, 165, 1)« ,« direction« :« to bottom left« } » si_link= »# » si_elem_align= »center » si_rotation= »false » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
[kswr_singleicon si_icon= »km-icon-uniE6E4″ si_effect= »hiroshi » si_iconsize= »21″ si_bgsize= »70″ si_border_radius= »500″ si_ic_color= »{« type« :« color« ,« color1« :« #555555« ,« color2« :« #333« ,« direction« :« to left« } » si_ic_color_hover= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_back= »{« type« :« color« ,« color1« :« #f4f4f4« ,« color2« :« « ,« direction« :« to top right« } » si_back_hover= »{« type« :« gradient« ,« color1« :« #13bde8« ,« color2« :« #a846e0« ,« direction« :« to bottom right« } » si_link= »# » si_elem_align= »center » si_rotation= »false » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
[kswr_singleicon si_icon= »km-icon-uniE741″ si_effect= »hiroshi » si_iconsize= »21″ si_bgsize= »70″ si_border_radius= »0″ si_ic_color= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_ic_color_hover= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_back= »{« type« :« gradient« ,« color1« :« rgba(19, 189, 232, 1)« ,« color2« :« rgba(168, 70, 224, 1)« ,« direction« :« to bottom left« } » si_back_hover= »{« type« :« color« ,« color1« :« rgba(19, 189, 232, 1)« ,« color2« :« rgba(19, 189, 232, 1)« ,« direction« :« to bottom left« } » si_link= »# » si_elem_align= »center » si_rotation= »false » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
[kswr_singleicon si_icon= »km-icon-uniE82D » si_effect= »haruki » si_iconsize= »21″ si_bgsize= »70″ si_border_radius= »0″ si_ic_color= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_ic_color_hover= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_back= »{« type« :« gradient« ,« color1« :« rgba(57, 223, 165, 1)« ,« color2« :« rgba(31, 189, 242, 1)« ,« direction« :« to top right« } » si_back_hover= »{« type« :« color« ,« color1« :« rgba(38, 43, 49, 1)« ,« color2« :« « ,« direction« :« to bottom left« } » si_link= »# » si_elem_align= »center » si_rotation= »false » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
[kswr_singleicon si_icon= »km-icon-uniED29″ si_effect= »haruki » si_iconsize= »21″ si_bgsize= »70″ si_border_radius= »500″ si_ic_color= »{« type« :« color« ,« color1« :« #555555« ,« color2« :« #333« ,« direction« :« to left« } » si_ic_color_hover= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_back= »{« type« :« color« ,« color1« :« #f4f4f4« ,« color2« :« « ,« direction« :« to top right« } » si_back_hover= »{« type« :« gradient« ,« color1« :« rgba(31, 189, 242, 1)« ,« color2« :« rgba(57, 223, 165, 1)« ,« direction« :« to bottom left« } » si_link= »# » si_elem_align= »center » si_rotation= »false » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
[kswr_singleicon si_icon= »km-icon-uniEB2F » si_effect= »murawa » si_iconsize= »21″ si_bgsize= »70″ si_border_radius= »0″ si_ic_color= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_ic_color_hover= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_back= »{« type« :« color« ,« color1« :« #e91e63« ,« color2« :« rgba(168, 70, 224, 1)« ,« direction« :« to bottom left« } » si_back_hover= »{« type« :« gradient« ,« color1« :« rgba(19, 189, 232, 1)« ,« color2« :« #e91e63« ,« direction« :« to bottom left« } » si_link= »# » si_elem_align= »center » si_rotation= »false » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
[kswr_singleicon si_icon= »km-icon-uniE893″ si_effect= »murawa » si_iconsize= »21″ si_bgsize= »70″ si_border_radius= »500″ si_ic_color= »{« type« :« color« ,« color1« :« #555555« ,« color2« :« #333« ,« direction« :« to left« } » si_ic_color_hover= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_back= »{« type« :« gradient« ,« color1« :« #f4f4f4« ,« color2« :« rgba(209, 209, 209, 1)« ,« direction« :« to top right« } » si_back_hover= »{« type« :« gradient« ,« color1« :« #88c34d« ,« color2« :« #00bcd0« ,« direction« :« to bottom right« } » si_link= »# » si_elem_align= »center » si_rotation= »false » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
[kswr_singleicon si_icon= »km-icon-pencil2″ si_effect= »sisawa » si_iconsize= »21″ si_bgsize= »70″ si_border_radius= »500″ si_ic_color= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_ic_color_hover= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_back= »{« type« :« gradient« ,« color1« :« #ff9267« ,« color2« :« #ff2024« ,« direction« :« to bottom right« } » si_back_hover= »{« type« :« gradient« ,« color1« :« rgba(31, 189, 242, 1)« ,« color2« :« rgba(57, 223, 165, 1)« ,« direction« :« to bottom left« } » si_link= »# » si_elem_align= »center » si_rotation= »false » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
[kswr_singleicon si_icon= »km-icon-stack » si_effect= »sisawa » si_iconsize= »21″ si_bgsize= »62″ si_border_radius= »0″ si_ic_color= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_ic_color_hover= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_back= »{« type« :« color« ,« color1« :« rgba(36, 36, 36, 1)« ,« color2« :« « ,« direction« :« to bottom right« } » si_back_hover= »{« type« :« gradient« ,« color1« :« rgba(72, 181, 224, 1)« ,« color2« :« rgba(255, 32, 36, 1)« ,« direction« :« to bottom left« } » si_link= »# » si_elem_align= »center » si_rotation= »true » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
[kswr_singleicon si_icon= »km-icon-uniED2A » si_effect= »sisawa » si_iconsize= »21″ si_bgsize= »70″ si_border_radius= »0″ si_ic_color= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_ic_color_hover= »{« type« :« color« ,« color1« :« #ffffff« ,« color2« :« #333« ,« direction« :« to left« } » si_back= »{« type« :« color« ,« color1« :« rgba(56, 148, 224, 1)« ,« color2« :« rgba(31, 189, 242, 1)« ,« direction« :« to top right« } » si_back_hover= »{« type« :« color« ,« color1« :« #ff4661« ,« color2« :« « ,« direction« :« to bottom left« } » si_link= »# » si_elem_align= »center » si_rotation= »false » si_style_default= »0″ si_elem_margins= »margin-top:0px;margin-bottom:0px; »]
This is just a small list of what you can achieve with icon shortcode
You can also add links external or WordPress pages
The only limit is your own imagination!