Not possible to change stroke-width on Vue icon components

[Jacobtims]

Discussed in https://github.com/tailwindlabs/heroicons/discussions/946

^{Originally posted by **Jacobtims** March 9, 2023} I want to change the stroke-width of an icon on the Vue component. Like this: ``` import { PlusIcon } from '@heroicons/vue/24/solid'; ``` This unfortunately **doesn't work**.

It's not possible to change the stroke-width of an icon when using the Vue.js package.

[adamwathan]

Hey! Yep right now we don't expose a prop for stroke-width. If you'd like to change the stroke width you can do so with CSS:

import { PlusIcon } from '@heroicons/vue/24/solid';

<PlusIcon class="h-5 w-5 stroke-2"/>

Hope that helps! Going to close as not a bug (this would be a new feature) and no plans to work on this at the moment.

[Jacobtims]

The stroke-2 class doesn't work on the component.

[patrickkmatias]

for me it is not working neither. Even using the given example with PlusIcon and !stroke-2 or !stroke-[8]|stroke-[8].

[tsangaris]

stroke-[4px] or any amount for that matter will work just fine. So:

<PlusIcon class="h-5 w-5 stroke-[2px]"/>