Icons

It is possible to change the color of an icon by changing the text color

<div class="flex gap-4">
  <div>
    <svg class="text-green-500 aspect-square w-10" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
      <!-- SVG content -->
    </svg>
  </div>
  <div>
    <svg class="text-red-500 aspect-square w-10" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <!-- SVG content -->
    </svg>
  </div>
  <div>
    <svg class="text-yellow-500 aspect-square w-10" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
      <!-- SVG content -->
    </svg>
  </div>
  <div>
    <svg class="text-blue-500 aspect-square w-10" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <!-- SVG content -->
    </svg>
  </div>
</div>

Fundermaps icons

Fundermaps icons follow the default color, but it is possible to give a fundermaps icon a blue or green accent.

<div class="flex gap-4">
  <div>
    <svg class="accent-color-blue aspect-square w-10" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <!-- SVG content -->
    </svg>
  </div>
  <div>
    <svg class="accent-color-green aspect-square w-10" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <!-- SVG content -->
    </svg>
  </div>
  <div>
    <svg class="accent-color-blue aspect-square w-10" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <!-- SVG content -->
    </svg>
  </div>
  <div>
    <svg class="accent-color-green aspect-square w-10" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <!-- SVG content -->
    </svg>
  </div>
</div>

Foundation

<div class="flex gap-4 w-">
  <div>
    <svg class="accent-color-blue aspect-square w-16" viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg">
      <!-- SVG content -->
    </svg>
  </div>
  <div>
    <svg class="accent-color-green aspect-square w-16" viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg">
      <!-- SVG content -->
    </svg>
  </div>
  <div>
    <svg class="aspect-square w-16" viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg">
      <!-- SVG content -->
    </svg>
  </div>
  <div>
    <svg class="aspect-square w-16" viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg">
      <!-- SVG content -->
    </svg>
  </div>
</div>

Facade

<div class="flex gap-4">
  <div>
    <svg class="accent-color-blue aspect-square w-16" viewBox="0 0 73 90" xmlns="http://www.w3.org/2000/svg">
      <!-- SVG content -->
    </svg>
  </div>
  <div>
    <svg class="accent-color-green aspect-square w-16" viewBox="0 0 73 90" xmlns="http://www.w3.org/2000/svg">
      <!-- SVG content -->
    </svg>
  </div>
  <div>
    <svg class="aspect-square w-16" viewBox="0 0 74 90" xmlns="http://www.w3.org/2000/svg">
      <!-- SVG content -->
    </svg>
  </div>
  <div>
    <svg class="accent-color-green aspect-square w-16" viewBox="0 0 73 90" xmlns="http://www.w3.org/2000/svg">
      <!-- SVG content -->
    </svg>
  </div>
  <div>
    <svg class="accent-color-green aspect-square w-16" viewBox="0 0 73 90" xmlns="http://www.w3.org/2000/svg">
      <!-- SVG content -->
    </svg>
  </div>
</div>