Bootstrap 4 doesn’t come with its own pack of icons. So, if you want to use icons in your project you will need to use an outside library. We have used the Font Awesome Icons for the Lazy Kit. It is one of the most popular options and it has a free version that is usually diverse enough to support your project's needs.
You can place icons in almost any element without the need of adding adjustments in order for them to fit. Here is an example of an icon placed in a button.
<button class="btn btn-danger btn-pill">
<i class="fa fa-heart mr-1"></i>
Favourite
</button>
And here is an example of an icon placed in an input group.
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1"><i class="fas fa-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>
We have also used icons throughout our presentation, in alerts, badges, cards and navigation. Since Font Awesome is a font, all typography options apply when using it (e.g. sizing utilities, colouring utilities). If you want to see more examples, check out our Bootstrap 4 icons tutorial.