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.

heart
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>