Icon Details Show Icon

Latest Stable Version Latest Unstable Version Total Downloads Monthly Downloads Daily Downloads
Thankful to Krajee!
to get more out of us.

NOTE: This extension depends on the yiisoft/yii2-bootstrap and the yiisoft/yii2-jui extensions. Check the composer.json for this extension's requirements and dependencies that may be updated by composer.

The Icon::show method allows you to display an icon anywhere in your application, after you have initialized and mapped the related framework with Icon::map. The parameters available for this method are:
  • name, string, the name part of the icon without any prefixes.
  • options, array, to configure the HTML options for the icon container
  • framework, string, the icon framework for which this icon is to be displayed (defaults to icon-framework param setting in Yii config). Use one of the icon framework constants as mentioned in the Map Icon section.
  • space, boolean, whether to add a space after the icon (defaults to true)
  • tag, string, the HTML tag for the icon container, defaults to i

For more examples and usage details visit the Bootstrap Glyphicons Page

Music
User
Home
Inbox
Send
Adjust
Tint
Plane
Shopping Cart
Bullhorn
<?= Icon::show('music', [], Icon::BSG) ?> Music<br>
<?= Icon::show('user', [], Icon::BSG) ?> User<br>
<?= Icon::show('home', [], Icon::BSG) ?> Home<br>
<?= Icon::show('inbox', [], Icon::BSG) ?> Inbox<br>
<?= Icon::show('send', [], Icon::BSG) ?> Send<br>
<?= Icon::show('adjust', [], Icon::BSG) ?> Adjust<br>
<?= Icon::show('tint', [], Icon::BSG) ?> Tint<br>
<?= Icon::show('plane', [], Icon::BSG) ?> Plane<br>
<?= Icon::show('shopping-cart', [], Icon::BSG) ?> Shopping Cart<br>
<?= Icon::show('bullhorn', [], Icon::BSG) ?> Bullhorn<br>

For more examples and usage details visit the Font Awesome Site

Inline Icons Twitter   Facebook   Google+
Icons and Sizes  normal    fa-large    fa-2x    fa-3x

Rotated/Flipped Icons  normal    fa-rotate-90    fa-flip-horizontal
Spinning Icons      
/*
 * `icon-framework` param is set to 'fa' in Yii Config
 */
// Inline icons
echo Icon::show('twitter-square') . 'Twitter' .
    Icon::show('facebook-square') . 'Facebook' .
    Icon::show('google-plus-square') . 'Google+';

// Icons & sizes
echo Icon::show('camera-retro') . 'normal' .
    Icon::show('camera-retro', ['class'=>'fa-large']) . 'fa-large' .
    Icon::show('camera-retro', ['class'=>'fa-2x']) . 'fa-2x' .
    Icon::show('camera-retro', ['class'=>'fa-3x']) . ' &nbsp;fa-3x';

// Rotated/Flipped Icons
echo Icon::show('shield') . 'normal' .
    Icon::show('shield', ['class'=>'fa-rotate-90']) . 'fa-rotate-90' .
    Icon::show('shield', ['class'=>'fa-flip-horizontal']) . 'fa-flip-horizontal';

// Spinning Icons in Buttons
echo Html::button(Icon::show('spinner', ['class'=>'fa-spin']), ['class'=>'btn btn-default']) . '&nbsp;' .
    Html::button(Icon::show('refresh', ['class'=>'fa-spin']), ['class'=>'btn btn-default']) . '&nbsp;' .
    Html::button(Icon::show('cog', ['class'=>'fa-spin']), ['class'=>'btn btn-default']);

Unicode symbols made available as CSS icons by Krajee. View unicode icon list.

Poison
Watch
Hourglass
Spades
Hearts
Chess King
Chess Queen
Chess Rook
Chess Knight
Chess Pawn
<?= Icon::show('poison', [], Icon::UNI) ?> Poison<br>
<?= Icon::show('watch', [], Icon::UNI) ?> Watch<br>
<?= Icon::show('hourglass', [], Icon::UNI) ?> Hourglass<br>
<?= Icon::show('spades', [], Icon::UNI) ?> Spades<br>
<?= Icon::show('hearts', [], Icon::UNI) ?> Hearts<br>
<?= Icon::show('chess-king', [], Icon::UNI) ?> Chess King<br>
<?= Icon::show('chess-queen', [], Icon::UNI) ?> Chess Queen<br>
<?= Icon::show('chess-rook', [], Icon::UNI) ?> Chess Rook<br>
<?= Icon::show('chess-knight', [], Icon::UNI) ?> Chess Knight<br>
<?= Icon::show('chess-pawn', [], Icon::UNI) ?> Chess Pawn       

For more examples and usage details visit the Elusive Icons Webfont Site

Wrench
Wheelchair
Website
W3C
Volume Off
Wordpress
Website Alt
Warning Sign
Volume Up
Volume Down
<?= Icon::show('wrench', [], Icon::EL) ?> Wrench<br>
<?= Icon::show('wheelchair', [], Icon::EL) ?> Wheelchair<br>
<?= Icon::show('website', [], Icon::EL) ?> Website<br>
<?= Icon::show('w3c', [], Icon::EL) ?> W3C<br>
<?= Icon::show('volume-off', [], Icon::EL) ?> Volume Off<br>
<?= Icon::show('wordpress', [], Icon::EL) ?> Wordpress<br>
<?= Icon::show('website-alt', [], Icon::EL) ?> Website Alt<br>
<?= Icon::show('warning-sign', [], Icon::EL) ?> Warning Sign<br>
<?= Icon::show('volume-up', [], Icon::EL) ?> Volume Up<br>
<?= Icon::show('volume-down', [], Icon::EL) ?> Volume Down

For more examples and usage details visit the Typicons Site

adjust-brightness
adjust-contrast
anchor-outline
anchor
archive
arrow-back
arrow-down
arrow-up
arrow-forward
arrow-loop
<?= Icon::show('adjust-brightness', [], Icon::TYP) ?> adjust-brightness<br>
<?= Icon::show('adjust-contrast', [], Icon::TYP) ?> adjust-contrast<br>
<?= Icon::show('anchor-outline', [], Icon::TYP) ?> anchor-outline<br>
<?= Icon::show('anchor', [], Icon::TYP) ?> anchor<br>
<?= Icon::show('archive', [], Icon::TYP) ?> archive<br>
<?= Icon::show('arrow-back', [], Icon::TYP) ?> arrow-back<br>
<?= Icon::show('arrow-down', [], Icon::TYP) ?> arrow-down<br>
<?= Icon::show('arrow-up', [], Icon::TYP) ?> arrow-up<br>
<?= Icon::show('arrow-forward', [], Icon::TYP) ?> arrow-forward<br>
<?= Icon::show('arrow-loop', [], Icon::TYP) ?> arrow-loop

For more examples and usage details visit the Web Hosting Hub Glyphs Site

bitcoin
calcdivide
calcequals
calcminus
calcmultiply
bank
bill
cartalt
coinsalt
desklamp
<?= Icon::show('bitcoin', [], Icon::WHHG) ?> bitcoin<br>
<?= Icon::show('calcdivide', [], Icon::WHHG) ?> calcdivide<br>
<?= Icon::show('calcequals', [], Icon::WHHG) ?> calcequals<br>
<?= Icon::show('calcminus', [], Icon::WHHG) ?> calcminus<br>
<?= Icon::show('calcmultiply', [], Icon::WHHG) ?> calcmultiply<br>
<?= Icon::show('bank', [], Icon::WHHG) ?> bank<br>
<?= Icon::show('bill', [], Icon::WHHG) ?> bill<br>
<?= Icon::show('cartalt', [], Icon::WHHG) ?> cartalt<br>
<?= Icon::show('coinsalt', [], Icon::WHHG) ?> coinsalt<br>
<?= Icon::show('desklamp', [], Icon::WHHG) ?> desklamp

For more examples and usage details visit the JQuery UI API Icons Site

  • folder-collapsed
  • folder-open
  • document
  • document-b
  • note
  • mail-closed
  • mail-open
  • suitcase
  • comment
  • print
<?= Icon::show('folder-collapsed', [], Icon::JUI) ?> folder-collapsed<br>
<?= Icon::show('folder-open', [], Icon::JUI) ?> folder-open<br>
<?= Icon::show('document', [], Icon::JUI) ?> document<br>
<?= Icon::show('document-b', [], Icon::JUI) ?> document-b<br>
<?= Icon::show('note', [], Icon::JUI) ?> note<br>
<?= Icon::show('mail-closed', [], Icon::JUI) ?> mail-closed<br>
<?= Icon::show('mail-open', [], Icon::JUI) ?> mail-open<br>
<?= Icon::show('suitcase', [], Icon::JUI) ?> suitcase<br>
<?= Icon::show('comment', [], Icon::JUI) ?> comment<br>
<?= Icon::show('print', [], Icon::JUI) ?> print            

Social icons - for more details visit the Socicon Site

twitter
facebook
google+
linkedin
yahoo
youtube
pinterest
skype
wordpress
stumbleupon
<?= Icon::show('twitter', [], Icon::SI) ?> twitter<br>  
<?= Icon::show('facebook', [], Icon::SI) ?> facebook<br>  
<?= Icon::show('google', [], Icon::SI) ?> google+<br>  
<?= Icon::show('linkedin', [], Icon::SI) ?> linkedin<br>  
<?= Icon::show('yahoo', [], Icon::SI) ?> yahoo<br>  
<?= Icon::show('youtube', [], Icon::SI) ?> youtube<br>  
<?= Icon::show('pinterest', [], Icon::SI) ?> pinterest<br>  
<?= Icon::show('skype', [], Icon::SI) ?> skype<br>  
<?= Icon::show('wordpress', [], Icon::SI) ?> wordpress<br>  
<?= Icon::show('stumbleupon', [], Icon::SI) ?> stumbleupon<br>  

Octicons from Github. View the detailed list.

beer
bug
organization
squirrel
telescope
broadcast
file-media
fold
milestone
radio-tower
<?= Icon::show('beer', ['class'=>'mega-octicon'], Icon::OCT) ?>
<?= Icon::show('bug', ['class'=>'mega-octicon'], Icon::OCT) ?>
<?= Icon::show('organization', ['class'=>'mega-octicon'], Icon::OCT) ?> 
<?= Icon::show('squirrel', ['class'=>'mega-octicon'], Icon::OCT) ?>
<?= Icon::show('telescope', ['class'=>'mega-octicon'], Icon::OCT) ?>
<?= Icon::show('broadcast', ['class'=>'mega-octicon'], Icon::OCT) ?>
<?= Icon::show('file-media', ['class'=>'mega-octicon'], Icon::OCT) ?>
<?= Icon::show('fold', ['class'=>'mega-octicon'], Icon::OCT) ?>
<?= Icon::show('milestone', ['class'=>'mega-octicon'], Icon::OCT) ?>
<?= Icon::show('radio-tower', ['class'=>'mega-octicon'], Icon::OCT) ?>

Flag Icons set. For more details visit the flag icons site.

India
Great Britian
United States
Germany
Russia
Australia
China
Malaysia
Italy
Canada
<?= Icon::show('in', [], Icon::FI) ?> India<br>
<?= Icon::show('gb', [], Icon::FI) ?> Great Britian<br>
<?= Icon::show('us', [], Icon::FI) ?> United States<br>
<?= Icon::show('de', [], Icon::FI) ?> Germany<br>
<?= Icon::show('ru', [], Icon::FI) ?> Russia<br>
<?= Icon::show('au', [], Icon::FI) ?> Australia<br>
<?= Icon::show('cn', [], Icon::FI) ?> China<br>
<?= Icon::show('my', [], Icon::FI) ?> Malaysia<br>
<?= Icon::show('it', [], Icon::FI) ?> Italy<br>
<?= Icon::show('ca', [], Icon::FI) ?> Canada<br>

Open Iconic set. For more details visit the Open Iconic site.

aperture
puzzle-piece
people
medical-cross
credit-card
laptop
graph
excerpt
copywriting
calculator
<?= Icon::show('aperture', [], Icon::OI) ?> aperture<br>
<?= Icon::show('puzzle-piece', [], Icon::OI) ?> puzzle-piece<br>
<?= Icon::show('people', [], Icon::OI) ?> people<br>
<?= Icon::show('medical-cross', [], Icon::OI) ?> medical-cross<br>
<?= Icon::show('credit-card', [], Icon::OI) ?> credit-card<br>
<?= Icon::show('laptop', [], Icon::OI) ?> laptop<br>
<?= Icon::show('graph', [], Icon::OI) ?> graph<br>
<?= Icon::show('excerpt', [], Icon::OI) ?> excerpt<br>
<?= Icon::show('copywriting', [], Icon::OI) ?> copywriting<br>
<?= Icon::show('calculator', [], Icon::OI) ?> calculator<br>