Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
quasar-extras-svg-icons
Advanced tools
Build high-performance VueJS user interfaces in record time: responsive Single Page Apps, SSR Apps, PWAs, Browser extensions, Hybrid Mobile Apps and Electron Apps. If you want, all using the same codebase!
npm install quasar-extras-svg-icons
# or
yarn add quasar-extras-svg-icons
Why this package? Because it strips down unnecessary package files (so faster download times), all in one place, tested and ready to use with Quasar. One other reason is that this package complements the @quasar/extras
package by adding additional SVG Icons that you can use in your Quasar apps. These SVG icons have gone though a process known as flattening
. As mentioned, it strips out unnecessay code to make them smaller and more efficient. Unfortunately, not all icon sets meet this criteria and fail.
Additonally, most icon sets have fixed colors. Our flattening process also includes the ability to change these colors to 'currentColor' so you have more control over the way the icon looks when you use our icon sets. Of course, this doesn't apply to some icons sets where the fixed colors are mandatory (like flags). In some cases, we have created a "two-tone" icon set by not only employing the 'currentColor', but then also using 'currentColor' with an opacity in the same icon.
Many of the icon sets are not installable via NPM or NPM version does not coincide with GitHub version (out of sync), so this may be the only way to access them without bloating your project.
Plus, Typescript type definition files are generated so you won't get any warnings when using the icons.
Additionally, everytime there is a major release of an Icon Set, we preserve the previous 2 versions for a total of 3 versions.
Please make sure you have latest quasar-extras-svg-icons
npm package version installed into your project folder in order for you to benefit from everything below.
You can find the latest documentation at quasar-extras-svg-icons.netlify.app
Quasar v1.7+ required for svg Quasar Icon Sets.
Vendor | Version | Import SVG Icons as | Prefix | License |
---|---|---|---|---|
Akar Icons | 1.9.28 | quasar-extras-svg-icons/akar-icons | akar | License |
Ant Design Icons | 4.3.1 | quasar-extras-svg-icons/ant-design-icons | antOutlined , antFilled , antTwoTone | License |
Box Icons | 2.1.4 | quasar-extras-svg-icons/box-icons | bx , bxl , bxs | License |
Brand Icons | 2.0.0 | quasar-extras-svg-icons/brand-icons | brnd | License |
Brandico Icons | 0.0.0 | quasar-extras-svg-icons/brandico-icons | brico | License |
Bytesize Icons | 1.4.0 | quasar-extras-svg-icons/bytesize-icons | byte | License |
Carbon Icons | 11.30.1 | quasar-extras-svg-icons/carbon-icons-v11 | carbon | License |
Carbon Icons | 10.48.0 | quasar-extras-svg-icons/carbon-icons | carbon | License |
Carbon Pictograms | 12.26.1 | quasar-extras-svg-icons/carbon-pictograms-v12 | carpic | License |
Carbon Pictograms | 11.24.0 | quasar-extras-svg-icons/carbon-pictograms | carpic | License |
Clarity Icons (@cds/core) v6 | 6.9.0 | quasar-extras-svg-icons/clarity-icons-v6 | clarity | License |
Clarity Icons (@cds/core) | 5.7.1 | quasar-extras-svg-icons/clarity-icons | clarity | License |
Codicons (vscode) | 0.0.35 | quasar-extras-svg-icons/condicons | codi | License |
Cool Icons | 2.5.0 | quasar-extras-svg-icons/cool-icons | cool | License |
CoreUI Icons | 3.0.1 | quasar-extras-svg-icons/coreui-icons-v3 | cui , cib , cif | License |
CoreUI Icons | 2.1.0 | quasar-extras-svg-icons/coreui-icons | cui , cib , cif | License |
Country Flag Icons | 1.5.9 | quasar-extras-svg-icons/country-flag-icons | flag | License |
Dashicons | 0.9.0 | quasar-extras-svg-icons/dashicons | dash | License |
Devicons | 1.8.0 | quasar-extras-svg-icons/dev-icons | dev | License |
Drip Icons | 2.0.0 | quasar-extras-svg-icons/drip-icons | drip | License |
Elusive Icons | 1.10.1 | quasar-extras-svg-icons/elusive-icons | eli | License |
Entypo+ Icons | 2.2.1 | quasar-extras-svg-icons/entypo-icons | entypo | License |
Evil Icons | 1.10.1 | quasar-extras-svg-icons/evil-icons | ei | License |
Feather Icons | 4.29.1 | quasar-extras-svg-icons/feather-icons | feather | License |
Flat Color Icons (Icons8) | 1.1.0 | quasar-extras-svg-icons/flat-color-icons | fci | License |
FlatUI Icons | 1.4.0 | quasar-extras-svg-icons/flatui-icons | flat | License |
Fluent UI System Icons | 1.1.223 | quasar-extras-svg-icons/fluentui-system-icons | fui | License |
Fontisto Icons | 3.0.4 | quasar-extras-svg-icons/fontisto-icons | fontisto | License |
Foundation Icons | 0.1.1 | quasar-extras-svg-icons/foundation-icons | fi | License |
Geom Icons | 3.0.0-beta.1 | quasar-extras-svg-icons/grid-icons | geom | License |
GitLab Icons v3 | 3.71.0 | quasar-extras-svg-icons/gitlab-icons-v3 | gitlab | License |
GitLab Icons | 2.33.0 | quasar-extras-svg-icons/gitlab-icons | gitlab | License |
Glyphs Brands | v0.1.9 | quasar-extras-svg-icons/glyphs-brands | glyphsBrandsThin , glyphsBrandsSolid | License |
Glyphs Core Icons | v0.8.12 | quasar-extras-svg-icons/glyphs-core-icons | glyphsCoreBold , glyphsCoreDuo , glyphsCoreOutline , glyphsCoreThin , glyphsCorePoly | License |
Grid Icons | 3.4.0 | quasar-extras-svg-icons/grid-icons | gridicons | License |
Health Icons | 0.1.0 | quasar-extras-svg-icons/health-icons | health | License |
Hero Icons v2 | 2.0.18 | quasar-extras-svg-icons/hero-icons-v2 | heroOutline , heroSolid | License |
Hero Icons | 1.0.6 | quasar-extras-svg-icons/hero-icons | heroOutline , heroSolid | License |
Icomoon Free Icons | 0.0.0 | quasar-extras-svg-icons/icomoon-free-icons | icomoonFree | License |
Iconoir Icons v7 | 7.0.3 | quasar-extras-svg-icons/iconoir-icons-v7 | ico | License |
Iconoir Icons v6 | 6.11.0 | quasar-extras-svg-icons/iconoir-icons-v6 | ico | License |
Iconoir Icons v5 | 5.5.2 | quasar-extras-svg-icons/iconoir-icons-v5 | ico | License |
IconPark Icons | 1.0.0 | quasar-extras-svg-icons/iconpark-icons | ip | License |
IconPark Icons | 1.0.0 | quasar-extras-svg-icons/iconpark-icons | ip | License |
IconPark Icons | 1.0.0 | quasar-extras-svg-icons/iconpark-icons | ip | License |
Ikonate | 1.1.1 | quasar-extras-svg-icons/ikonate | ikonate | License |
Ikons | 0.0.0 | quasar-extras-svg-icons/ikons | ikons | License |
Jam Icons | 2.0.0 | quasar-extras-svg-icons/jam-icons | jam | License |
Keyrune Icons | 3.13.1 | quasar-extras-svg-icons/keyrune-icons | keyrune | License |
Linear Icons | 1.0.2 | quasar-extras-svg-icons/linear-icons | lnr | License |
Linecons | 0.0.0 | quasar-extras-svg-icons/linecons | lcons | License |
Maki Icons (Mapbox) v8 | 8.0.1 | quasar-extras-svg-icons/maki-icons-v8 | maki | License |
Maki Icons (Mapbox) | 7.1.0 | quasar-extras-svg-icons/maki-icons | maki | License |
Map Icons | 3.0.3 | quasar-extras-svg-icons/map-icons | map | License |
Material Line Icons | 0.2.19 | quasar-extras-svg-icons/material-line-icons | matLine | License |
Material Theme Icons v3 | 3.2.0 | quasar-extras-svg-icons/material-theme-icons-v3 | mti | License |
Material Theme Icons | 2.7.5 | quasar-extras-svg-icons/material-theme-icons | mti | License |
Modern Icons | 0.0.0 | quasar-extras-svg-icons/modern-icons | modern | License |
Octicons (Primer) v19 | 19.8.0 | quasar-extras-svg-icons/oct-icons-v19 | oct | License |
Octicons (Primer) v18 | 18.3.0 | quasar-extras-svg-icons/oct-icons-v18 | oct | License |
Octicons (Primer) v17 | 17.11.1 | quasar-extras-svg-icons/oct-icons-v17 | oct | License |
Open Iconic | 1.1.1 | quasar-extras-svg-icons/open-iconic | oi | License |
Openmoji Icons | 14.0.0 | quasar-extras-svg-icons/openmoji-icons-v14 | om , omc | License |
Openmoji Icons | 13.1.0 | quasar-extras-svg-icons/openmoji-icons | om , omc | License |
Phosphor Icons v2 | 2.0.3 | quasar-extras-svg-icons/phosphor-icons-v2 | pp | License |
Phosphor Icons | 1.4.2 | quasar-extras-svg-icons/phosphor-icons | pp | License |
Pixelart Icons | 1.7.0 | quasar-extras-svg-icons/pixelart-icons | pix | License |
Prime Icons | 6.0.1 | quasar-extras-svg-icons/prime-icons-v6 | prime | License |
PrimeIcons | 5.0.0 | quasar-extras-svg-icons/prime-icons | prime | License |
Radix-UI Icon | 1.3.0 | quasar-extras-svg-icons/radix-ui-icons | radix | License |
Remix Icon | 3.6.0 | quasar-extras-svg-icons/remix-icons-v3 | rem | License |
Remix Icon | 2.5.0 | quasar-extras-svg-icons/remix-icons | rem | License |
Simple Icons v10 | 10.0.0 | quasar-extras-svg-icons/simple-icons-v10 | sim | License |
Simple Icons v9 | 9.19.1 | quasar-extras-svg-icons/simple-icons-v9 | sim | License |
Simple Icons v8 | 8.14.0 | quasar-extras-svg-icons/simple-icons-v8 | sim | License |
Simple Icons v7 | 7.21.0 | quasar-extras-svg-icons/simple-icons-v7 | sim | License |
Simple Icons | 6.22.0 | quasar-extras-svg-icons/simple-icons | sim | License |
Simple Line Icons | 2.5.5 | quasar-extras-svg-icons/simple-line-icons | sli | License |
Stroke 7 Icons (Pixeden) | 1.2.3 | quasar-extras-svg-icons/stroke7-icons | strk7 | License |
Subway Icons | 0.0.0 | quasar-extras-svg-icons/subway-icons | sub | License |
System UIcons | 0.0.0 | quasar-extras-svg-icons/system-uicons | sui | License |
Tabler Icons | 2.42.0 | quasar-extras-svg-icons/tabler-icons-v2 | tab , tabBrand | License |
Tabler Icons | 1.119.0 | quasar-extras-svg-icons/tabler-icons | tab , tabBrand | License |
Teeny Icons | 0.4.1 | quasar-extras-svg-icons/teeny-icons | teenyOutline , teenySolid | License |
Typicons | 2.1.2 | quasar-extras-svg-icons/typ-icons | typ | License |
UIW Icons | 2.6.18 | quasar-extras-svg-icons/uiw-icons | uiw | License |
Unicons | 4.0.8 | quasar-extras-svg-icons/unicons | uni , uniSolid , uniThin | License |
Vaadin Icons v24 | 24.2.4 | quasar-extras-svg-icons/vaadin-icons-v24 | vaadin | License |
Vaadin Icons v23 | 23.3.7 | quasar-extras-svg-icons/vaadin-icons-v23 | vaadin | License |
Vaadin Icons | 22.0.6 | quasar-extras-svg-icons/vaadin-icons | vaadin | License |
Weather Icons | 2.0.12 | quasar-extras-svg-icons/weather-icons | wi | License |
Webfont Medical Icons | 1.0.0 | quasar-extras-svg-icons/webfont-medical-icons | wmed | License |
Windows Icons | 0.0.0 | quasar-extras-svg-icons/windows-icons | appbar | License |
Zond Icons | 1.2.0 | quasar-extras-svg-icons/zond-icons | zond | License |
Example (with Vue Composition API):
// some .vue file in devland
<template>
<div>
<q-icon :name="tabMenu" />
<q-btn :icon="pixCalendarMonth" />
</div>
</template>
<script>
import { tabMenu } from 'quasar-extras-svg-icons/tabler-icons'
import { pixCalendarMonth } from 'quasar-extras-svg-icons/pixelart-icons'
export default {
// ...
setup () {
return {
tabMenu
pixCalendarMonth
}
}
}
Example (with Vue Options API):
// some .vue file in devland
<template>
<div>
<q-icon :name="tabMenu" />
<q-btn :icon="remBug" />
</div>
</template>
<script>
import { tabMenu } from 'quasar-extras-svg-icons/tabler-icons'
import { remBug } from 'quasar-extras-svg-icons/remix-icons'
export default {
// ...
created () {
this.tabMenu = tabMenu
this.remBug = remBug
}
}
If you wanted to replace a Quasar icon being used in a component, then you have access to modifying the icon set directly.
This example uses Vue 3 script setup
, but you can adapt it for your needs:
<script setup>
import {useQuasar} from 'quasar' import {remArrowDownCircleFill} from
'quasar-extras-svg-icons/remix-icons' const $q = useQuasar()
$q.iconSet.expansionItem.icon = remArrowDownCircleFill
</script>
Now, the QExpansionItem will show the remArrowDownCircleFill
from the remix-icons
.
To determine which icons are replacable, go to the Quasar GitHub repo.
Svg icons will be defined as String with the following syntax:
Syntax: "<path>|<viewBox>" or "<path>" (with implicit viewBox of '0 0 24 24')
Examples:
M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z|0 0 24 24
M9 3L5 6.99h3V14h2V6.99h3L9 3zm7 14.01V10h-2v7.01h-3L15 21l4-3.99h-3z
A more complex example with attributes, would look like this:
M3 12H6L9 3L15 21L18 12H21@@stroke-width:1.5;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;
box-icons
: (FIXED) There are two icons, boxBxsDroplet
and boxBxsHot
, that both use the svg use
directive. Our parser cannot handle that, so these icons will be displayed as a black square.
country-flag-icons
is missing the South Korean flag as the SVG uses clip-path
which our parser at this time cannot handle.
health-icons
:
!,svg
filename which doesn't translate well to a valid JavaScript variable name, so it is renamed to ExclamationMark
as they already have a QuestionMark
(because you can't have ?
in a filename).healthFilledConeTestOnNets
and healthOutlineRuralPost
, look messed up and there is no way to fix them at this time. Use at your own risk, or use the original icon.modern-icons
is mssing the SVG for modernBattery30
coreui-icons
icons not available because of mask
and use
directives (cannot be flattened): cuiCifAu
, cuiCifBi
, cuiCifBr
, cuiCifEg
, cuiCifJm
, cuiCifKg
, cuiCifKn
, cuiCifMr
, cuiCifNa
, cuiCifNz
, cuiCifPt
, cuiCifSb
, cuiCifSk
, cuiCifTv
, cuiCifTz
, and cuiCifZa
.
flatui-icons
icons not available because of ClipPath
and mask
(cannot be flattened): flatArt
, flatBowling
, flatBrush
, flatButton
, flatCard
, flatDynamite
, flatFlask
, flatRetina
, flatRing
, flatSafe
, flatSkateboard
, flatSpray
, flatTouch
, flatTrash
, flatWeather
, flatWine
.
glyphs-brands
the color brands are not available because of LinearGradient
, RadialGradient
, etc (cannot be flattened).
glyphs-flags
are not available because of LinearGradient
, RadialGradient
, etc (cannot be flattened).
clarity-icons
does not include the alerted
or badged
icons as they don't make sense when being used in this context.
openmoji
: we are excluding the black
svg icons for a number of reasons. The main one is that they are stripped down versions of the color icons, but while those ones have approximately 5 icons representing skin color, the black icons are not filled in and look the same. This adds unnecessary bulk to our distribution.
material-theme-icons
: two icons not available because of mask
and LinearGradient
(cannot be flattened): mtiCargoLock
and mtiFlash
.
map-icons
icons not available because of malformed SVG: mapBicycling
, mapFishing
, mapGolf
, mapHorseRiding
, mapMotobikeTrail
, mapTrailWalking
, mapViewing
, mapWalking
We have tried to include some of the most popular and current SVG icon packages available. If you find a package you think should be here, do add a feature request in the issues section.
Also, we did try to add a LOT of other packages, but there were reasons why some of them could not be included:
currentColor
to determine color, so these icons would have had the color stripped out.use
, LinearGradient
, filter
, etc., which cannot be integreted into the Quasar Framework format.Before making a feature request, install the package you feel should be included into this package and check out if the above criteria will fit the needs of our parser.
Icon sets that fail:
transform
to make circles.use
and filter
directives.linearGradient
linerarGradient
linerarGradient
and use
text
LinearGradient
LinearGradient
and ClipPath
use
If you appreciate the work that went into this project, please consider donating to Quasar or Jeff.
Head on to the website: quasar-extras-svg-icons
Don't forget to check out our Icon Explorer App so you can find that perfect icon for your app.
For latest releases and announcements, follow on Twitter: @jgalbraith64
Ask questions at the official community Discord server: https://chat.quasar.dev
All assets included in this repository are exclusive property of their respective owners and licensed under their own respective licenses. Quasar does not take any credit for packages included here.
FAQs
Extra SVG Icons for Quasar Framework
The npm package quasar-extras-svg-icons receives a total of 324 weekly downloads. As such, quasar-extras-svg-icons popularity was classified as not popular.
We found that quasar-extras-svg-icons demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.