O que acha dessa ideia? Quando a classe `.active` é adicionada, um ícone do *Glyphicons* (padrão do *Bootstrap*) é inserido ao botão através do seletor `:after` do *CSS*. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> .btn-default.amarelo { background: yellow; } .btn-default.amarelo:hover { background: rgb(240, 240, 0); } .btn-default.amarelo.active, .btn-default.amarelo:active { background: rgb(230, 230, 0) !important; } .btn-default.laranja { background: orange; } .btn-default.laranja:hover { background: rgb(255, 140, 0); } .btn-default.laranja.active, .btn-default.laranja:active { background: rgb(255, 125, 0) !important; } .btn-default.vermelho { background: red; } .btn-default.vermelho:hover { background: rgb(240, 0, 0); } .btn-default.vermelho.active, .btn-default.vermelho:active { background: rgb(230, 0, 0) !important; } .btn-default.active:after { font-family: 'Glyphicons Halflings'; font-size: 12px; content: '\e013'; } <!-- language: lang-html --> <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div> <h1>Nível de gravidade</h1> <div class="form-group"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default active"> <input type="radio" value="B" checked autocomplete="off"> Branco </label> <label class="btn btn-default amarelo"> <input type="radio" value="A" autocomplete="off"> Amarelo </label> <label class="btn btn-default laranja"> <input type="radio" value="L" autocomplete="off"> Laranja </label> <label class="btn btn-default vermelho"> <input type="radio" value="V" autocomplete="off"> Vermelho </label> </div> </div> </div> <!-- end snippet -->