Icons - Soft UI

We've design a set of custom icons as components that can help you for different purposes. Check out our examples below!

Basket Icon

Use our basket icon in your projects using the following code example:

<template>
 <Basket />
</template>

<script>
import Basket from '@/examples/Icon/Basket.vue";
export default { components: { Basket, }, };
</script>

1<template>
2 <Basket />
3</template>
4
5<script>
6import Basket from '@/examples/Icon/Basket.vue";
7export default { components: { Basket, }, };
8</script>

Credit Card Icon

Use our credit card icon in your projects using the following code example:

<template>
 <CreditCard />
</template>

<script>
import CreditCard from '@/examples/Icon/CreditCard.vue";
export default { components: { CreditCard, }, };
</script>

1<template>
2 <CreditCard />
3</template>
4
5<script>
6import CreditCard from '@/examples/Icon/CreditCard.vue";
7export default { components: { CreditCard, }, };
8</script>

Box3d Icon

Use our box3d icon in your projects using the following code example:

<template>
 <Box3d />
</template>

<script>
import Box3d from '@/examples/Icon/Box3d.vue";
export default { components: { Box3d, }, };
</script>

1<template>
2 <Box3d />
3</template>
4
5<script>
6import Box3d from '@/examples/Icon/Box3d.vue";
7export default { components: { Box3d, }, };
8</script>

Customer Support Icon

Use our customer support icon in your projects using the following code example:

<template>
 <CustomerSupport />
</template>

<script>
import CustomerSupport from '@/examples/Icon/CustomerSupport.vue";
export default { components: { CustomerSupport, }, };
</script>

1<template>
2 <CustomerSupport />
3</template>
4
5<script>
6import CustomerSupport from '@/examples/Icon/CustomerSupport.vue";
7export default { components: { CustomerSupport, }, };
8</script>

Document Icon

Use our document icon in your projects using the following code example:

<template>
 <Document />
</template>

<script>
import Document from '@/examples/Icon/Document.vue";
export default { components: { Document, }, };
</script>

1<template>
2 <Document />
3</template>
4
5<script>
6import Document from '@/examples/Icon/Document.vue";
7export default { components: { Document, }, };
8</script>

Getting Started Icon

Use our getting started icon in your projects using the following code example:

<template>
 <GettingStarted />
</template>

<script>
import GettingStarted from '@/examples/Icon/GettingStarted.vue";
export default { components: { GettingStarted, }, };
</script>

1<template>
2 <GettingStarted />
3</template>
4
5<script>
6import GettingStarted from '@/examples/Icon/GettingStarted.vue";
7export default { components: { GettingStarted, }, };
8</script>

Air Icon

Use our air icon in your projects using the following code example:

<template>
 <Air />
</template>

<script>
import Air from '@/examples/Icon/Air.vue";
export default { components: { Air, }, };
</script>

1<template>
2 <Air />
3</template>
4
5<script>
6import Air from '@/examples/Icon/Air.vue";
7export default { components: { Air, }, };
8</script>

Humidity Icon

Use our humidity icon in your projects using the following code example:

<template>
 <Humidity />
</template>

<script>
import Humidity from '@/examples/Icon/Humidity.vue";
export default { components: { Humidity, }, };
</script>

1<template>
2 <Humidity />
3</template>
4
5<script>
6import Humidity from '@/examples/Icon/Humidity.vue";
7export default { components: { Humidity, }, };
8</script>

Lights Icon

Use our lights icon in your projects using the following code example:

<template>
 <Lights />
</template>

<script>
import Lights from '@/examples/Icon/Lights.vue";
export default { components: { Lights, }, };
</script>

1<template>
2 <Lights />
3</template>
4
5<script>
6import Lights from '@/examples/Icon/Lights.vue";
7export default { components: { Lights, }, };
8</script>

Office Icon

Use our office icon in your projects using the following code example:

<template>
 <Office />
</template>

<script>
import Office from '@/examples/Icon/Office.vue";
export default { components: { Office, }, };
</script>

1<template>
2 <Office />
3</template>
4
5<script>
6import Office from '@/examples/Icon/Office.vue";
7export default { components: { Office, }, };
8</script>

Settings Icon

Use our settings icon in your projects using the following code example:

<template>
 <Settings />
</template>

<script>
import Settings from '@/examples/Icon/Settings.vue";
export default { components: { Settings, }, };
</script>

1<template>
2 <Settings />
3</template>
4
5<script>
6import Settings from '@/examples/Icon/Settings.vue";
7export default { components: { Settings, }, };
8</script>

Shop Icon

Use our shop icon in your projects using the following code example:

<template>
 <Shop />
</template>

<script>
import Shop from '@/examples/Icon/Shop.vue";
export default { components: { Shop, }, };
</script>

1<template>
2 <Shop />
3</template>
4
5<script>
6import Shop from '@/examples/Icon/Shop.vue";
7export default { components: { Shop, }, };
8</script>

Spaceship Icon

Use our spaceship icon in your projects using the following code example:

<template>
 <Spaceship />
</template>

<script>
import Spaceship from '@/examples/Icon/Spaceship.vue";
export default { components: { Spaceship, }, };
</script>

1<template>
2 <Spaceship />
3</template>
4
5<script>
6import Spaceship from '@/examples/Icon/Spaceship.vue";
7export default { components: { Spaceship, }, };
8</script>

Switches Icon

Use our switches icon in your projects using the following code example:

<template>
 <Switches />
</template>

<script>
import Switches from '@/examples/Icon/Switches.vue";
export default { components: { Switches, }, };
</script>

1<template>
2 <Switches />
3</template>
4
5<script>
6import Switches from '@/examples/Icon/Switches.vue";
7export default { components: { Switches, }, };
8</script>

Temperature Icon

Use our temperature icon in your projects using the following code example:

<template>
 <Temperature />
</template>

<script>
import Temperature from '@/examples/Icon/Temperature.vue";
export default { components: { Temperature, }, };
</script>

1<template>
2 <Temperature />
3</template>
4
5<script>
6import Temperature from '@/examples/Icon/Temperature.vue";
7export default { components: { Temperature, }, };
8</script>

Wifi Icon

Use our wifi icon in your projects using the following code example:

<template>
 <Wifi />
</template>

<script>
import Wifi from '@/examples/Icon/Wifi.vue";
export default { components: { Wifi, }, };
</script>

1<template>
2 <Wifi />
3</template>
4
5<script>
6import Wifi from '@/examples/Icon/Wifi.vue";
7export default { components: { Wifi, }, };
8</script>