Inline assets

The two currentColor drop-ins — paste the markup inline (never <img>) and they follow the surrounding text color and font-size, like a Lucide icon. Everything on this page is the live file, inherited straight from the page's own ink.

The mark static/images/logo-variants/kosmos-k-mark.svg

Flush to the ink, 0.97em × 1em. Buttons, nav brands, list bullets.

16 24 32 48 96

Riding a text line at 1em: just like a glyph.

The markup to paste 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="11.20 9.70 76.60 80.60" width="0.9504em" height="1em" fill="currentColor" aria-hidden="true"><circle cx="81.5" cy="48" r="6.3"/><circle cx="17.5" cy="16" r="6.3"/><circle cx="17.5" cy="84" r="6.3"/><path d="M40.16 25.00Q39.20 28.75 39.20 48.96Q44.07 43.85 48.39 39.54Q55.50 32.43 56.85 30.83Q59.65 27.56 59.81 25.00H75.38Q73.07 26.84 67.80 32.35Q62.76 37.46 60.21 40.14Q57.65 42.81 57.41 43.05Q56.37 44.09 54.90 45.53Q53.42 46.96 51.58 48.80Q56.69 53.04 59.97 55.99Q71.63 66.93 76.74 75.00H62.44Q61.33 71.73 58.77 68.45Q57.65 67.09 55.58 64.98Q53.50 62.86 50.46 59.82Q43.51 52.96 39.20 50.08V64.62Q39.28 68.37 39.48 70.93Q39.68 73.48 40.08 75.00H28.26Q29.14 71.96 29.22 64.78Q29.22 49.92 29.22 41.69Q29.22 33.47 29.14 31.63Q29.06 29.79 28.86 28.15Q28.66 26.52 28.26 25.00Z"/></svg>

The wordmark static/images/logo-variants/kosmos-wordmark-inline.svg

Flush to the ink, 4.10em × 1em. Headers, footers, splash lines.

16 24 32 48 96

Riding a text line at 1em: just like a glyph.

The markup to paste 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-12.2 -3.0 505.7 123.1" fill="none" width="4.1082em" height="1em" class="brand-svg brand-wordmark-inline">
  <path fill="currentColor" d="M42.3 12.0Q40.4 19.5 40.4 59.7Q50.2 49.4 58.9 40.7Q66.6 33.0 70.8 28.7Q75.1 24.4 75.9 23.6Q81.5 17.1 81.8 12.0H113.1Q108.0 15.9 97.9 26.4Q92.7 31.9 87.4 37.2Q82.1 42.5 77.0 47.8Q74.9 49.9 72.0 52.8Q69.0 55.7 65.3 59.4Q75.6 67.9 82.1 73.8Q105.6 95.8 115.9 112.0H87.1Q84.9 105.4 79.7 98.8Q77.5 96.1 73.3 91.9Q69.1 87.6 63.0 81.5Q49.1 67.7 40.4 61.9V91.1Q40.6 98.7 41.0 103.8Q41.4 109.0 42.2 112.0H18.4Q20.2 105.9 20.3 91.5Q20.3 61.8 20.3 45.4Q20.3 29.0 20.2 25.3Q20.0 21.6 19.6 18.3Q19.2 15.0 18.4 12.0Z"/>
  <path fill="currentColor" d="M190.4 81.0Q190.4 95.6 181.1 104.5Q171.6 113.4 158.1 113.4Q143.4 113.4 134.0 103.8Q125.1 94.7 125.4 80.7Q125.5 67.1 134.5 58.1Q143.7 48.9 158.1 48.9Q172.7 48.9 181.6 57.7Q190.4 66.6 190.4 81.0ZM174.7 80.2Q174.7 72.5 170.0 67.5Q165.3 62.6 158.0 62.6Q150.3 62.6 145.4 67.5Q140.5 72.5 140.5 80.2Q140.3 87.3 145.4 92.7Q150.6 97.9 158.0 97.9Q165.2 97.9 169.8 93.1Q174.5 88.4 174.7 80.2Z"/>
  <path fill="currentColor" d="M237.6 111.5Q230.4 114.7 221.7 113.9Q206.7 112.5 199.8 110.6L199.6 94.7L212.1 98.5Q219.3 100.6 225.0 100.6Q231.7 100.6 232.2 96.6Q233.0 90.5 222.5 85.8Q219.7 84.7 215.6 82.9Q211.5 81.2 206.0 78.6Q199.6 74.1 199.6 66.3Q199.6 57.4 205.7 53.3Q210.5 50.0 216.6 49.2Q217.7 49.1 220.5 49.0Q223.2 48.9 227.5 48.9Q229.9 48.9 235.4 50.0Q241.8 51.5 242.0 51.5V65.9Q240.4 65.3 238.8 64.8Q237.3 64.3 235.7 63.8Q229.6 61.8 224.5 61.8Q216.4 61.4 216.4 65.8Q216.8 68.7 220.3 70.3Q222.5 71.1 224.8 71.9Q227.0 72.7 229.3 73.5Q248.9 81.2 248.9 95.1Q248.9 106.5 237.6 111.5Z"/>
  <path fill="currentColor" d="M359.7 112.0 343.9 112.2Q344.1 108.0 344.2 102.3Q344.3 96.6 344.1 88.9Q343.9 82.5 343.7 78.2Q343.5 74.0 343.0 71.7Q340.9 62.4 333.8 62.4Q327.3 62.4 322.3 65.9Q321.0 67.1 319.9 68.2Q318.7 69.3 317.5 70.4Q317.6 72.4 317.6 75.2Q317.6 78.0 317.6 81.7L317.8 112.0H302.9Q302.9 109.0 302.9 104.9Q302.9 100.8 303.0 95.5Q303.2 87.6 303.0 81.5Q302.7 71.1 301.4 67.7Q298.8 61.8 290.8 61.8Q284.4 61.8 280.1 66.1Q279.3 67.2 278.3 68.3Q277.3 69.5 276.5 70.7V112.0H261.1Q261.4 103.7 261.6 90.0Q261.8 76.4 261.8 57.4Q261.6 56.5 261.6 54.5Q261.6 52.6 261.4 49.7H276.2L276.1 56.8Q284.1 48.3 296.0 48.3Q309.0 48.3 313.6 57.9Q316.0 55.0 321.5 52.3Q329.3 48.3 337.8 48.3Q349.1 48.3 353.9 55.2Q359.4 62.7 359.4 81.7V100.3Q359.5 105.9 359.6 109.2Q359.7 112.5 359.7 112.0Z"/>
  <path fill="currentColor" d="M435.0 81.0Q435.0 95.6 425.7 104.5Q416.2 113.4 402.8 113.4Q388.0 113.4 378.7 103.8Q369.7 94.7 370.0 80.7Q370.2 67.1 379.2 58.1Q388.3 48.9 402.8 48.9Q417.4 48.9 426.2 57.7Q435.0 66.6 435.0 81.0ZM419.3 80.2Q419.3 72.5 414.6 67.5Q410.0 62.6 402.6 62.6Q394.9 62.6 390.0 67.5Q385.1 72.5 385.1 80.2Q384.9 87.3 390.1 92.7Q395.2 97.9 402.6 97.9Q409.8 97.9 414.5 93.1Q419.1 88.4 419.3 80.2Z"/>
  <path fill="currentColor" d="M482.3 111.5Q475.0 114.7 466.4 113.9Q451.3 112.5 444.4 110.6L444.2 94.7L456.7 98.5Q464.0 100.6 469.6 100.6Q476.3 100.6 476.8 96.6Q477.6 90.5 467.2 85.8Q464.3 84.7 460.2 82.9Q456.1 81.2 450.6 78.6Q444.2 74.1 444.2 66.3Q444.2 57.4 450.3 53.3Q455.1 50.0 461.2 49.2Q462.4 49.1 465.1 49.0Q467.8 48.9 472.1 48.9Q474.6 48.9 480.0 50.0Q486.4 51.5 486.6 51.5V65.9Q485.0 65.3 483.5 64.8Q481.9 64.3 480.3 63.8Q474.2 61.8 469.1 61.8Q461.1 61.4 461.1 65.8Q461.4 68.7 464.9 70.3Q467.2 71.1 469.4 71.9Q471.7 72.7 473.9 73.5Q493.5 81.2 493.5 95.1Q493.5 106.5 482.3 111.5Z"/>
  <circle cx="124.1" cy="28.0" r="6.4" fill="currentColor"/>
  <circle cx="4.5" cy="3.4" r="6.4" fill="currentColor"/>
  <circle cx="-5.9" cy="113.7" r="6.4" fill="currentColor"/>
</svg>

currentColor does not cascade through <img> — the file renders black. Inline the markup (template include / component) wherever it should follow the theme.