How to utilise the Fan blade and pedistal fan hollow logo

[rchiileea]

To make these to icons work together you need a picture eliments card (which you could put into a grid card or other to make it work if different sized)

first upload a blank 30x30px png or use this one to local folder /local/ (or www as it looks in file browser).
blank.zip

type: picture-elements
image: /local/blank.png
elements:
  - type: custom:button-card
    entity: switch.fanplug  #<-------------replace with your fan entity or device
    icon: phu:pedastal-fan-hollow
    show_name: false
    style:
      top: 80%  #<-------------this controls how far from the top the hollow fan logo is 
      left: 50%   #<-------------this controls how far from the left the hollow fan logo is 
      width: 240%  #<-------------this controls the size of the hollow fan logo
  - type: custom:button-card
    entity: light.hue_iris_1
    icon: phu:fan-blade
    show_name: false
    tap_action:
      action: toggle
      haptic: medium
    hold_action:
      action: more-info
      haptic: medium
    styles:
      card:
        - background-color: transparent
        - box-shadow: none
      grid:
        - grid-template-areas: '"i" "n"'
        - grid-template-columns: 1fr
      name:
        - color: white
    state:
      - value: 'on'
        styles:
          icon:
            - animation: rotating 1s linear infinite
            - filter: drop-shadow(0px 0px 4px teal) drop-shadow(0px 0px 4px teal)  #<----this controls the width, size, color of the glow on fan blade
    style:
      top: 45.5%  #<-------------this controls how far from the top the fan blade logo
      left: 50%  #<-------------this controls how far from the left the fan blade logo
      width: 105%  #<-------------this controls the size of the fan blade logo
style: |
  ha-card {
    box-shadow: none;
  }