Using Static Application Files as Card List Icon

To accomplish this you have to create a new template for cards lists or modify the existing one.

In the template definition found in Shared Components > Templates, find the item you're looking for (in this case it's Cards) and click on it. Within that you'll need to change the "List Template Current" and "List Template Noncurrent" sections. Below is how the template is originally configured:

<li class="t-Cards-item is-active #A04#">
  <div class="t-Card">
<a href="#LINK#" class="t-Card-wrap" #A05#>
  <div class="t-Card-icon u-color #A06#"><span class="t-Icon #ICON_CSS_CLASSES#"><span class="t-Card-initials" role="presentation">#A03#</span></span></div>
  <div class="t-Card-titleWrap"><h3 class="t-Card-title">#TEXT#</h3><h4 class="t-Card-subtitle">#A07#</h4></div>
  <div class="t-Card-body">
    <div class="t-Card-desc">#A01#</div>
    <div class="t-Card-info">#A02#</div>
  </div>
  <span class="t-Card-colorFill u-color #A06#"></span>
</a>

You will need to change the t-Card-icon section so it references an image source rather than the Icon CSS class.

<li class="t-Cards-item is-active #A04#">
  <div class="t-Card">
<a href="#LINK#" class="t-Card-wrap" #A05#>
  *<div class="t-Card-icon u-color #A06#"><img src="#IMAGE#"></img> </div>*
  <div class="t-Card-titleWrap"><h3 class="t-Card-title">#TEXT#</h3><h4 class="t-Card-subtitle">#A07#</h4></div>
  <div class="t-Card-body">
    <div class="t-Card-desc">#A01#</div>
    <div class="t-Card-info">#A02#</div>
  </div>
  <span class="t-Card-colorFill u-color #A06#"></span>
</a>

Changing the image source to #IMAGE# will reference whatever you have set up in your list configuration for that list item in the Image/Class field.