Icons

Using external icon libraries with use-bootstrap.

Basic examples

vue
<template>
 <BIcon
  icon="bi:bootstrap"
  margin="2"
 />
 <BIcon
  icon="bi:alarm"
  margin="2"
 />
 <BIcon
  icon="bi:toggles"
  margin="2"
 />
 <BIcon
  icon="bi:shop"
  margin="2"
 />
</template>

Another examples

vue
<template>
 <b-button
  color="dark"
  icon="bi:person-fill"
 />
 <b-button
  color="secondary"
  icon="bi:1-circle-fill"
  icon-end
 >
  sample
 </b-button>
 <b-button
  color="success"
  rounded="circle"
  icon="bi:person"
 />
 <BInputGroup margin="t-3">
  <BInputGroupText id="basic-addon1">
   <BIcon icon="bi:person-fill" />
  </BInputGroupText>
  <BFormInput
   type="text"
   placeholder="Username"
   aria-label="Username"
   aria-describedby="basic-addon1"
  />
 </BInputGroup>
</template>

Theme colors

vue
<template>
 <BIcon
  icon="bi:check-circle-fill"
  color="primary"
  margin="2"
 />
 <BIcon
  icon="bi:check-circle-fill"
  color="info"
  margin="2"
 />
 <BIcon
  icon="bi:check-circle-fill"
  color="danger"
  margin="2"
 />
 <BIcon
  icon="bi:check-circle-fill"
  color="success"
  margin="2"
 />
 <BIcon
  icon="bi:check-circle-fill"
  color="warning"
  margin="2"
 />
 <BIcon
  icon="bi:check-circle-fill"
  color="dark"
  margin="2"
 />
 <BIcon
  icon="bi:check-circle-fill"
  color="light"
  margin="2"
 />
</template>

Subtle Theme colors

All colors

blue
indigo
purple
pink
red
orange
yellow
green
teal
cyan

See Also