UDES (169 glyphs)
Grid
Cheatsheet
Details
16
24
36
50
64
72
100
Pp
Editor
.icons8-print
<i class="icons8-print"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-bookmark-book
<i class="icons8-bookmark-book"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-share-squared
<i class="icons8-share-squared"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-share-arrow-squared
<i class="icons8-share-arrow-squared"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-delete
<i class="icons8-delete"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-plus
<i class="icons8-plus"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-search
<i class="icons8-search"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-upload-to-the-cloud
<i class="icons8-upload-to-the-cloud"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-picture
<i class="icons8-picture"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-document
<i class="icons8-document"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-support
<i class="icons8-support"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-settings
<i class="icons8-settings"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-puzzle
<i class="icons8-puzzle"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-calendar
<i class="icons8-calendar"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-female-user
<i class="icons8-female-user"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-user-male
<i class="icons8-user-male"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-idea
<i class="icons8-idea"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-exclamation-mark
<i class="icons8-exclamation-mark"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-inspection
<i class="icons8-inspection"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-business-conference-female-speaker
<i class="icons8-business-conference-female-speaker"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-brainstorm
<i class="icons8-brainstorm"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-attach-resume-male
<i class="icons8-attach-resume-male"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-organization-chart-people
<i class="icons8-organization-chart-people"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-demand
<i class="icons8-demand"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-speaker-notes
<i class="icons8-speaker-notes"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-internet
<i class="icons8-internet"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-people-working-together
<i class="icons8-people-working-together"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-technical-support
<i class="icons8-technical-support"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-approval
<i class="icons8-approval"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-mail-account
<i class="icons8-mail-account"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-shared-mail
<i class="icons8-shared-mail"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-accuracy
<i class="icons8-accuracy"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-address-book
<i class="icons8-address-book"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-communication
<i class="icons8-communication"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-inspection-2
<i class="icons8-inspection-2"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-video-conference
<i class="icons8-video-conference"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-businessman
<i class="icons8-businessman"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-businesswoman
<i class="icons8-businesswoman"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-security-pass
<i class="icons8-security-pass"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-salary-male
<i class="icons8-salary-male"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-add-reminder
<i class="icons8-add-reminder"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-collect
<i class="icons8-collect"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-financial-tasks
<i class="icons8-financial-tasks"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-hierarchy
<i class="icons8-hierarchy"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-high-priority
<i class="icons8-high-priority"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-important-book
<i class="icons8-important-book"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-leave
<i class="icons8-leave"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-marketing
<i class="icons8-marketing"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-planner
<i class="icons8-planner"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-process
<i class="icons8-process"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-finance-document
<i class="icons8-finance-document"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-documents
<i class="icons8-documents"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-no-data-availible
<i class="icons8-no-data-availible"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-petition
<i class="icons8-petition"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-signature
<i class="icons8-signature"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-sign-document
<i class="icons8-sign-document"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-rubber-stamp
<i class="icons8-rubber-stamp"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-rules
<i class="icons8-rules"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-statistics-report
<i class="icons8-statistics-report"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-coins
<i class="icons8-coins"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-fund-accounting
<i class="icons8-fund-accounting"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-online-payment-with-a-credit-card
<i class="icons8-online-payment-with-a-credit-card"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-profit-analysis
<i class="icons8-profit-analysis"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-job
<i class="icons8-job"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-for-you
<i class="icons8-for-you"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-news
<i class="icons8-news"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-audit
<i class="icons8-audit"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-shortlist
<i class="icons8-shortlist"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-what-i-do
<i class="icons8-what-i-do"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-tasklist
<i class="icons8-tasklist"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-comments
<i class="icons8-comments"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-flow-chart
<i class="icons8-flow-chart"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-lecturer
<i class="icons8-lecturer"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-mission
<i class="icons8-mission"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-presentation
<i class="icons8-presentation"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-prototype
<i class="icons8-prototype"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-voice-recognition
<i class="icons8-voice-recognition"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-submit-resume
<i class="icons8-submit-resume"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-download-resume
<i class="icons8-download-resume"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-applicant
<i class="icons8-applicant"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-human-resources
<i class="icons8-human-resources"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-resume
<i class="icons8-resume"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-business-report
<i class="icons8-business-report"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-graph-report-script
<i class="icons8-graph-report-script"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-customer-support
<i class="icons8-customer-support"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-guarantee
<i class="icons8-guarantee"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-request-service
<i class="icons8-request-service"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-schoolboy-at-a-desk
<i class="icons8-schoolboy-at-a-desk"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-cv
<i class="icons8-cv"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-smart-card
<i class="icons8-smart-card"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-accounting
<i class="icons8-accounting"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-business
<i class="icons8-business"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-business-management
<i class="icons8-business-management"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-estimate
<i class="icons8-estimate"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-satisfaction
<i class="icons8-satisfaction"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-phone-book
<i class="icons8-phone-book"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-office-phone
<i class="icons8-office-phone"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-spell-check
<i class="icons8-spell-check"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-workstation
<i class="icons8-workstation"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-monitor
<i class="icons8-monitor"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-sprout
<i class="icons8-sprout"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-company-assets
<i class="icons8-company-assets"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-investment
<i class="icons8-investment"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-bank-card-dollar
<i class="icons8-bank-card-dollar"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-pay-date
<i class="icons8-pay-date"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-receipt-approved
<i class="icons8-receipt-approved"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-currency-settings
<i class="icons8-currency-settings"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-money-bag
<i class="icons8-money-bag"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-money-box
<i class="icons8-money-box"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-truck
<i class="icons8-truck"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-gift
<i class="icons8-gift"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-address
<i class="icons8-address"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-add-to-favorites
<i class="icons8-add-to-favorites"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-connected-people
<i class="icons8-connected-people"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-day-off
<i class="icons8-day-off"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-today
<i class="icons8-today"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-event-accepted-tentatively
<i class="icons8-event-accepted-tentatively"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-event-accepted
<i class="icons8-event-accepted"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-calendar-plus
<i class="icons8-calendar-plus"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-event-declined
<i class="icons8-event-declined"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-art-track
<i class="icons8-art-track"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-video-playlist
<i class="icons8-video-playlist"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-add-book
<i class="icons8-add-book"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-books
<i class="icons8-books"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-physics-book
<i class="icons8-physics-book"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-wordbook
<i class="icons8-wordbook"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-certificate
<i class="icons8-certificate"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-diploma
<i class="icons8-diploma"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-attendance
<i class="icons8-attendance"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-book-and-pencil
<i class="icons8-book-and-pencil"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-graduation-cap
<i class="icons8-graduation-cap"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-graduation-scroll
<i class="icons8-graduation-scroll"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-machine-learning
<i class="icons8-machine-learning"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-reading
<i class="icons8-reading"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-student-registration
<i class="icons8-student-registration"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-tuition
<i class="icons8-tuition"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-microscope
<i class="icons8-microscope"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-school-supplies
<i class="icons8-school-supplies"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-graduate
<i class="icons8-graduate"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-student-male
<i class="icons8-student-male"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-test-results
<i class="icons8-test-results"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-scholarship
<i class="icons8-scholarship"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-key-2
<i class="icons8-key-2"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-unlock
<i class="icons8-unlock"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-attach
<i class="icons8-attach"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-get-quote
<i class="icons8-get-quote"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-note
<i class="icons8-note"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-quote-left
<i class="icons8-quote-left"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-sent
<i class="icons8-sent"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-sheet
<i class="icons8-sheet"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-composing-mail
<i class="icons8-composing-mail"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-database-mail
<i class="icons8-database-mail"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-download-mail
<i class="icons8-download-mail"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-subscription
<i class="icons8-subscription"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-link
<i class="icons8-link"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-star
<i class="icons8-star"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-heart
<i class="icons8-heart"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-message-quality
<i class="icons8-message-quality"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-message-promotion
<i class="icons8-message-promotion"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-paper-clamp
<i class="icons8-paper-clamp"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-doctors-bag
<i class="icons8-doctors-bag"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-stethoscope
<i class="icons8-stethoscope"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-cancer-ribbon
<i class="icons8-cancer-ribbon"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-pin
<i class="icons8-pin"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-web-application-firewall
<i class="icons8-web-application-firewall"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-bios
<i class="icons8-bios"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-stack
<i class="icons8-stack"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-laptop-settings
<i class="icons8-laptop-settings"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
.icons8-engineer
<i class="icons8-engineer"></i>

<i data-icons8=""></i>
<i class="icons8"></i>
CSS
Unzip your copy of web-font into your project. In the <head>
of your html add link to CSS file:
<link rel="stylesheet" href="/path/to/your-font/css/styles.min.css">
In html you may insert icons like that:
<i class="icons8-print"></i>
<i data-icons8=""></i>
<i class="icons8"></i>
Basic LESS
Unzip your copy of web-font into your project. In your LESS file @import
LESS styles from web-font:
@import "path/to/your-font/less/styles.less";
Advanced LESS
@import "path/to/your-font/less/variables.less";
@import "path/to/your-font/less/core.less";
@import "path/to/your-font/less/paths.less";
@import "path/to/your-font/less/icons.less";
// make glyph alias with custom behavior
.some-new-icon:after { // <i class="some-new-icon"></i> is the same as <i class="icons8-print"></i>
.icons8-font();
font-size: 2em; // modify something, size or color maybe
content: @icons8-var-print;
}
Basic SCSS
Unzip your copy of web-font into your project. In your SCSS file @import
SCSS styles from web-font:
@import "path/to/your-font/scss/styles.scss";
Advanced SCSS
@import "path/to/your-font/scss/variables";
@import "path/to/your-font/scss/core";
@import "path/to/your-font/scss/paths";
@import "path/to/your-font/scss/icons";
// make glyph alias with custom behavior
.some-new-icon:after { // <i class="some-new-icon"></i> is the same as <i class="icons8-print"></i>
@include icons8-font();
font-size: 2em; // modify something, size or color maybe
content: $icons8-var-print;
}