Bootstrap Change Icon Color

​x
 
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" />
</head>
<body style="text-align: center;">
    <h3>Bootstrap Change Icon Color</h3>
    <h1><i class="bi bi-heart text-primary"></i></h1>
    <h1><i class="bi bi-star text-secondary"></i></h1>
    <h1><i class="bi bi-check text-success"></i></h1>
    <h1><i class="bi bi-arrow-up-right text-info"></i></h1>
    <h1><i class="bi bi-file-earmark text-warning"></i></h1>
    <h1><i class="bi bi-search text-danger"></i></h1>
</body>
​
<style>
    .text-primary {
        color: #007bff;
    }
​
    .text-secondary {
        color: #6c757d;
    }
​
    .text-success {
        color: #28a745;
    }
​
    .text-info {
        color: #17a2b8;
    }
​
    .text-warning {
        color: #ffc107;
    }
​
    .text-danger {
        color: #dc3545;
    }
</style>
​
</html>