JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header" >
    &nbsp;
</div>
<div class="mainBody">
    &nbsp;
    <div class="content" >Getting started with Open Iconic

SVG

Displaying Open Iconic's SVGs are a snap. Just treat them like your typical image and away you go! Pro tip: Don't forget the alt attribute.
<img src="/open-iconic/svg/icon-name.svg" alt="icon name">
SVG Sprite

Open Iconic also comes in a SVG sprite which allows you to display all the icons in the set with a single request. It's like an icon font, without being a hack. Adding an icon from an SVG sprite is a little different than what you're used to, but it's still not a problem. You'll need to add the icon sprite to the DOM in order support backwards browsers like Internet Explorer. Luckily, SVGInjector makes that a snap. Read more about this process here.

Tip: To make your icons easily style able, we suggest adding a general class to the <svg> tag and a unique class name for each different icon in the <use> tag.
<head>
  ...
  <script src="svg-injector.min.js"></script>

  <script>
    // Elements to inject
    var mySVGsToInject = document.querySelectorAll('.iconic-sprite');

    // Do the injection
    SVGInjector(mySVGsToInject);
  </script>
  ...
</head>
<body>
...
  <img src="open-iconic.svg" class="iconic-sprite" style="display:none;" />

  <svg viewBox="0 0 8 8" class="icon">
    <use xlink:href="#account-login" class="icon-account-login"></use>
  </svg>
...
</body>
Sizing icons only needs basic CSS. All the icons are in a square format, so just set the <svg> tag with equal width and height dimensions.
.icon {
  width: 16px;
  height: 16px;
}
Coloring icons is even easier. All you need to do is set the fill rule on the <use> tag.
.icon-account-login {
  fill: #f00;
}
Font

Icon fonts are a great fallback for SVG—and our font is pretty great.
Head

<link href="/open-iconic/font/css/open-iconic.css" rel="stylesheet">
Body

<span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>
Bootstrap...

CSS

body {
    margin:0;
}

.header {
    height: 40px;
    background-color: red;
}

.mainBody {
    background-color: yellow;
    position: absolute;
    top: 40px;
    bottom: 20px;
    width:100%;
}

.content {
    color:#fff;
}

.footer {
    height: 20px;
    background-color: blue;
    
    position: absolute;
    bottom: 0;
    width:100%;
}