.rank-icon {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: red;
    border: 1px solid var(--aok-white);
}

.rank-icon--rookie {
    background: #7fd89a;
}

.rank-icon--explorer {
    background: #5b8ad2;
}

.rank-icon--warrior {
    background: #ec8856;
}

.rank-icon--elite {
    background: #d8525f;
}

.rank-icon--master {
    background: #836bbe;
}

.rank-icon--champion {
    width: 1.25rem;
    height: 1.25rem;
    background: var(--aok-white);
    color: var(--aok-green);
    border: 1px solid var(--aok-white);
    background: url('data:image/svg+xml,<svg id="Icons" height="512" viewBox="0 0 60 60" width="512" xmlns="http://www.w3.org/2000/svg"><g fill="%23f4aa51"><path d="m18.62 23h-4.62a6 6 0 0 1 -6-6v-6a1 1 0 0 1 1-1h6.17l-.17-4h-9a2.006 2.006 0 0 0 -2 2v9a10 10 0 0 0 10 10h7z"/><path d="m41.38 23h4.62a6 6 0 0 0 6-6v-6a1 1 0 0 0 -1-1h-6.17l.17-4h9a2.006 2.006 0 0 1 2 2v9a10 10 0 0 1 -10 10h-7z"/><path d="m36 43s-3.36-.84-3.92-10.23h-4.16c-.56 9.39-3.92 10.23-3.92 10.23l6 1z"/></g><path d="m46 6c0 14.91-7.16 27-16 27s-16-12.09-16-27q0-1.579.1-3.11a2.012 2.012 0 0 1 2-1.89h27.8a2.012 2.012 0 0 1 2 1.89q.1 1.53.1 3.11z" fill="%23f9c55d"/><path d="m24.819 16.89-3.494-3.5a1.1 1.1 0 0 1 .636-1.874l4.747-.668 2.308-4.268a1.121 1.121 0 0 1 1.968 0l2.308 4.268 4.747.668a1.1 1.1 0 0 1 .636 1.874l-3.494 3.5.85 4.81a1.115 1.115 0 0 1 -1.631 1.164l-4.4-2.364-4.4 2.363a1.115 1.115 0 0 1 -1.631-1.163z" fill="%23f4aa51"/><path d="m40 49v-4a2 2 0 0 0 -2-2h-16a2 2 0 0 0 -2 2v4z" fill="%23f9c55d"/><path d="m16 57v-8a2 2 0 0 1 2-2h24a2 2 0 0 1 2 2v8z" fill="%23416572"/><rect fill="%23324e56" height="4" rx="1" width="34" x="13" y="55"/></svg>');
}

.rank-icon__svg {
    width: 0.9rem;
    height: 0.9rem;
}