Welcome to the professional edition of Houston for Vue — an extensive library of meticulously crafted icons designed to elevate the visual appeal of your web and mobile applications. With Houston Vue Pro, you gain access to a vast selection of icons tailored to suit every need, allowing for highly customizable and dynamic user interfaces.
Thousands of designers, developers, and content creators use Houston Pro for unlimited personal and commercial projects, making it one of the most versatile and user-friendly icon libraries available.
Discover more at our website: houston.com
Icons can be downloaded from the Houston website and used in your projects. The icons are available in SVG format and can be easily integrated into your applications.
Swiftly find the icon you need with our intuitive autocomplete feature, streamlining your design process.
Freedom to scale: adjust icon sizes effortlessly to match your design requirements.
Seven distinct variants ensure that you can select the perfect style to match your project's aesthetics.
Customize icon colors with ease, giving you the ability to maintain consistency with your brand's color palette.
Access over 27,000 icons within the library, ensuring you'll find the exact icon for every context.
To start using HoustonIcons-Vue in your project, install the package via npm:
npm install @houstonicons/vue
Or via yarn:
yarn add @houstonicons/vue
Import the icons you need from the library and integrate them into your Vue components. Here's how you can customize the icons to fit your needs:
Adjust the size of your icons by passing a size
prop:
<template>
<Home01Icon iconSize="32" />
</template>
<script>
import Home01Icon from '@houstonicons/vue';
export default {
components: {
Home01Icon
}
};
</script>
Change the color of your icons by passing a color
prop:
<template>
<MarketingIcon color="#00FF00" />
</template>
<script>
import MarketingIcon from '@houstonicons/vue';
export default {
components: {
MarketingIcon
}
};
</script>
Easily modify the corner style of your icons by using the cornerStyle
prop:
<template>
<ListSettingIcon cornerStyle="rounded" />
</template>
<script>
import ListSettingIcon from '@houstonicons/vue';
export default {
components: {
ListSettingIcon
}
};
</script>
Set the fill style of your icons using the fillType
prop:
<template>
<AddSquareIcon fillType="solid" />
</template>
<script>
import AddSquareIcon from '@houstonicons/vue';
export default {
components: {
AddSquareIcon
}
};
</script>
Explore a live demonstration of HugeIcons Vue in action at Houston Pro Example. This example showcases the versatility and ease of customizing our icons to fit your design needs, providing a hands-on experience with the icon collection.
Q: How can I download and use free Vue icons from Houston Vue Icons?
A: You can install the package via npm or yarn and then import the Vue icons into your Vue components. Detailed package installation instructions are provided in the Installation section.
Q: Are these Vue icons customizable in terms of size and color?
A: Yes, all Vue icons are fully customizable. You can adjust their size, color, and other properties easily within your Vue application. See Usage Examples for more information.
Q: Is there a live demo where I can see these Vue icons in action?
A: Yes, we have a live example available at Houston Vue Example. It showcases the usage import various Vue icons and their customization options.
Q: Are the Vue icons from Houston Vue Icons free for commercial use?
A: Houston Vue Pro is licensed for commercial use, adhering to the CC0-1.0. Please review the license details for more information.
Houston Vue is licensed under the CC0 1.0 Universal (CC0 1.0) Public Domain Dedication. This means you can use, modify, distribute, and even use the icons for private or commercial purposes, without any restrictions. No attribution is required, but it's appreciated.
For more details, see the LICENSE.md file in the repository.
Enjoy the seamless integration of premium icons with Houston Vue Pro and take your application to the next level!