diff --git a/TestsExample/App.js b/TestsExample/App.js
index 023cd38fb..a17e69df0 100644
--- a/TestsExample/App.js
+++ b/TestsExample/App.js
@@ -10,6 +10,7 @@ import Test2080 from './src/Test2080';
 import PointerEventsBoxNone from './src/PointerEventsBoxNone';
 import Test2071 from './src/Test2071';
 import Test2089 from './src/Test2089';
+import Test2196 from './src/Test2196';
 
 export default function App() {
   return <ColorTest />;
diff --git a/TestsExample/src/Test2196.tsx b/TestsExample/src/Test2196.tsx
new file mode 100644
index 000000000..d9ddecd29
--- /dev/null
+++ b/TestsExample/src/Test2196.tsx
@@ -0,0 +1,59 @@
+import * as React from 'react';
+import {View, Button, Text} from 'react-native';
+import Svg, {Circle} from 'react-native-svg';
+import {SvgCssUri} from 'react-native-svg/css';
+
+const URIs = {
+  invalid: 'https://en.wikipedia.org/wiki/File:Vector-based_example.svg',
+  valid:
+    'https://upload.wikimedia.org/wikipedia/commons/3/30/Vector-based_example.svg',
+};
+
+export default function App() {
+  const [uri, setUri] = React.useState(URIs.invalid);
+
+  const handlePress = React.useCallback(() => {
+    const newUri = uri === URIs.valid ? URIs.invalid : URIs.valid;
+    setUri(newUri);
+  }, [uri]);
+
+  const title =
+    uri === URIs.invalid
+      ? 'Render fallback due to invalid SVG'
+      : 'Render Valid SVG';
+
+  const buttonTitle = `Switch to ${
+    uri === URIs.invalid ? 'valid' : 'invalid'
+  } SVG`;
+
+  return (
+    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
+      <Text>{title}</Text>
+      <View style={{paddingVertical: 20}}>
+        <SvgCssUri
+          onError={() => {}}
+          uri={uri}
+          width={100}
+          height={100}
+          fallback={
+            <Svg
+              width={100}
+              height={100}
+              viewBox="0 0 100 100"
+              transform={[{scaleX: 1}, {scaleY: -1}]}>
+              <Circle
+                cx={50}
+                cy={50}
+                r={40}
+                stroke="black"
+                strokeWidth={3}
+                fill="red"
+              />
+            </Svg>
+          }
+        />
+      </View>
+      <Button onPress={handlePress} title={buttonTitle} />
+    </View>
+  );
+}
diff --git a/src/css/css.tsx b/src/css/css.tsx
index fea79c621..3e066fca3 100644
--- a/src/css/css.tsx
+++ b/src/css/css.tsx
@@ -688,12 +688,17 @@ export const inlineStyles: Middleware = function inlineStyles(
 };
 
 export function SvgCss(props: XmlProps) {
-  const { xml, override } = props;
-  const ast = useMemo<JsxAST | null>(
-    () => (xml !== null ? parse(xml, inlineStyles) : null),
-    [xml]
-  );
-  return <SvgAst ast={ast} override={override || props} />;
+  const {xml, override, fallback, onError = err} = props;
+  try {
+    const ast = useMemo<JsxAST | null>(
+      () => (xml !== null ? parse(xml, inlineStyles) : null),
+      [xml]
+    );
+    return <SvgAst ast={ast} override={override || props} />;
+  } catch (error) {
+    onError(error);
+    return fallback ?? null;
+  }
 }
 
 export function SvgCssUri(props: UriProps) {
@@ -716,7 +721,7 @@ export function SvgCssUri(props: UriProps) {
   if (isError) {
     return fallback ?? null;
   }
-  return <SvgCss xml={xml} override={props} />;
+  return <SvgCss xml={xml} override={props} fallback={fallback}/>;
 }
 
 // Extending Component is required for Animated support.