Iconsax for Svelte

This is an icon library for Svelte based on iconsax. These icons are adapted to inherit the colors and sizes, you can use it as if it were a letter font.

Take advantage of Sveltekit to be able to use the icons from iconsax with Isaxvelte 😁👌.

Install the library

npm i isaxvelte@latest

Basic usage

<script lang="ts">
    import { Isax } from 'isaxvelte';
</script>

<p><Isax name="user" type="twotone" /> Isax</p>

<style>
    p {
        color: red;
        font-size: 45px;
    }
</style>

<script lang="ts">
    import { Bold, Broken, Bulk, Linear, Outline, Twotone } from 'isaxvelte';
</script>

<p><Bold name="home" /> Home</p>
<p><Broken name="home" /> Home</p>
<p><Bulk name="home" /> Home</p>
<p><Linear name="home" /> Home</p>
<p><Outline name="home" /> Home</p>
<p><Twotone name="home" /> Home</p>

<style>
    p {
        color: red;
        font-size: 45px;
    }
</style>

More examples

<script lang="ts">
    import { Isax, Bold, Broken, Bulk, Linear, Outline, Twotone } from 'isaxvelte';
    let name = 'user';
</script>

<p><Isax {name} type="twotone" size="2em" axis_y="0.5em" axis_x="0.5em" /> Isax</p>
<button on:click="{()" ="">(name == 'user' ? (name = 'home') : (name = 'user'))}>Click</button>

<p><Bold name="home" size="2em" axis_y="0.5em" axis_x="0.5em" /> Home</p>
<p><Broken name="home" size="35px" axis_y="0.5px" axis_x="-1px" /> Home</p>
<p><Bulk name="home" size="35px" axis_y="0.5px" axis_x="-1px" /> Home</p>
<p><Linear name="home" size="4rem" axis_y="-0.5rem" axis_x="0.5rem" /> Home</p>
<p><Outline name="home" size="25pt" axis_y="3pt" axis_x="0.5pt" /> Home</p>
<p><Twotone name="home" size="8%" axis_y="5px" axis_x="0.5px" /> Home</p>

<style>
    p {
        color: red;
        font-size: 45px;
    }
</style>

Properties of the "Isax" component

Properties of the components "Bold", "Broken", "Bulk", "Linear", "Outline", "Twotone"

Icon list

Isaxvelte covers the entire list of icons iconsax, even some additional icons.