<div class="container py-2">
	<h1 class="h2">Ikonka v kombinaci s Bootstrap frameworkem</h1>
	<h2 class="h3">13 velikosti písma</h2>
	<p><em>.display-1</em> až <em>.display-4</em>, <em>h1</em> až <em>h6</em>, výchozí velikost písma (obvykle 16px), <em>small</em>, <em>.lead</em></p>

	<div class="d-flex flex-wrap align-items-baseline mb-2">
		<p class="display-1">
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<circle cx="12" cy="12" r="12" />
			</svg>
		</p>
		<p class="display-2">
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<circle cx="12" cy="12" r="12" />
			</svg>
		</p>
		<p class="display-3">
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<circle cx="12" cy="12" r="12" />
			</svg>
		</p>
		<p class="display-4">
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<circle cx="12" cy="12" r="12" />
			</svg>
		</p>
		<p class="h1">
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<circle cx="12" cy="12" r="12" />
			</svg>
		</p>
		<p class="h2">
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<circle cx="12" cy="12" r="12" />
			</svg>
		</p>
		<p class="h3">
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<circle cx="12" cy="12" r="12" />
			</svg>
		</p>
		<p class="h4">
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<circle cx="12" cy="12" r="12" />
			</svg>
		</p>
		<p class="h5">
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<circle cx="12" cy="12" r="12" />
			</svg>
		</p>
		<p class="h6">
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<circle cx="12" cy="12" r="12" />
			</svg>
		</p>
		<p class="lead">
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<circle cx="12" cy="12" r="12" />
			</svg>
		</p>
		<p>
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<circle cx="12" cy="12" r="12" />
			</svg>
		</p>
		<p class="small">
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<circle cx="12" cy="12" r="12" />
			</svg>
		</p>
	</div>

	<hr>

	<h2 class="h3">9 barev</h2>
	<div class="d-flex flex-wrap align-items-baseline mb-2">
		<a href="#" class="h4 text-primary">
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<circle cx="12" cy="12" r="12" />
			</svg>
		</a>
		<a href="#" class="h4 text-secondary">
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<circle cx="12" cy="12" r="12" />
			</svg>
		</a>
		<a href="#" class="h4 text-success">
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<circle cx="12" cy="12" r="12" />
			</svg>
		</a>
		<a href="#" class="h4 text-danger">
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<circle cx="12" cy="12" r="12" />
			</svg>
		</a>
		<a href="#" class="h4 text-info">
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<circle cx="12" cy="12" r="12" />
			</svg>
		</a>
		<a href="#" class="h4 text-warning">
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<circle cx="12" cy="12" r="12" />
			</svg>
		</a>
		<a href="#" class="h4 text-dark">
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<circle cx="12" cy="12" r="12" />
			</svg>
		</a>
		<a href="#" class="h4 text-light">
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<circle cx="12" cy="12" r="12" />
			</svg>
		</a>
		<a href="#" class="h4 text-muted">
			<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<circle cx="12" cy="12" r="12" />
			</svg>
		</a>
	</div>

	<hr>

	<h2 class="h3">Ikonka v tlačítku</h2>
	<div class="mb-2">
		<a href="#" class="m-2">
			jsem odkaz
			<svg class="icon ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<path
					d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"
				/>
			</svg>
		</a>

		<a href="#" class="btn btn-danger m-2">
			nebo tlačítko
			<svg class="icon ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<path
					d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"
				/>
			</svg>
		</a>
	</div>

	<hr>

	<h2 class="h3">Ukázková komponenta</h2>
	<div class="row no-gutters ml-n3 align-items-center">
		<div class="col-auto pl-3">
			<img class="icon display-4 rounded-circle" src="https://source.unsplash.com/100x100/?woman-face" alt="">
		</div>
		<div class="col-auto pl-3">
			<p class="mb-1 h6 font-weight-normal">Martina</p>
			<div class="d-flex">
				<svg class="icon mr-1 text-warning" xmlns="http://www.w3.org/2000/svg" viewBox="-950.5 533.5 15 15"><path d="M-935.5 539.2l-5.2-.8-2.3-4.9-2.3 4.9-5.2.8 3.7 3.9-.8 5.4 4.6-2.6 4.6 2.6-.8-5.4z"/></svg>
				<svg class="icon mr-1 text-warning" xmlns="http://www.w3.org/2000/svg" viewBox="-950.5 533.5 15 15"><path d="M-935.5 539.2l-5.2-.8-2.3-4.9-2.3 4.9-5.2.8 3.7 3.9-.8 5.4 4.6-2.6 4.6 2.6-.8-5.4z"/></svg>
				<svg class="icon mr-1 text-warning" xmlns="http://www.w3.org/2000/svg" viewBox="-950.5 533.5 15 15"><path d="M-935.5 539.2l-5.2-.8-2.3-4.9-2.3 4.9-5.2.8 3.7 3.9-.8 5.4 4.6-2.6 4.6 2.6-.8-5.4z"/></svg>
				<svg class="icon mr-1 text-warning" xmlns="http://www.w3.org/2000/svg" viewBox="-950.5 533.5 15 15"><path d="M-935.5 539.2l-5.2-.8-2.3-4.9-2.3 4.9-5.2.8 3.7 3.9-.8 5.4 4.6-2.6 4.6 2.6-.8-5.4z"/></svg>
				<svg class="icon mr-1 text-muted" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="-1894 1058 15 15"><path d="M-1879 1063.5c-.1-.1-.2-.2-.3-.2l-4.7-.8-2.2-4.3c-.1-.1-.2-.2-.3-.2-.1 0-.2.1-.3.2l-2.2 4.3-4.7.8c-.1 0-.2.1-.3.2-.1.1 0 .3.1.4l3.6 3.2-1.4 5.4c-.1.1 0 .3.1.4s.2.1.4.1l4.7-2.2 4.7 2.2c.1 0 .1.1.2.1s.2 0 .2-.1c.1-.1.2-.2.1-.4l-1.4-5.4 3.6-3.2c.1-.2.1-.3.1-.5zm-4.4 3.3c-.1.1-.1.3-.1.4l1.3 4.9-4.1-1.9c-.1 0-.1-.1-.2-.1s-.1 0-.2.1l-4.1 1.9 1.3-4.9c.1-.1 0-.2-.1-.4l-3.2-2.9 4.1-.6c.1 0 .2-.1.2-.2l1.9-3.8 1.9 3.8.2.2 4.1.6-3 2.9z"/></svg>
			</div>
		</div>
		<div class="col-sm-auto pl-3 ml-auto pt-2 pt-sm-0">
			<p class="mb-1 text-muted small text-sm-right">Nakoupeno: 13.5.2019</p>
			<p class="mb-0 text-muted small text-sm-right">Hodnoceno: 13.10.2019</p>
		</div>
		<div class="col-12 pl-3">
			<div class="my-3 h6 font-weight-normal line-height-base">
				<p>
					Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur corrupti rem laborum est reiciendis commodi atque facere fuga similique non consectetur pariatur minus error aliquid ipsa, nihil molestiae distinctio blanditiis.
				</p>
			</div>
		</div>
		<div class="col-12 pl-3">
			<p class="d-flex mb-1 align-items-baseline text-success">
				<svg class="icon small mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="-1899.2 1064.8 16.4 16.4"><path d="M-1890 1072v-7.2h-2v7.2h-7.2v2h7.2v7.2h2v-7.2h7.2v-2z"/></svg>
				<span class="h6">levné</span>
			</p>
			<p class="d-flex mb-1 align-items-baseline text-success">
				<svg class="icon small mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="-1899.2 1064.8 16.4 16.4"><path d="M-1890 1072v-7.2h-2v7.2h-7.2v2h7.2v7.2h2v-7.2h7.2v-2z"/></svg>
				<span class="h6">zároveň spolehlivé</span>
			</p>
			<p class="d-flex mb-1 align-items-baseline text-danger">
				<svg class="icon small mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="-1899.2 1064.8 16.4 16.4"><path d="M-1890 1072h-9.2v2h16.4v-2z"/></svg>
				<span class="h6">
					málo vydrží
				</span>
			</p>
		</div>
	</div>


</div>
.icon {
  display: inline-block;			
  flex-shrink: 0;			  
  fill: currentColor;		
  width: 1em;				    
  height: 1em;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.