```tsx
import { Component, h } from '@stencil/core';

@Component({
  tag: 'fab-list-example',
  styleUrl: 'fab-list-example.css'
})
export class FabListExample {
  render() {
    return [
      <ion-fab vertical="center" horizontal="center">
        <ion-fab-button>Share</ion-fab-button>
        <ion-fab-list side="top">
          <ion-fab-button>
            <ion-icon name="logo-facebook"></ion-icon>
          </ion-fab-button>
          <ion-fab-button>
            <ion-icon name="logo-twitter"></ion-icon>
          </ion-fab-button>
          <ion-fab-button>
            <ion-icon name="logo-youtube"></ion-icon>
          </ion-fab-button>
        </ion-fab-list>

        <ion-fab-list side="end">
          <ion-fab-button>
            <ion-icon name="logo-pwa"></ion-icon>
          </ion-fab-button>
          <ion-fab-button>
            <ion-icon name="logo-npm"></ion-icon>
          </ion-fab-button>
          <ion-fab-button>
            <ion-icon name="logo-ionic"></ion-icon>
          </ion-fab-button>
        </ion-fab-list>

        <ion-fab-list side="bottom">
          <ion-fab-button>
            <ion-icon name="logo-github"></ion-icon>
          </ion-fab-button>
          <ion-fab-button>
            <ion-icon name="logo-javascript"></ion-icon>
          </ion-fab-button>
          <ion-fab-button>
            <ion-icon name="logo-angular"></ion-icon>
          </ion-fab-button>
        </ion-fab-list>

        <ion-fab-list side="start">
          <ion-fab-button>
            <ion-icon name="logo-vimeo"></ion-icon>
          </ion-fab-button>
          <ion-fab-button>
            <ion-icon name="logo-chrome"></ion-icon>
          </ion-fab-button>
          <ion-fab-button>
            <ion-icon name="logo-react"></ion-icon>
          </ion-fab-button>
        </ion-fab-list>
      </ion-fab>
    ];
  }
}
```