Vue Icons - Argon

We've design a set of custom icons as components that can help you for different purposes.

Basket

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

<template>
 <Basket size="48px" />
</template>

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

Props Information

Name	Type	Default	Description
size	string		Used to set the `width` and `height` of the icon.

Credit Card

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

<template>
 <CreditCard size="48px" />
</template>

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

Box3d

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

<template>
 <Box3d size="48px" />
</template>

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

Customer Support

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

<template>
 <CustomerSupport size="48px" />
</template>

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

Document

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

<template>
 <Document size="48px" />
</template>

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

Getting Started

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

<template>
 <GettingStarted size="48px" />
</template>

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

Air

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

<template>
 <Air size="48px" />
</template>

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

Humidity

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

<template>
 <Humidity size="48px" />
</template>

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

Lights

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

<template>
 <Lights size="48px" />
</template>

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

Office

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

<template>
<Office size="48px" />
</template>

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

Settings

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

<template>
<Settings size="48px" />
</template>

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

Shop

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

<template>
 <Shop size="48px" />
</template>

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

Spaceship

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

<template>
 <Spaceship size="48px" />
</template>

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

Switches

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

<template>
 <Switches size="48px" />
</template>

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

Temperature

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

<template>
 <Temperature size="48px" />
</template>

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

Wifi

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

<template>
 <Wifi size="48px" />
</template>

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