diff --git a/lib/widgets/common/grid/theme.dart b/lib/widgets/common/grid/theme.dart
index 992e68fba..3c4fda8d5 100644
--- a/lib/widgets/common/grid/theme.dart
+++ b/lib/widgets/common/grid/theme.dart
@@ -18,10 +18,11 @@ class GridTheme extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ProxyProvider<Settings, GridThemeData>(
-      update: (_, settings, __) {
-        final iconSize = min(28.0, (extent / 4)).roundToDouble();
-        final fontSize = (iconSize / 2).floorToDouble();
+    return ProxyProvider2<Settings, MediaQueryData, GridThemeData>(
+      update: (context, settings, mq, previous) {
+        var iconSize = min(24.0, (extent / 5)).roundToDouble();
+        final fontSize = (iconSize * .7).floorToDouble();
+        iconSize *= mq.textScaleFactor;
         final highlightBorderWidth = extent * .1;
         return GridThemeData(
           iconSize: iconSize,
diff --git a/lib/widgets/common/identity/aves_icons.dart b/lib/widgets/common/identity/aves_icons.dart
index 92bc0f004..6dd3f7aa6 100644
--- a/lib/widgets/common/identity/aves_icons.dart
+++ b/lib/widgets/common/identity/aves_icons.dart
@@ -158,7 +158,12 @@ class OverlayIcon extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final size = context.select<GridThemeData, double>((t) => t.iconSize);
-    final iconChild = Icon(icon, size: size);
+    final iconChild = Icon(
+      icon,
+      size: size,
+      // consistent with the color used for the text next to it
+      color: DefaultTextStyle.of(context).style.color,
+    );
     final iconBox = SizedBox(
       width: size,
       height: size,
@@ -172,7 +177,7 @@ class OverlayIcon extends StatelessWidget {
     );
 
     return Container(
-      margin: const EdgeInsets.all(1),
+      margin: const EdgeInsets.only(left: 1, right: 1, bottom: 1),
       padding: text != null ? EdgeInsets.only(right: size / 4) : null,
       decoration: BoxDecoration(
         color: const Color(0xBB000000),