PrimeIcons

Getting Started

PrimeIcons use the pi pi-{icon} syntax such as pi pi-check. A standalone icon can be displayed using an element such as i or span

        <i class="pi pi-check"></i>
        <i class="pi pi-times"></i>
        

Size

Size of the icons can easily be changed using font-size property.

        <i class="pi pi-check"></i>
        
        <i class="pi pi-check" style="font-size: 3em"></i>
        

Spinning Animation

Special pi-spin class applies infinite rotate to an icon.

        <i class="pi pi-spin pi-spinner" style="font-size: 3em"></i>
        

List of Icons

Here is the current list of PrimeIcons, more icons will be added periodically. You may also request new icons at the issue tracker.

mobile
tablet
key
shopping-cart
comments
comment
briefcase
bell
paperclip
share-alt
envelope
volume-down
volume-up
volume-off
eject
money-bill
images
image
sign-in
sign-out
wifi
sitemap
chart-bar
camera
dollar
lock-open
table
map-marker
list
eye-slash
eye
folder-open
folder
video
inbox
lock
unlock
tags
tag
power-off
save
question-circle
question
copy
file
clone
calendar-times
calendar-minus
calendar-plus
ellipsis-v
ellipsis-h
bookmark
globe
replay
filter
print
align-right
align-left
align-center
align-justify
cog
cloud-download
cloud-upload
cloud
pencil
users
clock
user-minus
user-plus
trash
window-minimize
window-maximize
external-link
refresh
user
exclamation-triangle
calendar
chevron-circle-left
chevron-circle-down
chevron-circle-right
chevron-circle-up
angle-double-down
angle-double-left
angle-double-right
angle-double-up
angle-down
angle-left
angle-right
angle-up
upload
download
ban
star-o
star
chevron-left
chevron-right
chevron-down
chevron-up
caret-left
caret-right
caret-down
caret-up
search
check
check-circle
times
times-circle
plus
plus-circle
minus
minus-circle
circle-on
circle-off
sort-down
sort-up
sort
step-backward
step-forward
th-large
arrow-down
arrow-left
arrow-right
arrow-up
bars
arrow-circle-down
arrow-circle-left
arrow-circle-right
arrow-circle-up
info
info-circle
home
spinner
Selected Icon Info Copied!
<style type="text/css">
    .p-grid {
        text-align: center;
    }

    .p-grid i {
        vertical-align: middle;
        padding-right: 5px;
        font-size: 2em;
    }
    
    .p-grid .icon-container:hover {
        background-color: #EFF3F6;
        cursor: pointer;
    }
    
    .dark-content .p-grid .icon-container:hover {
        background-color: #5e6061;
    }
    
    .iconInfo {
        background-color: #30383c;
        position: fixed;
        bottom: 0;
        right: 0;
        height: 130px;
        width: 260px;
        color: #ffffff;
        padding: 0 10px;
        display: none;
        webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
        -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        z-index: 999999;
    }
    
    .iconInfo .iconInfo-header {
        position: relative;
        border-bottom: 1px solid #e3e9ea;
        padding: 5px;
    }
    
    .iconInfo .iconInfo-close {
        position: absolute;
        right: 5px;
        color: #ffffff;
    }
    
    .iconInfo .icon-text {
        padding-top: 5px;
        padding-bottom: 2px;
        font-size: 13px;
    }
    
    .iconInfo .icon-sample-input {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 5px;
    }
    
    .iconInfo .icon-sample-input + i {
        text-align: center;
        display: block;
        font-size: 30px;
    }
    
    .iconInfo .copied-text {
        display: none;
        position: absolute;
        right: 30px;
        top: 7px;
        color: #1b82d7;
        font-weight: bold;
    }
</style>
<script type="text/javascript">
    //<![CDATA[
    var grid = $('.p-grid'),
        cols = grid.children('div'),
        iconInfo = $('.iconInfo'),
        copiedText = $('.copied-text'),
        closeIcon = $('.closeInfo-close'),
        colsClicked = false;

    $(function() {                
        cols.off('click').on('click', function(e) {
            showIconInfo(e);
            colsClicked = true;
        });
        
        $(document.body).off('click').on('click', function(e) {
            if(!colsClicked && iconInfo.is(':visible') && !iconInfo.has($(e.target)).length) {
                iconInfo.hide();
            }
            colsClicked = false;
        });
    });

    function onFilter(e) {
        var value = $(e.target).val();

        if (value == "") {
            cols.show();
        } 
        else {
            cols.hide();
            cols.filter('[data-name*="' + value.toLowerCase() + '"]').show();
        }
    }
    
    function showIconInfo(e) {
        var container = $(e.target),
        iconName = "";
        
        if(!container.hasClass('icon-container')) {
            container = container.parent();
        }

        var iconName = container.data('name'),
        iconKey = parseInt(container.data('key')).toString(16),
        iconSampleInput = iconInfo.children('.icon-sample-input'),
        iconSampleText = '<i class="pi pi-' + iconName + '"></i>';
        
        iconInfo.children('.icon-text').text('pi-' + iconName + " (code: \"\\" + iconKey + "\")");
        iconSampleInput.val(iconSampleText);
        iconSampleInput.next().remove().end().after(iconSampleText);
        
        if(iconInfo.is(':hidden')) {
            iconInfo.show();
        }
    }
    
    function copyText(e) {
        $(e.target).select();
        document.execCommand('copy');
        copiedText.fadeIn('slow');
        copiedText.fadeOut(2000);
    }
    
    function closeInfo(e) {
        iconInfo.hide();
        colsClicked = false;
        e.preventDefault();
    }
    //]]>
</script>

<h3 style="margin-top:0">Getting Started</h3>
<p>PrimeIcons use the pi pi-{icon} syntax such as pi pi-check. A standalone icon can be displayed using an element such as i or span</p>
<pre name="code" class="brush:xml">
&lt;i class="pi pi-check"&gt;&lt;/i&gt;
&lt;i class="pi pi-times"&gt;&lt;/i&gt;
</pre>
<i class="pi pi-check"></i>
<i class="pi pi-times"></i>

<h3>Size</h3>
<p>Size of the icons can easily be changed using font-size property.</p>
<pre name="code" class="brush:xml">
&lt;i class="pi pi-check"&gt;&lt;/i&gt;
</pre>
<i class="pi pi-check"></i>
<pre name="code" class="brush:xml">
&lt;i class="pi pi-check" style="font-size: 3em"&gt;&lt;/i&gt;
</pre>
<i class="pi pi-check" style="font-size: 3em"></i>

<h3>Spinning Animation</h3>
<p>Special pi-spin class applies infinite rotate to an icon.</p>
<pre name="code" class="brush:xml">
&lt;i class="pi pi-spin pi-spinner" style="font-size: 3em"&gt;&lt;/i&gt;
</pre>
<i class="pi pi-spin pi-spinner" style="font-size: 3em"></i>

<h3>List of Icons</h3>
<p>Here is the current list of PrimeIcons, more icons will be added periodically. You may also <a href="https://github.com/primefaces/primeicons/issues">request new icons</a> at the issue tracker.</p>

<p:inputText onkeyup="onFilter(event)" style="width:100%; margin: 16px 0px 26px; padding: 1em;" placeholder="Search an icon" />

<div class="p-grid">
    <ui:repeat value="#{primeIconsView.icons}" var="icon">
        <div class="p-col-12 p-md-3 p-lg-2 icon-container" data-name="#{icon.name}" data-key="#{icon.key}">
            <i class="pi pi-#{icon.name}"></i>
            <div>#{icon.name}</div>
        </div>
    </ui:repeat>
</div>

<div class="iconInfo">
    <div class="iconInfo-header">
        <span>Selected Icon Info</span>
        <a href="#" class="iconInfo-close" onclick="closeInfo(event)">
            <i class="pi pi-times"></i>
        </a>
        <span class="copied-text">Copied!</span>
    </div>
    <div class="icon-text"></div>
    <p:inputText styleClass="icon-sample-input" readonly="true" onclick="copyText(event)"/>
</div>