Icon

The v-icon component provides a large set of glyphs to provide context to various aspects of your application. Vuetify icons utilize Google's Material Icons font library. For a list of all available icons, visit the official Material Icons page.

Usage

Icons come in two themes (light and dark), and four different sizes (standard, medium, large, and x-large). If you want to use SVG icons with VIcon component, read about using SVG icons with VIcon here.

API

v-icon
Name
color
Default
undefined
Type
string

Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
disabled
Default
false
Type
boolean

Components.Inputs.props.disabled

Name
large
Default
false
Type
boolean

Makes the icon large (36px)

Name
left
Default
false
Type
boolean

Places the icon on the left, when used inside a button

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
medium
Default
false
Type
boolean

Makes the icon medium (28px)

Name
right
Default
false
Type
boolean

Places the icon on the right, when used inside a button

Name
size
Default
undefined
Type
number | string

Specifies a custom font size for the icon

Name
small
Default
false
Type
boolean

Makes the icon small (16px)

Name
x-large
Default
false
Type
boolean

Makes the icon extra large (40px)

Examples

Font Awesome

Font Awesome is also supported. Simply use the fa- prefixed icon name. Please note that you still need to include the Font Awesome icons in your project.

Material Design Icons

Material Design Icons is also supported. Simply use the mdi- prefixed icon name. Please note that you still need to include the MDI icons in your project.

Color

Using color helpers you can change the color of an icon from the standard dark and light themes.

Buttons

Icons can be used inside of buttons to add emphasis to the action.

Clickable

Binding any click event to v-icon will automatically change the cursor to a pointer.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore