Concorde UI component — Icon. customIconDefaultPrefix="regular"> Doc ID: core/components/ui/icon/icon. Keywords: Concorde, supersoniks, core/components/ui/icon/icon, icon, Icon, UI component, sonic-icon, web component. URL: https://concorde.supersoniks.org/crawl/core/components/ui/icon/icon.html.

Icon

Custom

Icons located in the following folder : /svg/$prefix/$name.svg

<sonic-scope  customIconLibraryPath="/svg/$prefix/$name.svg"
      customIconDefaultPrefix="regular">
      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4  gap-8">
        <div class="text-center">
          <sonic-icon library="custom" prefix="regular" name="plane"></sonic-icon>
          <br>
          <div class="text-xs mt-1">regular</div>
        </div>
        <div class="text-center">
          <sonic-icon library="custom" prefix="solid" name="plane"></sonic-icon>
          <br>
          <div class="text-xs mt-1">solid</div>
        </div>
        <div class="text-center">
          <sonic-icon library="custom"  name="plane"></sonic-icon>
          <br>
          <div class="text-xs mt-1">default prefix</div>
        </div>
      </div>
    </sonic-scope>

External

<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-8">
      <sonic-link href="https://heroicons.com/" target="_blank" class="text-center underline">
        <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
        <br>
        <div class="text-xs mt-1">heroicons</div>
      </sonic-link>
      <sonic-link href="https://iconoir.com/" target="_blank" class="text-center underline">
        <sonic-icon library="iconoir" name="2x2-cell"  size="lg"></sonic-icon>
        <br>
        <div class="text-xs mt-1">iconoir</div>
      </sonic-link>
      <sonic-link href="https://materialdesignicons.com/" target="_blank" class="text-center underline">
        <sonic-icon library="material" prefix="outline" name="email" size="lg"></sonic-icon>
        <br>
        <div class="text-xs mt-1">material design</div>
      </sonic-link>
      <sonic-link href="https://fontawesome.com/search?o=r&m=free&s=regular" target="_blank" class="text-center underline">
        <sonic-icon library="fontAwesome" prefix="regular" name="user" size="lg"></sonic-icon>
        <br>
        <div class="text-xs mt-1">fontAwesome regular</div>
      </sonic-link>
      <sonic-link href="https://fontawesome.com/search?o=r&m=free&s=solid" target="_blank" class="text-center underline">
        <sonic-icon library="fontAwesome" prefix="solid" name="book" size="lg"></sonic-icon>
        <br>
        <div class="text-xs mt-1">fontAwesome solid</div>
      </sonic-link>
      <sonic-link href="https://feathericons.com/" target="_blank" class="text-center underline">
        <sonic-icon library="feathers" name="activity"  size="lg"></sonic-icon>
        <br>
        <div class="text-xs mt-1">feathers</div>
      </sonic-link>
      <sonic-link href="https://lucide.dev/" target="_blank" class="text-center underline">
        <sonic-icon library="lucide" name="album"  size="lg"></sonic-icon>
        <br>
        <div class="text-xs mt-1">lucide</div>
      </sonic-link>
    </div>

Size

<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4  gap-8">
      <div class="text-center">
        <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xs"></sonic-icon>
        <br>
        <div class="text-xs mt-1">2xs</div>
      </div>
      <div class="text-center">
        <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="xs"></sonic-icon>
        <br>
        <div class="text-xs mt-1">xs</div>
      </div>
      <div class="text-center">
        <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="sm"></sonic-icon>
        <br>
        <div class="text-xs mt-1">sm</div>
      </div>
      <div class="text-center">
        <sonic-icon library="heroicons" prefix="outline" name="academic-cap"></sonic-icon>
        <br>
        <div class="text-xs mt-1">default</div>
      </div>
      <div class="text-center">
        <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="lg"></sonic-icon>
        <br>
        <div class="text-xs mt-1">lg</div>
      </div>
      <div class="text-center">
        <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="xl"></sonic-icon>
        <br>
        <div class="text-xs mt-1">xl</div>
      </div>
      <div class="text-center">
        <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="2xl"></sonic-icon>
        <br>
        <div class="text-xs mt-1">2xl</div>
      </div>
      <div class="text-center">
        <sonic-icon library="heroicons" prefix="outline" name="academic-cap" size="3xl"></sonic-icon>
        <br>
        <div class="text-xs mt-1">3xl</div>
      </div>
    </div>