/* ----------------------------------------------------------------
Minimal, themable icon pack (mask-based, currentColor tinted)
Usage: or
---------------------------------------------------------------- */
:root { --ico-color: currentColor; }
/* Auto flip to white in dark UI */
@media (prefers-color-scheme: dark) {
:root { --ico-color: #fff; }
}
/* Base icon primitive */
.ico{
display:inline-block;
width:1em; height:1em; vertical-align:-0.125em;
background-color:var(--ico-color);
-webkit-mask: var(--ico) center / contain no-repeat;
mask: var(--ico) center / contain no-repeat;
}
/* Optional size helpers */
.ico-2x{width:2em;height:2em}
.ico-3x{width:3em;height:3em}
.ico-docker{--ico:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M13.983%2011.078h2.119a.186.186%200%200%200%20.186-.185V9.006a.186.186%200%200%200-.186-.186h-2.119a.185.185%200%200%200-.185.185v1.888c0%20.102.083.185.185.185m-2.954-5.43h2.118a.186.186%200%200%200%20.186-.186V3.574a.186.186%200%200%200-.186-.185h-2.118a.185.185%200%200%200-.185.185v1.888c0%20.102.082.185.185.185m0%202.716h2.118a.187.187%200%200%200%20.186-.186V6.29a.186.186%200%200%200-.186-.185h-2.118a.185.185%200%200%200-.185.185v1.887c0%20.102.082.185.185.186m-2.93%200h2.12a.186.186%200%200%200%20.184-.186V6.29a.185.185%200%200%200-.185-.185H8.1a.185.185%200%200%200-.185.185v1.887c0%20.102.083.185.185.186m-2.964%200h2.119a.186.186%200%200%200%20.185-.186V6.29a.185.185%200%200%200-.185-.185H5.136a.186.186%200%200%200-.186.185v1.887c0%20.102.084.185.186.186m5.893%202.715h2.118a.186.186%200%200%200%20.186-.185V9.006a.186.186%200%200%200-.186-.186h-2.118a.185.185%200%200%200-.185.185v1.888c0%20.102.082.185.185.185m-2.93%200h2.12a.185.185%200%200%200%20.184-.185V9.006a.185.185%200%200%200-.184-.186h-2.12a.185.185%200%200%200-.184.185v1.888c0%20.102.083.185.185.185m-2.964%200h2.119a.185.185%200%200%200%20.185-.185V9.006a.185.185%200%200%200-.184-.186h-2.12a.186.186%200%200%200-.186.186v1.887c0%20.102.084.185.186.185m-2.92%200h2.12a.185.185%200%200%200%20.184-.185V9.006a.185.185%200%200%200-.184-.186h-2.12a.185.185%200%200%200-.184.185v1.888c0%20.102.082.185.185.185M23.763%209.89c-.065-.051-.672-.51-1.954-.51c-.338.001-.676.03-1.01.087c-.248-1.7-1.653-2.53-1.716-2.566l-.344-.199l-.226.327c-.284.438-.49.922-.612%201.43c-.23.97-.09%201.882.403%202.661c-.595.332-1.55.413-1.744.42H.751a.751.751%200%200%200-.75.748a11.376%2011.376%200%200%200%20.692%204.062c.545%201.428%201.355%202.48%202.41%203.124c1.18.723%203.1%201.137%205.275%201.137a15.74%2015.74%200%200%200%202.93-.266a12.248%2012.248%200%200%200%203.823-1.389a10.51%2010.51%200%200%200%202.61-2.136c1.252-1.418%201.998-2.997%202.553-4.4h.221c1.372%200%202.215-.549%202.68-1.009c.309-.293.55-.65.707-1.046l.098-.288Z%27%2F%3E%3C%2Fsvg%3E');}
.ico-ansible{--ico:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M10.617%2011.473l4.686%203.695-3.102-7.662zM12%200C5.371%200%200%205.371%200%2012s5.371%2012%2012%2012%2012-5.371%2012-12S18.629%200%2012%200zm5.797%2017.305c-.011.471-.403.842-.875.83-.236%200-.416-.09-.664-.293l-6.19-5-2.079%205.203H6.191L11.438%205.44c.124-.314.427-.52.764-.506.326-.014.63.189.742.506l4.774%2011.494c.045.111.08.234.08.348-.001.009-.001.009-.001.023z%27%2F%3E%3C%2Fsvg%3E');}
.ico-proxmox{--ico:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27black%27%20d%3D%27M4.928%201.825c-1.09.553-1.09.64-.07%201.78%205.655%206.295%207.004%207.782%207.107%207.782.139.017%207.971-8.542%208.058-8.801.034-.07-.208-.312-.519-.536-.415-.312-.864-.433-1.712-.467-1.59-.104-2.144.242-4.115%202.455-.899%201.003-1.66%201.833-1.66%201.833-.017%200-.76-.813-1.642-1.798S8.473%202.1%208.127%201.91c-.796-.45-2.421-.484-3.2-.086zM1.297%204.367C.45%204.695%200%205.007%200%205.248c0%20.121%201.331%201.678%202.94%203.459%201.625%201.78%202.939%203.268%202.939%203.302%200%20.035-1.331%201.522-2.94%203.303C1.314%2017.11.017%2018.683.035%2018.822c.086.467%201.504%201.055%202.541%201.055%201.678-.018%202.058-.312%205.603-4.202%201.78-1.954%203.233-3.614%203.233-3.666%200-.069-1.435-1.694-3.199-3.63-2.3-2.508-3.423-3.632-3.96-3.874-.812-.398-2.126-.467-2.956-.138zm18.467.12c-.502.26-1.764%201.505-3.943%203.891-1.763%201.937-3.199%203.562-3.199%203.631%200%20.07%201.453%201.712%203.234%203.666%203.544%203.89%203.925%204.184%205.602%204.202%201.038%200%202.455-.588%202.542-1.055.017-.156-1.28-1.712-2.905-3.493-1.608-1.78-2.94-3.285-2.94-3.32%200-.034%201.332-1.539%202.94-3.32C22.72%206.91%2024.017%205.352%2024%205.214c-.087-.45-1.366-.968-2.473-1.038-.795-.034-1.21.035-1.763.312zM7.954%2016.973c-2.144%202.369-3.908%204.374-3.943%204.46-.034.07.208.312.52.537.414.311.864.432%201.711.467%201.574.103%202.161-.26%204.15-2.508.864-.968%201.608-1.78%201.625-1.78s.761.812%201.643%201.798c2.023%202.248%202.559%202.576%204.132%202.49.848-.035%201.297-.156%201.712-.467.311-.225.553-.467.519-.536-.087-.26-7.92-8.819-8.058-8.801-.069%200-1.867%201.954-4.011%204.34z%27%2F%3E%3C%2Fsvg%3E');}
/* HTML5 (replaces the old rectangle placeholder) */
.ico-html5 { --ico: url('https://cdn.simpleicons.org/html5'); }
/* PHP (replaces ellipse placeholder) */
.ico-php { --ico: url('https://cdn.simpleicons.org/php'); }
/* Tcl — language icon is not standardised; using a neutral glyph by default.
If you meant the corporate TCL logo, also see `.ico-tclcorp` below. */
.ico-tcl {
--ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='black'/%3E%3Cpath d='M7 9h4v2H9v6H7V9Zm9 0h3v8h-3v-2h1v-4h-1V9Z' fill='white'/%3E%3C/svg%3E");
}
.ico-tcltk {
display: inline-block;
width: 1em;
height: 1em;
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-image: url("data:image/svg+xml;utf8,");
background-color: currentColor;
}
.ico-tcltk2 {
--ico:url('data:image/svg+xml, ');
}
.ico-feather {
display: inline-block;
width: 1em;
height: 2em;
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-image: url('data:image/svg+xml;utf8,');
background-color: currentColor;
}
/* If you actually want the *corporate* TCL badge, use this class instead: */
.ico-tclcorp { --ico: url('https://upload.wikimedia.org/wikipedia/commons/9/9d/Logo_of_the_TCL_Corporation.svg'); }
/* Visual Basic — there isn’t a single canonical VB glyph, so we use the VS mark */
.ico-vb { --ico: url('https://cdn.simpleicons.org/visualstudio'); }
/* ---------------------------------------
Popular languages & runtimes (extras)
--------------------------------------- */
/* Web core */
.ico-css3 { --ico: url('https://cdn.simpleicons.org/css3'); }
.ico-javascript{ --ico: url('https://cdn.simpleicons.org/javascript'); }
.ico-typescript{ --ico: url('https://cdn.simpleicons.org/typescript'); }
.ico-node { --ico: url('https://cdn.simpleicons.org/nodedotjs'); }
/* Front-end frameworks (optional) */
.ico-react { --ico: url('https://cdn.simpleicons.org/react'); }
.ico-angular { --ico: url('https://cdn.simpleicons.org/angular'); }
.ico-vue { --ico: url('https://cdn.simpleicons.org/vuedotjs'); }
.ico-svelte { --ico: url('https://cdn.simpleicons.org/svelte'); }
/* General-purpose languages */
.ico-python { --ico: url('https://cdn.simpleicons.org/python'); }
.ico-java { --ico: url('https://cdn.simpleicons.org/java'); }
.ico-kotlin { --ico: url('https://cdn.simpleicons.org/kotlin'); }
.ico-go { --ico: url('https://cdn.simpleicons.org/go'); }
.ico-rust { --ico: url('https://cdn.simpleicons.org/rust'); }
.ico-dart { --ico: url('https://cdn.simpleicons.org/dart'); }
.ico-ruby { --ico: url('https://cdn.simpleicons.org/ruby'); }
.ico-swift { --ico: url('https://cdn.simpleicons.org/swift'); }
.ico-scala { --ico: url('https://cdn.simpleicons.org/scala'); }
.ico-perl { --ico: url('https://cdn.simpleicons.org/perl'); }
.ico-r { --ico: url('https://cdn.simpleicons.org/r'); }
.ico-lua { --ico: url('https://cdn.simpleicons.org/lua'); }
/* C-family */
.ico-c { --ico: url('https://cdn.simpleicons.org/c'); }
.ico-cpp { --ico: url('https://cdn.simpleicons.org/cplusplus'); }
.ico-csharp { --ico: url('https://cdn.simpleicons.org/csharp'); }
.ico-dotnet { --ico: url('https://cdn.simpleicons.org/dotnet'); }
/* Shells & scripting */
.ico-bash { --ico: url('https://cdn.simpleicons.org/gnubash'); }
.ico-powershell{ --ico: url('https://cdn.simpleicons.org/powershell'); }
/* Data / DB (optional quick wins) */
.ico-sqlite { --ico: url('https://cdn.simpleicons.org/sqlite'); }
.ico-postgres { --ico: url('https://cdn.simpleicons.org/postgresql'); }
.ico-mysql { --ico: url('https://cdn.simpleicons.org/mysql'); }