How can I make icon small when using bootstrap?

If you are using Bootstrap 3, you can use the <small> tag, like this: <small><span class="glyphicon glyphicon-send"></span></small> It works perfectly with Bootstrap 3.

Glyphicons and other icons can be re-sized precisely with the CSS property font-size:

You know... being glyphs and all.

You can use class="btn btn-xs"

Reference: https://getbootstrap.com/components/

From http://getbootstrap.com/css/#small-text

Small text

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

You may alternatively use an inline element with .small in place of any <small>.

Try:

<span class='badge badge-success small'>
  <i class='icon-user icon-white'></i>
  <i class='icon-user icon-white'></i>
  <i class='icon-user icon-white'></i>
</span>

None of the above worked for me, I am using a combination of Bootstrap 4 and FontAwesome icons. I discovered Bootstrap 4 has it's own class to make smaller buttons:

<button class="btn btn-sm btn-secondary ">
    <i class="fa fa-pencil"></i>
</button>

Bootstrap 4 button documentation (#Sizes)

If you want to make a button any smaller than this you will probably have to make some custom css, as simply changing the icon's size will no longer modify the size of the wrapping button.