Icon - Vant 4

Icon

✨ Bring your interface to life with beautiful, scalable icons! Whether you need simple indicators or complex visual elements, our Icon component delivers crisp, professional graphics that enhance user experience.

🎯 Intro

Meet your new favorite design companion! Our font-based icon system offers a comprehensive collection of beautifully crafted icons that seamlessly integrate into your Vue applications. Use them standalone with the Icon component or effortlessly reference them in other components via the intuitive icon attribute. Say goodbye to pixelated graphics and hello to crisp, scalable perfection! 🚀

📦 Install

Ready to add some visual flair to your app? Getting started is as easy as pie! Register the Icon component globally via app.use and unlock a world of beautiful graphics. Check out our Component Registration guide for alternative setup methods that fit your project's needs.

import { createApp } from'vue'; import { Icon } from'vant'; const app = createApp(); app.use(Icon);

🎨 Usage

🌟 Basic Usage

The magic starts here! Simply use the name prop to specify your desired icon name or even a custom icon URL. It's that straightforward - just name it and watch it appear!

🔗 Using URL

Want to use your own custom icons? No problem! You can directly pass any image URL to the name prop and voilà - your custom graphics are ready to shine. Perfect for brand-specific icons or unique visual elements!

🔴 Show Badge

Add some attention-grabbing elements to your icons! Use the dot prop to display a sleek red notification dot in the upper right corner - perfect for indicating new messages or updates.

Need to show specific information? The badge prop lets you display custom content (numbers, text, or anything you need) in a stylish badge positioned perfectly in the upper right corner.

🎨 Icon Color

Make your icons pop with vibrant colors! Use the color prop to instantly transform your icon's appearance. Whether you need brand colors, theme variations, or just want to add some personality - color customization has never been easier!

📏 Icon Size

Size matters when it comes to perfect visual hierarchy! The size prop gives you complete control over your icon dimensions. From tiny indicators to bold statement pieces - scale your icons to fit any design context seamlessly.

🔧 Add Custom Iconfont

Ready to go beyond the standard icon set? Create your own custom iconfont library! This powerful feature lets you integrate your unique icon designs seamlessly into the component system. Perfect for maintaining brand consistency or adding specialized graphics that aren't available in standard icon sets.

@font-face { font-family: 'my-icon'; src: url('./my-icon.ttf') format('truetype'); } .my-icon { font-family: 'my-icon'; } .my-icon-extra::before { content: '\e626'; }

📚 API

⚙️ Props

Customize every aspect of your icons with these powerful configuration options! Each prop gives you precise control over appearance and behavior, making it easy to create the perfect visual experience.

Attribute	Description	Type	Default
name	Icon name or URL	string	''
dot	Whether to show red dot	boolean	false
badge	Content of the badge	*number	string*
badge-props	Props of Badge, see Badge - props	BadgeProps	-

| color | Icon color | string | inherit | | size | Icon size | number | string | inherit | | class-prefix | ClassName prefix | string | van-icon | | tag | HTML Tag of root element | string | i |

🎯 Events

Stay connected with user interactions! The Icon component provides intuitive event handling to make your interface responsive and engaging.

Event	Description	Arguments
click	Emitted when icon is clicked	event: MouseEvent

📝 Types

Enjoy full TypeScript support with comprehensive type definitions! These exports ensure type safety and provide excellent IDE autocompletion for a smooth development experience.

importtype { IconProps } from'vant';

🎨 CSS Variables

Take complete control over styling with these CSS custom properties! Fine-tune every visual detail to match your design system perfectly. For advanced theming options, check out our ConfigProvider component.

Name	Default Value	Description
--van-icon-font-family	'van-icon'	-

🔗 Related Docs

Explore these related components and guides to enhance your development experience:

• Badge - Perfect companion for icon notifications and indicators
• Button - Learn how to integrate icons into interactive buttons
• NavBar - Discover icon usage in navigation components
• Tabbar - See icons in action within tab navigation
• ConfigProvider - Advanced theming and configuration options
• Cell - Icons within list and cell components
• NoticeBar - Using icons for announcements and alerts
• Loading - Alternative visual feedback components
• Image - Working with other visual elements
• Component Registration - Setup and installation guide