[sp-demo-header title="Icon%20ShortPoint" sub_title="The%20most%20complete%20Icon%20for%20SharePoint,%20Office%20365%20and%20SAP%20Portal" description="%20Hundreds%20of%20unique%20icons" /]
Icon Options Demos
Different Sizes
[divider style="double-dotted" /]
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[icon name="ion-android-create" size="small" /]
[icon name="ion-android-delete" size="small" /]
[icon name="ion-android-call" size="small" /]
[icon name="ion-android-globe" size="small" /]
[icon name="ion-android-checkmark-circle" size="small" /]
[/panel]
x2 Size
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[icon name="ion-android-create" size="x2" /]
[icon name="ion-android-delete" size="x2" /]
[icon name="ion-android-call" size="x2" /]
[icon name="ion-android-globe" size="x2" /]
[icon name="ion-android-checkmark-circle" size="x2" /]
[/panel]
x3 Size
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[icon name="ion-android-create" size="x3" /]
[icon name="ion-android-delete" size="x3" /]
[icon name="ion-android-call" size="x3" /]
[icon name="ion-android-globe" size="x3" /]
[icon name="ion-android-checkmark-circle" size="x3" /]
[/panel]
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[icon name="ion-android-create" size="x4" /]
[icon name="ion-android-delete" size="x4" /]
[icon name="ion-android-call" size="x4" /]
[icon name="ion-android-globe" size="x4" /]
[icon name="ion-android-checkmark-circle" size="x4" /]
[/panel]
x5 Size
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[icon name="ion-android-create" size="x5" /]
[icon name="ion-android-delete" size="x5" /]
[icon name="ion-android-call" size="x5" /]
[icon name="ion-android-globe" size="x5" /]
[icon name="ion-android-checkmark-circle" size="x5" /]
[/panel]
Styles
[divider style="double-dotted" /]
Circle
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[icon name="facebook" size="x3" style="circle" /]
[icon name="twitter" size="x3" style="circle" /]
[icon name="ion-social-pinterest-outline" size="x3" style="circle" /]
[icon name="google-plus" size="x3" style="circle" /]
[/panel]
Square
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[icon name="facebook" size="x3" style="square" /]
[icon name="twitter" size="x3" style="square" /]
[icon name="ion-social-pinterest-outline" size="x3" style="square" /]
[icon name="google-plus" size="x3" style="square" /]
[/panel]
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[icon name="facebook" size="x3" style="outline-circle" /]
[icon name="twitter" size="x3" style="outline-circle" /]
[icon name="ion-social-pinterest-outline" size="x3" style="outline-circle" /]
[icon name="google-plus" size="x3" style="outline-circle" /]
[/panel]
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[icon name="facebook" size="x3" style="outline-square" /]
[icon name="twitter" size="x3" style="outline-square" /]
[icon name="ion-social-pinterest-outline" size="x3" style="outline-square" /]
[icon name="google-plus" size="x3" style="outline-square" /]
[/panel]
[divider style="double-dotted" /]
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[icon name="facebook-square" size="x3" color="primary" id="ms-rterangecursor-start" /]
[icon name="twitter-square" size="x3" color="info" /]
[icon name="pinterest-square" size="x3" color="red" /]
[icon name="google-plus-square" size="x3" color="red-light" /]
[/panel]
Hover Styles
[divider style="double-dotted" /]
Zoom
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[icon hover-style="zoom" name="facebook-square" size="x3" color="primary" id="ms-rterangecursor-start" /]
[icon hover-style="zoom" name="twitter-square" size="x3" color="info" /]
[icon hover-style="zoom" name="pinterest-square" size="x3" color="red" /]
[icon hover-style="zoom" name="google-plus-square" size="x3" color="red-light" /]
[/panel]
Lighten
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[icon hover-style="lighten" name="facebook-square" size="x3" color="primary" id="ms-rterangecursor-start" /]
[icon hover-style="lighten" name="twitter-square" size="x3" color="info" /]
[icon hover-style="lighten" name="pinterest-square" size="x3" color="red" /]
[icon hover-style="lighten" name="google-plus-square" size="x3" color="red-light" /]
[/panel]
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[icon hover-style="fill-up" name="facebook-square" size="x3" color="primary-light" id="ms-rterangecursor-start" /]
[icon hover-style="fill-up" name="twitter-square" size="x3" color="info" /]
[icon hover-style="fill-up" name="pinterest-square" size="x3" color="red" /]
[icon hover-style="fill-up" name="google-plus-square" size="x3" color="red-light" /]
[/panel]
Linking Options
[divider style="double-dotted" /]
Lightbox
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[icon lightbox name="ion-image" size="x3" color="border-dark" style="outline-square" link="https://www.shortpoint.com/wp-content/uploads/2017/01/3yfswcfj6do-garth-pratt-min-1.jpg" /]
[icon lightbox name="ion-social-youtube" size="x3" color="red" style="outline-square" link="https://www.youtube.com/watch?v=QPdWJeybMo8" /]
[icon lightbox name="ion-social-vimeo" size="x3" color="info" style="outline-square" link="https://vimeo.com/200671449" /]
[icon lightbox name="map-marker" size="x3" color="primary-dark" style="outline-square" link="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12616.999789398731!2d-122.44720946928643!3d37.760737096627345!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80859a6d00690021%253A0x4a501367f076adff!2sSan+Francisco%252C+CA%252C+USA!5e0!3m2!1sen!2sua!4v1477074759345" /]
[/panel]
[panel panel-style="transparent" separator-style="none" class="shortpoint-copy"]
[icon new-window name="ion-image" size="x3" color="border-dark" style="outline-square" link="https://www.shortpoint.com/wp-content/uploads/2017/01/3yfswcfj6do-garth-pratt-min-1.jpg" /]
[icon new-window name="ion-social-youtube" size="x3" color="red" style="outline-square" link="https://www.youtube.com/watch?v=QPdWJeybMo8" /]
[icon new-window name="ion-social-vimeo" size="x3" color="info" style="outline-square" link="https://vimeo.com/200671449" /]
[icon new-window name="map-marker" size="x3" color="primary-dark" style="outline-square" link="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12616.999789398731!2d-122.44720946928643!3d37.760737096627345!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80859a6d00690021%253A0x4a501367f076adff!2sSan+Francisco%252C+CA%252C+USA!5e0!3m2!1sen!2sua!4v1477074759345" /]
[/panel]
[sp-demo-doc]
Name – your icon. All icons available at
ShortPoint Icons page
Size – pre-defined sizes for the icon:
- Small size
- Normal size
- x2 size
- x3 size
- x4 size
- x5 size
Color – pre-defined colors for the icon. All colors available at
ShortPoint Colors page
Style – pre-defined styles for the icon:
- Circle
- Square
- Outline circle
- Outline square
Hover style – pre-defined styles for the icon hover:
Link – icon link where you will redirect
Linking options – there you can choose how to open your link:
- Default – by default link will be opened in the same window
- LightBox – your Link will be opened in the lightbox
- New window – your link will be opened in the new tab
- Dialog – your Link will be opened in the dialog window
[/sp-demo-doc]