diff --git a/packages/react-notion-x/src/components/page-icon.tsx b/packages/react-notion-x/src/components/page-icon.tsx
index a0a1a0d6b..edc6c626d 100644
--- a/packages/react-notion-x/src/components/page-icon.tsx
+++ b/packages/react-notion-x/src/components/page-icon.tsx
@@ -29,7 +29,7 @@ export function PageIconImpl({
   hideDefaultIcon?: boolean
   defaultIcon?: string | null
 }) {
-  const { mapImageUrl, recordMap, darkMode } = useNotionContext()
+  const { alignCenter, mapImageUrl, recordMap, darkMode } = useNotionContext()
   let isImage = false
   let content: any = null
 
@@ -94,7 +94,10 @@ export function PageIconImpl({
     <div
       className={cs(
         inline ? 'notion-page-icon-inline' : 'notion-page-icon-hero',
-        isImage ? 'notion-page-icon-image' : 'notion-page-icon-span'
+        isImage ? 'notion-page-icon-image' : 'notion-page-icon-span',
+        alignCenter
+          ? 'notion-page-icon--align-center'
+          : 'notion-page-icon--align-left'
       )}
     >
       {content}
diff --git a/packages/react-notion-x/src/context.tsx b/packages/react-notion-x/src/context.tsx
index 4bb8a5418..f770c076a 100644
--- a/packages/react-notion-x/src/context.tsx
+++ b/packages/react-notion-x/src/context.tsx
@@ -35,6 +35,7 @@ export interface NotionContext {
   minTableOfContentsItems: number
   linkTableTitleProperties: boolean
   isLinkCollectionToUrlProperty: boolean
+  alignCenter: boolean
 
   defaultPageIcon?: string | null
   defaultPageCover?: string | null
@@ -63,6 +64,7 @@ export interface PartialNotionContext {
   showCollectionViewDropdown?: boolean
   linkTableTitleProperties?: boolean
   isLinkCollectionToUrlProperty?: boolean
+  alignCenter?: boolean
 
   showTableOfContents?: boolean
   minTableOfContentsItems?: number
@@ -169,6 +171,7 @@ const defaultNotionContext: NotionContext = {
   showCollectionViewDropdown: true,
   linkTableTitleProperties: true,
   isLinkCollectionToUrlProperty: false,
+  alignCenter: true,
 
   showTableOfContents: false,
   minTableOfContentsItems: 3,
diff --git a/packages/react-notion-x/src/renderer.tsx b/packages/react-notion-x/src/renderer.tsx
index 474370814..f0f69941a 100644
--- a/packages/react-notion-x/src/renderer.tsx
+++ b/packages/react-notion-x/src/renderer.tsx
@@ -34,6 +34,7 @@ export function NotionRenderer({
   defaultPageIcon,
   defaultPageCover,
   defaultPageCoverPosition,
+  alignCenter,
   ...rest
 }: {
   recordMap: ExtendedRecordMap
@@ -59,6 +60,7 @@ export function NotionRenderer({
   linkTableTitleProperties?: boolean
   isLinkCollectionToUrlProperty?: boolean
   isImageZoomable?: boolean
+  alignCenter?: boolean
 
   showTableOfContents?: boolean
   minTableOfContentsItems?: number
@@ -117,6 +119,7 @@ export function NotionRenderer({
       defaultPageCover={defaultPageCover}
       defaultPageCoverPosition={defaultPageCoverPosition}
       zoom={isImageZoomable ? zoom : null}
+      alignCenter={alignCenter}
     >
       <NotionBlockRenderer {...rest} />
     </NotionContextProvider>
diff --git a/packages/react-notion-x/src/styles.css b/packages/react-notion-x/src/styles.css
index 19f7dccae..3c954a362 100644
--- a/packages/react-notion-x/src/styles.css
+++ b/packages/react-notion-x/src/styles.css
@@ -623,7 +623,6 @@
 .notion-page-icon-hero {
   position: absolute;
   top: 0;
-  left: 50%;
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -632,12 +631,30 @@
 .notion-page-icon-hero.notion-page-icon-image {
   width: 124px;
   height: 124px;
+}
+
+.notion-page-icon-hero.notion-page-icon-image.notion-page-icon--align-left {
+  left: 0%;
+  margin-left: 26px;
+}
+
+.notion-page-icon-hero.notion-page-icon-image.notion-page-icon--align-center {
+  left: 50%;
   margin-left: -62px;
 }
 
 .notion-page-icon-hero.notion-page-icon-span {
   height: 78px;
   width: 78px;
+}
+
+.notion-page-icon-hero.notion-page-icon-span.notion-page-icon--align-left {
+  left: 0%;
+  margin-left: 16px;
+}
+
+.notion-page-icon-hero.notion-page-icon-span.notion-page-icon--align-center {
+  left: 50%;
   margin-left: -39px;
 }