Comprehensive collection of web fonts, icons, and animations for the Quasar Framework
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Bootstrap Icons, Eva Icons, Themify Icons, and Line Awesome provide additional icon choices for specific design needs and preferences.
Official icon library for Bootstrap with simple, clean designs.
/**
* Bootstrap Icons v1.13.1 SVG exports
* Clean, consistent icons designed for Bootstrap framework
*/
export declare const biHouse: string;
export declare const biHouseFill: string;
export declare const biHouseDoor: string;
export declare const biHouseDoorFill: string;
export declare const biPerson: string;
export declare const biPersonFill: string;
export declare const biPersonCircle: string;
export declare const biPersonBadge: string;
export declare const biGear: string;
export declare const biGearFill: string;
export declare const biGearWide: string;
export declare const biGearWideConnected: string;
export declare const biPlus: string;
export declare const biPlusCircle: string;
export declare const biPlusCircleFill: string;
export declare const biPlusSquare: string;
export declare const biPlusSquareFill: string;
export declare const biDash: string;
export declare const biDashCircle: string;
export declare const biDashCircleFill: string;
export declare const biDashSquare: string;
export declare const biDashSquareFill: string;
export declare const biX: string;
export declare const biXCircle: string;
export declare const biXCircleFill: string;
export declare const biXSquare: string;
export declare const biXSquareFill: string;
export declare const biCheck: string;
export declare const biCheck2: string;
export declare const biCheckAll: string;
export declare const biCheckCircle: string;
export declare const biCheckCircleFill: string;
export declare const biCheckSquare: string;
export declare const biCheckSquareFill: string;
export declare const biExclamation: string;
export declare const biExclamationCircle: string;
export declare const biExclamationCircleFill: string;
export declare const biExclamationTriangle: string;
export declare const biExclamationTriangleFill: string;
export declare const biInfo: string;
export declare const biInfoCircle: string;
export declare const biInfoCircleFill: string;
export declare const biInfoSquare: string;
export declare const biInfoSquareFill: string;
export declare const biQuestion: string;
export declare const biQuestionCircle: string;
export declare const biQuestionCircleFill: string;
export declare const biQuestionSquare: string;
export declare const biQuestionSquareFill: string;
export declare const biSearch: string;
export declare const biEye: string;
export declare const biEyeFill: string;
export declare const biEyeSlash: string;
export declare const biEyeSlashFill: string;
export declare const biPencil: string;
export declare const biPencilFill: string;
export declare const biPencilSquare: string;
export declare const biTrash: string;
export declare const biTrashFill: string;
export declare const biTrash2: string;
export declare const biTrash2Fill: string;
export declare const biDownload: string;
export declare const biUpload: string;
export declare const biShare: string;
export declare const biShareFill: string;
export declare const biHeart: string;
export declare const biHeartFill: string;
export declare const biStar: string;
export declare const biStarFill: string;
export declare const biStarHalf: string;
export declare const biHandThumbsUp: string;
export declare const biHandThumbsUpFill: string;
export declare const biHandThumbsDown: string;
export declare const biHandThumbsDownFill: string;
export declare const biChatDots: string;
export declare const biChatDotsFill: string;
export declare const biEnvelope: string;
export declare const biEnvelopeFill: string;
export declare const biTelephone: string;
export declare const biTelephoneFill: string;
export declare const biBell: string;
export declare const biBellFill: string;
export declare const biCalendar: string;
export declare const biCalendarFill: string;
export declare const biCalendar2: string;
export declare const biCalendar2Fill: string;
export declare const biClock: string;
export declare const biClockFill: string;
export declare const biGeoAlt: string;
export declare const biGeoAltFill: string;
export declare const biLock: string;
export declare const biLockFill: string;
export declare const biUnlock: string;
export declare const biUnlockFill: string;
export declare const biCart: string;
export declare const biCartFill: string;
export declare const biCreditCard: string;
export declare const biCreditCardFill: string;
export declare const biCurrencyDollar: string;
export declare const biCurrencyEuro: string;
export declare const biList: string;
export declare const biThreeDots: string;
export declare const biThreeDotsVertical: string;
export declare const biChevronUp: string;
export declare const biChevronDown: string;
export declare const biChevronLeft: string;
export declare const biChevronRight: string;
export declare const biArrowUp: string;
export declare const biArrowDown: string;
export declare const biArrowLeft: string;
export declare const biArrowRight: string;
// ... hundreds more Bootstrap iconsUsage Examples:
import {
biHouse,
biPerson,
biGear,
biPlus,
biTrash,
biPencil,
biHeart,
biShare
} from "@quasar/extras/bootstrap-icons";
// Use with Quasar QIcon
<template>
<q-icon :name="homeIcon" />
<q-btn :icon="addIcon" />
<q-btn :icon="editIcon" />
<q-btn :icon="deleteIcon" />
</template>
<script>
export default {
data() {
return {
homeIcon: biHouse,
personIcon: biPerson,
gearIcon: biGear,
addIcon: biPlus,
editIcon: biPencil,
deleteIcon: biTrash,
heartIcon: biHeart,
shareIcon: biShare
};
}
}
</script>Beautiful outline icons with consistent design and optimal clarity.
/**
* Eva Icons v1.1.3 SVG exports
* Beautiful outline icons with consistent design
*/
export declare const evaActivity: string;
export declare const evaActivityOutline: string;
export declare const evaHome: string;
export declare const evaHomeOutline: string;
export declare const evaPerson: string;
export declare const evaPersonOutline: string;
export declare const evaSettings: string;
export declare const evaSettingsOutline: string;
export declare const evaSettings2: string;
export declare const evaSettings2Outline: string;
export declare const evaPlus: string;
export declare const evaPlusOutline: string;
export declare const evaPlusCircle: string;
export declare const evaPlusCircleOutline: string;
export declare const evaPlusSquare: string;
export declare const evaPlusSquareOutline: string;
export declare const evaMinus: string;
export declare const evaMinusOutline: string;
export declare const evaMinusCircle: string;
export declare const evaMinusCircleOutline: string;
export declare const evaMinusSquare: string;
export declare const evaMinusSquareOutline: string;
export declare const evaClose: string;
export declare const evaCloseOutline: string;
export declare const evaCloseCircle: string;
export declare const evaCloseCircleOutline: string;
export declare const evaCloseSquare: string;
export declare const evaCloseSquareOutline: string;
export declare const evaCheckmark: string;
export declare const evaCheckmarkOutline: string;
export declare const evaCheckmarkCircle: string;
export declare const evaCheckmarkCircleOutline: string;
export declare const evaCheckmarkSquare: string;
export declare const evaCheckmarkSquareOutline: string;
export declare const evaAlert: string;
export declare const evaAlertOutline: string;
export declare const evaAlertCircle: string;
export declare const evaAlertCircleOutline: string;
export declare const evaAlertTriangle: string;
export declare const evaAlertTriangleOutline: string;
export declare const evaInfo: string;
export declare const evaInfoOutline: string;
export declare const evaQuestion: string;
export declare const evaQuestionOutline: string;
export declare const evaQuestionMark: string;
export declare const evaQuestionMarkOutline: string;
export declare const evaSearch: string;
export declare const evaSearchOutline: string;
export declare const evaEye: string;
export declare const evaEyeOutline: string;
export declare const evaEyeOff: string;
export declare const evaEyeOffOutline: string;
export declare const evaEdit: string;
export declare const evaEditOutline: string;
export declare const evaEdit2: string;
export declare const evaEdit2Outline: string;
export declare const evaTrash: string;
export declare const evaTrashOutline: string;
export declare const evaTrash2: string;
export declare const evaTrash2Outline: string;
export declare const evaDownload: string;
export declare const evaDownloadOutline: string;
export declare const evaUpload: string;
export declare const evaUploadOutline: string;
export declare const evaShare: string;
export declare const evaShareOutline: string;
export declare const evaHeart: string;
export declare const evaHeartOutline: string;
export declare const evaStar: string;
export declare const evaStarOutline: string;
export declare const evaThumbsUp: string;
export declare const evaThumbsUpOutline: string;
export declare const evaThumbsDown: string;
export declare const evaThumbsDownOutline: string;
export declare const evaMessage: string;
export declare const evaMessageOutline: string;
export declare const evaMessageCircle: string;
export declare const evaMessageCircleOutline: string;
export declare const evaMessageSquare: string;
export declare const evaMessageSquareOutline: string;
export declare const evaEmail: string;
export declare const evaEmailOutline: string;
export declare const evaPhone: string;
export declare const evaPhoneOutline: string;
export declare const evaBell: string;
export declare const evaBellOutline: string;
export declare const evaBellOff: string;
export declare const evaBellOffOutline: string;
export declare const evaCalendar: string;
export declare const evaCalendarOutline: string;
export declare const evaClock: string;
export declare const evaClockOutline: string;
export declare const evaPin: string;
export declare const evaPinOutline: string;
export declare const evaLock: string;
export declare const evaLockOutline: string;
export declare const evaUnlock: string;
export declare const evaUnlockOutline: string;
export declare const evaShoppingBag: string;
export declare const evaShoppingBagOutline: string;
export declare const evaShoppingCart: string;
export declare const evaShoppingCartOutline: string;
export declare const evaCreditCard: string;
export declare const evaCreditCardOutline: string;
// ... more Eva iconsThemify Icons collection with web design focus.
/**
* Themify Icons v1.0.1 SVG exports
* Web-focused icon collection
*/
export declare const tiHome: string;
export declare const tiUser: string;
export declare const tiSettings: string;
export declare const tiPlus: string;
export declare const tiMinus: string;
export declare const tiClose: string;
export declare const tiCheck: string;
export declare const tiAlert: string;
export declare const tiInfo: string;
export declare const tiHelp: string;
export declare const tiSearch: string;
export declare const tiEye: string;
export declare const tiPencil: string;
export declare const tiTrash: string;
export declare const tiSave: string;
export declare const tiDownload: string;
export declare const tiUpload: string;
export declare const tiShare: string;
export declare const tiHeart: string;
export declare const tiStar: string;
export declare const tiThumbUp: string;
export declare const tiThumbDown: string;
export declare const tiComment: string;
export declare const tiEmail: string;
export declare const tiMobile: string;
export declare const tiAlarm: string;
export declare const tiCalendar: string;
export declare const tiTime: string;
export declare const tiLocation: string;
export declare const tiLock: string;
export declare const tiUnlock: string;
export declare const tiShoppingCart: string;
export declare const tiCreditCard: string;
export declare const tiMoney: string;
export declare const tiMenu: string;
export declare const tiMore: string;
export declare const tiMoreAlt: string;
export declare const tiAngleUp: string;
export declare const tiAngleDown: string;
export declare const tiAngleLeft: string;
export declare const tiAngleRight: string;
export declare const tiArrowUp: string;
export declare const tiArrowDown: string;
export declare const tiArrowLeft: string;
export declare const tiArrowRight: string;
// ... more Themify iconsFontAwesome alternative with line-style icons.
/**
* Line Awesome v1.3.0 SVG exports
* Line-style alternative to FontAwesome
*/
// Solid style (las prefix)
export declare const lasHome: string;
export declare const lasUser: string;
export declare const lasUsers: string;
export declare const lasCog: string;
export declare const lasPlus: string;
export declare const lasMinus: string;
export declare const lasTimes: string;
export declare const lasCheck: string;
export declare const lasExclamation: string;
export declare const lasExclamationTriangle: string;
export declare const lasInfo: string;
export declare const lasInfoCircle: string;
export declare const lasQuestion: string;
export declare const lasQuestionCircle: string;
export declare const lasSearch: string;
export declare const lasEye: string;
export declare const lasEyeSlash: string;
export declare const lasPen: string;
export declare const lasEdit: string;
export declare const lasTrash: string;
export declare const lasTrashAlt: string;
export declare const lasSave: string;
export declare const lasDownload: string;
export declare const lasUpload: string;
export declare const lasShare: string;
export declare const lasShareAlt: string;
export declare const lasHeart: string;
export declare const lasStar: string;
export declare const lasThumbsUp: string;
export declare const lasThumbsDown: string;
export declare const lasComments: string;
export declare const lasComment: string;
export declare const lasEnvelope: string;
export declare const lasPhone: string;
export declare const lasBell: string;
export declare const lasCalendar: string;
export declare const lasCalendarAlt: string;
export declare const lasClock: string;
export declare const lasMapMarker: string;
export declare const lasMapMarkerAlt: string;
export declare const lasLock: string;
export declare const lasUnlock: string;
export declare const lasShoppingCart: string;
export declare const lasCreditCard: string;
export declare const lasDollarSign: string;
export declare const lasBars: string;
export declare const lasEllipsisV: string;
export declare const lasEllipsisH: string;
export declare const lasChevronUp: string;
export declare const lasChevronDown: string;
export declare const lasChevronLeft: string;
export declare const lasChevronRight: string;
export declare const lasArrowUp: string;
export declare const lasArrowDown: string;
export declare const lasArrowLeft: string;
export declare const lasArrowRight: string;
// Regular style (lar prefix)
export declare const larUser: string;
export declare const larEdit: string;
export declare const larTrashAlt: string;
export declare const larSave: string;
export declare const larCopy: string;
export declare const larFile: string;
export declare const larFolder: string;
export declare const larFolderOpen: string;
export declare const larHeart: string;
export declare const larStar: string;
export declare const larThumbsUp: string;
export declare const larThumbsDown: string;
export declare const larComments: string;
export declare const larComment: string;
export declare const larEnvelope: string;
export declare const larBell: string;
export declare const larCalendar: string;
export declare const larCalendarAlt: string;
export declare const larClock: string;
export declare const larEye: string;
export declare const larEyeSlash: string;
// Brand style (lab prefix)
export declare const labFacebook: string;
export declare const labTwitter: string;
export declare const labGoogle: string;
export declare const labGithub: string;
export declare const labLinkedin: string;
export declare const labInstagram: string;
export declare const labYoutube: string;
export declare const labApple: string;
export declare const labMicrosoft: string;
export declare const labAmazon: string;
// ... more Line Awesome iconsAll additional icon libraries support webfont usage with their respective CSS imports.
/* Import CSS for webfont usage */
@import '@quasar/extras/bootstrap-icons/bootstrap-icons.css';
@import '@quasar/extras/eva-icons/eva-icons.css';
@import '@quasar/extras/themify/themify.css';
@import '@quasar/extras/line-awesome/line-awesome.css';<!-- Bootstrap Icons -->
<i class="bi bi-house"></i>
<i class="bi bi-person"></i>
<i class="bi bi-gear"></i>
<!-- Eva Icons -->
<i class="eva eva-home"></i>
<i class="eva eva-home-outline"></i>
<i class="eva eva-person"></i>
<!-- Themify Icons -->
<i class="ti ti-home"></i>
<i class="ti ti-user"></i>
<i class="ti ti-settings"></i>
<!-- Line Awesome -->
<i class="las la-home"></i>
<i class="lar la-user"></i>
<i class="lab la-facebook"></i><!-- With Quasar QIcon component -->
<q-icon name="bi-house" />
<q-icon name="eva-home-outline" />
<q-icon name="ti-home" />
<q-icon name="las la-home" />bi (e.g., biHouse, biPerson)bi- (e.g., bi-house, bi-person)Fill (e.g., biHouseFill)eva (e.g., evaHome, evaPerson)eva- (e.g., eva-home, eva-person)Outline (e.g., evaHomeOutline)ti (e.g., tiHome, tiUser)ti- (e.g., ti-home, ti-user)las, lar, lab (e.g., lasHome, larUser, labFacebook)las la-home, lar la-user, lab la-facebook)Install with Tessl CLI
npx tessl i tessl/npm-quasar--extras