diff --git a/source/funkin/play/character/CharacterData.hx b/source/funkin/play/character/CharacterData.hx
index bac2c7141..052310a7e 100644
--- a/source/funkin/play/character/CharacterData.hx
+++ b/source/funkin/play/character/CharacterData.hx
@@ -12,6 +12,7 @@ import funkin.util.assets.DataAssets;
 import funkin.util.VersionUtil;
 import haxe.Json;
 import openfl.utils.Assets;
+import flixel.graphics.frames.FlxFrame;
 
 class CharacterDataParser
 {
@@ -281,41 +282,78 @@ class CharacterDataParser
   }
 
   /**
-   * TODO: Hardcode this.
+   * Returns the idle frame of a character.
    */
-  public static function getCharPixelIconAsset(char:String):String
+  public static function getCharPixelIconAsset(char:String):FlxFrame
   {
-    var icon:String = char;
+    var charPath:String = "freeplay/icons/";
 
-    switch (icon)
+    // FunkinCrew please dont skin me alive for copying pixelated icon and changing it a tiny bit
+    switch (char)
     {
-      case "bf-christmas" | "bf-car" | "bf-pixel" | "bf-holding-gf":
-        icon = "bf";
+      case "bf-christmas" | "bf-car" | "bf-pixel" | "bf-holding-gf" | "bf-dark":
+        charPath += "bfpixel";
       case "monster-christmas":
-        icon = "monster";
+        charPath += "monsterpixel";
       case "mom" | "mom-car":
-        icon = "mommy";
+        charPath += "mommypixel";
       case "pico-blazin" | "pico-playable" | "pico-speaker":
-        icon = "pico";
-      case "gf-christmas" | "gf-car" | "gf-pixel" | "gf-tankmen":
-        icon = "gf";
+        charPath += "picopixel";
+      case "gf-christmas" | "gf-car" | "gf-pixel" | "gf-tankmen" | "gf-dark":
+        charPath += "gfpixel";
       case "dad":
-        icon = "daddy";
+        charPath += "dadpixel";
       case "darnell-blazin":
-        icon = "darnell";
+        charPath += "darnellpixel";
       case "senpai-angry":
-        icon = "senpai";
+        charPath += "senpaipixel";
       case "spooky-dark":
-        icon = "spooky";
+        charPath += "spookypixel";
       case "tankman-atlas":
-        icon = "tankman";
+        charPath += "tankmanpixel";
+      case "pico-christmas" | "pico-dark":
+        charPath += "picopixel";
+      default:
+        charPath += '${char}pixel';
     }
 
-    var path = Paths.image("freeplay/icons/" + icon + "pixel");
-    if (Assets.exists(path)) return path;
+    if (!Assets.exists(Paths.image(charPath)))
+    {
+      trace('[WARN] Character ${char} has no freeplay icon.');
+      return null;
+    }
 
-    // TODO: Hardcode some additional behavior or a fallback.
-    return null;
+    var isAnimated = Assets.exists(Paths.file('images/$charPath.xml'));
+    var frame:FlxFrame = null;
+
+    if (isAnimated)
+    {
+      var frames = Paths.getSparrowAtlas(charPath);
+
+      var idleFrame:FlxFrame = frames.frames.find(function(frame:FlxFrame):Bool {
+        return frame.name.startsWith('idle');
+      });
+
+      if (idleFrame == null)
+      {
+        trace('[WARN] Character ${char} has no idle in their freeplay icon.');
+        return null;
+      }
+
+      // so, haxe.ui.backend.AssetsImpl uses the parent width and height, which makes the image go crazy when rendered
+      // so this is a work around so that it uses the actual width and height
+      var imageGraphic = flixel.graphics.FlxGraphic.fromFrame(idleFrame);
+
+      var imageFrame = flixel.graphics.frames.FlxImageFrame.fromImage(imageGraphic);
+      frame = imageFrame.frame;
+    }
+    else
+    {
+      var imageFrame = flixel.graphics.frames.FlxImageFrame.fromImage(Paths.image(charPath));
+      frame = imageFrame.frame;
+    }
+
+    return frame;
   }
 
   /**
diff --git a/source/funkin/ui/debug/charting/dialogs/ChartEditorCharacterIconSelectorMenu.hx b/source/funkin/ui/debug/charting/dialogs/ChartEditorCharacterIconSelectorMenu.hx
index 1edbb6c00..90d998a02 100644
--- a/source/funkin/ui/debug/charting/dialogs/ChartEditorCharacterIconSelectorMenu.hx
+++ b/source/funkin/ui/debug/charting/dialogs/ChartEditorCharacterIconSelectorMenu.hx
@@ -95,7 +95,7 @@ class ChartEditorCharacterIconSelectorMenu extends ChartEditorBaseMenu
       }
 
       var LIMIT = 6;
-      charButton.icon = CharacterDataParser.getCharPixelIconAsset(charId);
+      charButton.icon = haxe.ui.util.Variant.fromImageData(CharacterDataParser.getCharPixelIconAsset(charId));
       charButton.text = charData.name.length > LIMIT ? '${charData.name.substr(0, LIMIT)}.' : '${charData.name}';
 
       charButton.onClick = _ -> {
diff --git a/source/funkin/ui/debug/charting/toolboxes/ChartEditorMetadataToolbox.hx b/source/funkin/ui/debug/charting/toolboxes/ChartEditorMetadataToolbox.hx
index c97e8142d..f68776cab 100644
--- a/source/funkin/ui/debug/charting/toolboxes/ChartEditorMetadataToolbox.hx
+++ b/source/funkin/ui/debug/charting/toolboxes/ChartEditorMetadataToolbox.hx
@@ -221,7 +221,7 @@ class ChartEditorMetadataToolbox extends ChartEditorBaseToolbox
     var charDataOpponent:Null<CharacterData> = CharacterDataParser.fetchCharacterData(chartEditorState.currentSongMetadata.playData.characters.opponent);
     if (charDataOpponent != null)
     {
-      buttonCharacterOpponent.icon = CharacterDataParser.getCharPixelIconAsset(chartEditorState.currentSongMetadata.playData.characters.opponent);
+      buttonCharacterOpponent.icon = haxe.ui.util.Variant.fromImageData(CharacterDataParser.getCharPixelIconAsset(chartEditorState.currentSongMetadata.playData.characters.opponent));
       buttonCharacterOpponent.text = charDataOpponent.name.length > LIMIT ? '${charDataOpponent.name.substr(0, LIMIT)}.' : '${charDataOpponent.name}';
     }
     else
@@ -233,7 +233,7 @@ class ChartEditorMetadataToolbox extends ChartEditorBaseToolbox
     var charDataGirlfriend:Null<CharacterData> = CharacterDataParser.fetchCharacterData(chartEditorState.currentSongMetadata.playData.characters.girlfriend);
     if (charDataGirlfriend != null)
     {
-      buttonCharacterGirlfriend.icon = CharacterDataParser.getCharPixelIconAsset(chartEditorState.currentSongMetadata.playData.characters.girlfriend);
+      buttonCharacterGirlfriend.icon = haxe.ui.util.Variant.fromImageData(CharacterDataParser.getCharPixelIconAsset(chartEditorState.currentSongMetadata.playData.characters.girlfriend));
       buttonCharacterGirlfriend.text = charDataGirlfriend.name.length > LIMIT ? '${charDataGirlfriend.name.substr(0, LIMIT)}.' : '${charDataGirlfriend.name}';
     }
     else
@@ -245,7 +245,7 @@ class ChartEditorMetadataToolbox extends ChartEditorBaseToolbox
     var charDataPlayer:Null<CharacterData> = CharacterDataParser.fetchCharacterData(chartEditorState.currentSongMetadata.playData.characters.player);
     if (charDataPlayer != null)
     {
-      buttonCharacterPlayer.icon = CharacterDataParser.getCharPixelIconAsset(chartEditorState.currentSongMetadata.playData.characters.player);
+      buttonCharacterPlayer.icon = haxe.ui.util.Variant.fromImageData(CharacterDataParser.getCharPixelIconAsset(chartEditorState.currentSongMetadata.playData.characters.player));
       buttonCharacterPlayer.text = charDataPlayer.name.length > LIMIT ? '${charDataPlayer.name.substr(0, LIMIT)}.' : '${charDataPlayer.name}';
     }
     else